/* ==========================================================================
	 1. KHỞI TẠO CƠ BẢN & KHUNG VIỀN (RESET & BASE)
	 ========================================================================== */
	* {
		box-sizing			: border-box;
	}

	p {
		margin-top			: 0px;
		margin-bottom		: 0px;
	}

	body {
		font-family			: Arial, Helvetica, sans-serif;
		font-size			: 20px;
		max-width			: 100%;
		margin				: 0px auto;
		padding				: 0px;
		color				: #363636;
		text-indent			: 0px;
		line-height			: 1.7;
		text-align			: justify;
		font-weight			: 300; 
	}

	strong {
		font-weight			: 600; 
	}

	/* --- Định dạng các đường liên kết (Links) --- */
	a:link {
		color				: #363636;
		text-decoration		: none;
		transition			: color 0.3s ease;
	}

	a:visited {
		color				: #363636;
		text-decoration		: none;
	}

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

	/* ==========================================================================
	 2. TIÊU ĐỀ & VĂN BẢN (HEADINGS & TEXT)
	 ========================================================================== */
	.TextHeading {	/* Chữ Đại tự G I A   P H Ả trên cùng trang Web*/
		font				: normal 700 40px "Black Ops One", system-ui;
		padding				: 12px 5px 3px 5px;
		color				: #363636;
		text-align			: center;
		text-transform		: uppercase;
	}
		
	.TextHeading2 {	/* Từ Thủy tổ (dòng tiêu đề thứ 2) */
		font				: normal 300 0.9em Arial, sans-serif;
		font-optical-sizing	: auto;
		padding				: 12px 6px 3px 6px;
		line-height			: 1.5;
		text-align			: center;
		color				: #363636;
	}
	.TextHeading2mb {	/* Khởi thủy tại xứ An Đạo (dòng tiêu đề thứ 3, không hiện trong mobile) */
		font				: normal 300 0.9em Arial, sans-serif;
		font-optical-sizing	: auto;
		padding				: 0px 6px 18px 6px;
		line-height			: 1.5;
		text-align			: center;
		color				: #363636;
	}

	.TextTitle { 
		font-family			: Arial, Georgia, serif; 
		text-transform      : uppercase;
		font-size			: 25px;
		padding				: 6px 6px 6px 10px;
		text-align			: left;
		background			: #8B7765;
		font-weight			: 500;
		color				: #FDF5E6;
	}

	.TextTieude {
		display				: flex;
		flex-wrap			: wrap;
		align-items			: center;
		width				: 100%;
		gap					: 8px;
		margin				: 0;
		font-size			: 23px !important;
		padding				: 10px 6px 10px 10px;
		text-align			: left;
		font-weight			: 450;
		background			: #FFDEAD;
		color				: #363636;
	}
	
	.TextTieudeNoborder {	/* Dùng cho phần tiêu đề: Các ghi chép*/
		display				: flex; 
		flex-wrap			: wrap; 
		align-items			: center; 
		width				: 100%;
		gap					: 8px; 
		margin				: 0px 0; 
		padding				: 3px 6px 3px 15px;
		text-align			: left;
		font-weight			: 550;
		background			: #CFCFCF;
		color				: #363636;
	}

	.TextTieudeBottom {	/* Dùng cho phần đáy tất cả các trang*/
		display				: flex; 
		flex-wrap			: wrap; 
		justify-content		: flex-end; 
		gap					: 10px;
		align-items			: center; 
		width				: 100%;
		margin				: 0px 0; 
		font-size			: 23px !important;
		padding				: 10px 10px 10px 10px;
		text-align			: left;
		background			: #8B7765;
		color				: #363636;
	}
	
	.TextTieude2 {
		padding				: 10px 6px 10px 12px;
		text-align			: left;
		background			: #FFDEAD;
		color				: #363636;
		font-weight			: 600;
		-webkit-text-size-adjust: none !important;
		text-size-adjust	: none !important;
	}
	.TextTieude3 {
		padding				: 10px 6px 10px 10px;
		text-align			: left;
		background			: #EECFA1;
		color				: #363636;
		font-weight			: 600;
		-webkit-text-size-adjust: none !important;
		text-size-adjust	: none !important;
	}

	.TextBODYform {
		color				: #363636 !important; 
		width				: 100%;
		text-align			: left;
		max-width			: 950px; 
		margin				: 0px auto; 
		padding				: 10px;
		background-color	: #ffffff; 
	}

	.TextBODY {
		padding				: 5px 10px;
		text-align			: left;
		color				: #363636 !important;
		text-align			: left !important;		
	}

	.TextLEFT { /* Dùng cho cột bên trái*/
		font-size			: 0.9em;
		text-align			: left;
		padding				: 4px 4px 4px 15px;
		color				: #363636 !important;
	}
	
	.TextRight {
		display				: flex; 
		justify-content		: flex-end; 
		gap					: 10px; 
		align-items			: center;
		flex-grow			: 1;
		padding				: 2px 6px 2px 6px;
	}
	
	.form-groupright {
		display				: flex; 
		justify-content		: flex-end; 
		gap					: 5px; 
		align-items			: center;
		flex-grow			: 1;
		margin				: 10px; 
		text-align			: left;
		font-weight			: 300;
		color				: #363636 !important;		
	}

	.TextHonnhan {
		text-align			: left !important;
		padding				: 6px 36px 6px 36px;
		margin				: 5px;
		font-weight			: 300;
		color				: #363636; !important;
	}

	.TextLoiChua {
		font-weight		: 200;
		padding			: 12px 6px 16px 6px;
		font-size		: 0.7em;
		color			: #363636;
		text-align		: center;
		font-style		: italic;
	}
	
	.copryght-bottom {
		clear			: both !important; 
		display			: block; 
		width			: 100% !important; 
		margin			: 0px !important; 
		padding			: 20px !important; 
		background-color: #a3b8cc;
		font-size		: 16px !important; 
		color			: #FFF !important;
		text-align		: center;
	}
	/* ==========================================================================
	 3. BỐ CỤC CHUNG & DANH SÁCH (LAYOUT, CONTAINERS & LISTS)
	 ========================================================================== */
	#wrapper, .body1 {
		padding-top: 80px !important;
	}

	.container {
		display: flex !important; 
		flex-direction: row;
		width: 100%;
	}

	.column-left {
		flex				: 2; 
		padding				: 0px;
		background-color	: #f7f5f0;
	}

	.column-right {
		flex: 7; 
		padding: 10px;
		background-color: #FFFAF0;
	}

	/* --- Khối Danh Sách Chuẩn --- */
	ul.danh-sach-chuan {
		padding-left		: 20px !important; 
		margin-left			: 0px !important;
		border-left			: none !important;
		color				: #363636 !important;
	}

	ul.danh-sach-chuan li {
		list-style-type		: disc !important;
		margin				: 6px 3px !important;
		position			: static !important;
		font-weight			: 300 !important;
		color				: #363636 !important;
		text-align			: left;
	}

	ul.danh-sach-chuan li::before,
	ul.danh-sach-chuan li::after {
		content				: none !important;
		display				: none !important;
		border				: none !important;
		width				: 0 !important;
		height				: 0 !important;
	}

	/* --- Nhánh Cây Phả Hệ (Tree View) --- */
	ul {
		list-style-type: none;
		padding-left: 15px; 
		border-left: 1px dashed #b8a085; 
		margin: 4px 0;
	}

	li {
		margin: 5px 4px;
		position: relative;
	}

	li::before {
		content: "";
		position: absolute;
		top: 12px; 
		left: -15px;
		width: 12px;
		height: 1px;
		border-top: 1px dashed #b8a085; 
	}

	.toggle {
		cursor: pointer;
		user-select: none;
		color: #363636;
		margin-right: 4px;
		font-weight: bold;
	}

	.children {
		margin-left: 10px;
	}

	.children.collapsed {
		display: none;
	}

	/* --- Dòng Hôn Nhân --- */
	.dong-hon-nhan {
		display			: flex;
		flex-direction	: row;
		justify-content	: space-between;
		align-items		: center;
		width			: 100%;
		padding			: 15px 10px !important;
		gap				: 15px;         /* Tạo khoảng cách an toàn nếu text quá dài chạm vào nút */
		border-bottom	: 1px dashed #e8e5da;
		
	}
	.dong-hon-nhan > span {
		flex-grow: 1;
		line-height: 1.4;
	}
	.TextHonnhan {
		flex			: 1 !important;
		color			: #363636;
		padding			: 0 !important;
		margin			: 0 !important;
		display			: inline-flex !important;
		flex-direction	: row !important;
		flex-wrap		: wrap !important;
		align-items		: center;
		gap				: 8px;
		justify-content	: flex-start !important;
	}

	
/* ==========================================================================
	 4. NÚT BẤM & HIỆU ỨNG (BUTTONS, LINKS & ICON BADGES)
	 ========================================================================== */
	.link-btn {
		display				: inline-flex;
		align-items			: center;
		justify-content		: center;
		padding				: 3px 18px;
		font-size			: 1em !important;
		text-decoration		: none !important;
		background-color	: #f0f0f0 !important; 
		color				: #555555 !important;
		border-radius		: 8px !important;
		box-shadow			: 0 2px 15px rgba(0, 0, 0, 0.05) !important; 
		transition			: all 0.25s ease-in-out !important;
		cursor				: pointer;
		outline				: none;
		border				: none;
	}

	.link-btn i {
		font-size: 21px !important;
		color: #555555 !important;
		transition: color 0.25s ease-in-out !important;
	}
	.link-btn:hover {
		background-color		: #8B4513 !important;
		color					: #ffffff !important;
		box-shadow				: 0 0px 0px rgba(139, 69, 19, 0.25) !important;
		transform				: translateY(-1px) !important;
	}

	.link-btn:hover i {
		color					: #ffffff !important; 
	}
	
	
	/* Các nút công cụ*/
	/* ==========================================================================
	 4. NÚT BẤM & HIỆU ỨNG (BUTTONS, LINKS & ICON BADGES)
	 ========================================================================== */
	.link-cc {
		display				: inline-flex;
		align-items			: center;
		justify-content		: center;
		padding				: 10px 10px;
		font-size			: 1em !important;
		text-decoration		: none !important;
		background-color	: #f0f0f0 !important; 
		color				: #555555 !important;
		border-radius		: 8px !important;
		box-shadow			: 0 2px 15px rgba(0, 0, 0, 0.05) !important; 
		transition			: all 0.25s ease-in-out !important;
		cursor				: pointer;
		outline				: none;
		border				: none;
	}

	.link-cc i {
		font-size: 21px !important;
		color: #555555 !important;
		transition: color 0.25s ease-in-out !important;
	}
	.link-cc:hover {
		background-color		: #8B4513 !important;
		color					: #ffffff !important;
		box-shadow				: 0 0px 0px rgba(139, 69, 19, 0.25) !important;
		transform				: translateY(-1px) !important;
	}

	.link-cc:hover i {
		color					: #ffffff !important; 
	}
	
	/* --- Kích hoạt màu riêng cho Icon --- */
	.link-cc i.btn-blue { color: #2196F3 !important; }
	.link-cc i.btn-orange { color: #FF9800 !important; }
	.link-cc i.btn-red { color: #F44336 !important; }
	.link-cc i.btn-green { color: #4CAF50 !important; }
	.link-cc i.btn-pink { color: #E91E63 !important; }
	.link-cc i.btn-indigo { color: #3F51B5 !important; }
	.link-cc i.btn-dark { color: #555555 !important; }
	

	.badge {
		background-color		: rgba(0, 0, 0, 0.1);
		color					: #666666;
		font-size				: 0.5em;
		padding					: 3px 3px;
		border-radius			: 8px !important;
		box-shadow		: 0 2px 15px rgba(0, 0, 0, 0.05) !important; 
		display					: inline-block;
		transition:				 all 0.25s ease-in-out !important;
	}



	.link-btn:hover .badge {
		background-color		: rgba(255, 255, 255, 0.25) !important;
		color					: #ffffff !important;
	}

	.link-btn:active {
		transform: translateY(0px) !important;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
	}

	

	.action-links {
		display: flex;
		gap: 10px;
		align-items: center;
		flex-wrap: wrap;
	}

	

	.btn-label {
		font-weight: 400;
		color: #8B4513;
		margin-right: 6px;
		font-size: 16px;
	}
	/* ==========================================================================
	 5. HÌNH ẢNH & THƯ VIỆN ALBUM (IMAGES & ALBUMS)
	 ========================================================================== */
	.TextHinhAnh {
		padding				: 0;
		margin				: 10px 2px 10px 10px; 
		text-align			: center;
	}

	.TextHinhAnh img {
		max-width: 100%;
		height: auto;
		border-radius: 8px;
		display: block;
		margin: 0 auto;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
		image-rendering: -webkit-optimize-contrast;
	}

	/* --- Khung ảnh thành viên nhỏ --- */
	.khung-anh-ca-nhan {
		float				: left;
		width				: 100%;
		max-width			: 150px;
		height				: auto;
		margin				: 10px 35px 20px 10px; 
		background-color	: #ffffff; 
		border-radius		: 12px;
		box-shadow			: 5px 5px 10px rgba(0, 0, 0, 0.4);
		overflow			: hidden;
	}

	.anh-thanh-vien {
		width			: 100%;
		height			: auto;
		display			: block;
		border-radius	: 12px;
		object-fit		: cover;
		box-shadow		: 5px 5px 15px rgba(0, 0, 0, 0.4);
	}

	/* --- Khung ảnh thành viên lớn --- */
	.khung-anh-ca-nhan-lon {
		width		: 100%;
		max-width	: 250px;
		height		: auto;
		overflow	: hidden;
		float		: right; 
		margin		: 9px 10px 10px 20px; 
		text-align	: center;
	}

	.anh-thanh-vien-lon {
		width			: 100%;
		height			: auto;
		display			: block;
		border-radius	: 20px;
		object-fit		: cover;
		border-radius	: 10px;
		box-shadow		: 5px 5px 15px rgba(0, 0, 0, 0.1);
	}

	
	/* --- Thư viện ảnh (Gallery) & Lightbox --- */
	.gallery {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		justify-content: center;
		margin-bottom: 20px;
	}

	.gallery img {
		width: 160px;
		height: 120px;
		object-fit: cover; 
		border: 1px solid #ddd;
		padding: 4px;
		box-shadow: 2px 2px 5px rgba(0,0,0,0.06);
		transition: transform 0.2s;
	}

	.gallery img:hover {
		transform: scale(1.05);
	}

	.gallery-item-container {
		position: relative;
		display: inline-block;
		margin: 8px;
		overflow: hidden;
		border-radius: 4px;
	}

	.image-menu {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0.75);
		color: white;
		padding: 6px 0;
		text-align: center;
		display: flex;
		justify-content: space-around;
		align-items: center;
		transform: translateY(100%);
		transition: transform 0.3s ease-in-out;
		box-sizing: border-box;
	}

	.gallery-item-container:hover .image-menu {
		transform: translateY(0);
	}

	.image-menu button {
		background: none;
		border: 1px solid #fff;
		color: white;
		padding: 4px 8px;
		cursor: pointer;
		border-radius: 3px;
	}

	.lightbox-overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.85);
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.lightbox-content {
		max-width: 90%;
		max-height: 90%;
		border: 3px solid #fff;
		cursor: pointer;
	}

	/* ==========================================================================
	 6. BẢNG BIỂU, BIỂU MẪU & Ô NHẬP LIỆU (FORMS & INPUTS)
	 ========================================================================== */
	

	.form-container {
		width				: 100%;
		max-width			: 950px; 
		margin				: 20px auto; 
		padding				: 25px;
		background-color	: #ffffff; 
	}

	.form-group {
		margin				: 10px; 
		text-align			: left;
		font-weight			: 300;
		color				: #363636 !important; 		
	}
	
	.form-group label {
		display				: inline-block;
		color				: #363636;
		font-size			: 0.9em;
		margin-bottom		: 8px; 
	}

	.form-note {
		font-size			: 14px;
		color				: #363636;
		font-style			: italic;
		font-weight			: 300;
		display				: inline-block;
		margin-left			: 6px; 
	}

	.form-control {
		width				: 100%; 
		height				: 42px; 
		padding				: 8px 12px;
		font-family			: inherit; /* Ép lấy phông chữ từ thẻ body */
		font-size			: 1em;
		color				: #363636; 
		background-color	: #ffffff;
		border				: 1px solid #b8a085; 
		border-radius		: 4px; 
		box-sizing			: border-box;
		transition			: border-color 0.2s ease, box-shadow 0.2s ease;
	}

	.form-control:focus {
		border-color: #363636; 
		outline: none;
		box-shadow: 0 0 5px rgba(139, 69, 19, 0.25); 
	}

	select.form-control {
		padding: 6px 8px;
		cursor: pointer;
	}

	textarea.form-control {
		height: auto !important; 
		min-height: 100px; 
		resize: vertical; 
	}

	.textbox {
		padding: 4px 5px;
		font-size: 19px;
		height: 31px;
		color: #363636;
		text-align: left;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.input-area {
		height: 100px;
		text-align: left;
		padding: 4px 5px;
		color: #363636;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.Dangnhap, .maketchinh {
		padding: 6px 6px;
		font-size: 19px;
		color: #363636;
		background: #eaeaea;
	}

	.form-actions {
		margin-top: 25px;
		padding-top: 15px;
		border-top: 1px dashed #e8e5da; 
		display: flex;
		align-items: center;
		justify-content: flex-start; 
		gap: 12px; 
	}

		/* Áp dụng riêng cho thẻ input file có class link-btn */
	input[type="file"].link-btn {
		width		: auto;
		color		: transparent; /* Giấu hoàn toàn chữ mặc định của trình duyệt */
		background	: transparent;
		border		: none;
		padding		: 0;
		cursor		: pointer;
	}

	/* Định dạng riêng cho nút bấm bên trong */
	input[type="file"].link-btn::-webkit-file-upload-button {
		background-color	: #ffffff;
		color				: #000000;
		border				: none;
		padding: 10px 20px;
		border-radius: 4px;
		font-size: 19px;
		cursor: pointer;
		transition: background 0.2s;
	}

	input[type="file"].link-btn::-webkit-file-upload-button:hover {
		background-color: #8B4513; /* Đổi màu khi rê chuột */
	}


	/* ==========================================================================
	 7. PHÂN TRANG & MENU CHÍNH (PAGINATION & MAIN MENU)
	 ========================================================================== */
	.TextPage {
		display				: flex;
		align-items			: center;
		justify-content		: center;
		gap					: 6px; 
		margin				: 10px 0;
		flex-wrap			: wrap;
	}

	.TextPage .page-arrow {
		background-color	: #363636;
		color				: #D2B48C !important;
		display				: inline-flex;
		align-items			: center;
		justify-content		: center;
		width				: 30px; 
		height				: 30px;
		border-radius		: 2px;
		text-decoration		: none;
		transition			: all 0.2s ease;
		box-shadow			: 0 2px 4px rgba(0,0,0,0.1);
		font-size			: 0.85em;
	}

	.TextPage a.page-arrow:hover {
		background-color	: #A0522D; 
		color				: #ffffff !important;
		box-shadow			: 0 4px 6px rgba(0,0,0,0.15);
	}

	.TextPage .page-arrow.disabled {
		background-color	: #f2f2f2;
		color				: #cccccc !important;
		box-shadow			: none;
		cursor				: not-allowed;
	}

	#page-selector {
		background-color	: #ffffff;
		color				: #363636;
		border				: 2px solid #363636;
		border-radius		: 4px;
		height				: 34px; 
		padding				: 0 6px;
		font-weight			: 400;
		cursor				: pointer;
		outline				: none;
	}

	.pagination {
		margin-top: 20px;
		text-align: center;
	}

	.pagination a, .pagination strong {
		padding: 5px 10px;
		margin: 0 3px;
		border: 1px solid #b8a085;
		text-decoration: none;
		color: #363636;
		border-radius: 3px;
	}

	.pagination strong {
		background-color: #FFE4B5;
		color: #363636;
		font-weight: bold;
	}

	.TextMenu {
		padding: 4px 5px;
		border-top: 1px solid #363636;
		border-bottom: 2px solid #363636; 
		background: #FFE4B5;
		color: #363636;
		text-align: center;
		font-weight: bold;
	}

	/* ==========================================================================
	 8. GIAO DIỆN HEADER TRÊN MÁY TÍNH (DESKTOP HEADER)
	 ========================================================================== */
	.vatican-header {
		position			: fixed !important; 
		top					: 0;
		left				: 0;
		width				: 100%;
		z-index				: 99999; 
	}

	.header-container {
		/* --- BẢNG MÀU PHẬT GIÁO TÍCH HỢP --- */
		background-color: #4A5D23; /* Màu Xanh Rêu (Vẫn giữ làm màu nền phụ) */
		color: #F7F4EA; /* Đổi sang Kem Sáng để chữ nổi bật trên nền tối */
		background-image: url('images/hoasen.jpg'); /* ĐƯỜNG DẪN ĐẾN ẢNH CỦA BẠN */
		
		/* --- THAY ĐỔI Ở ĐÂY ĐỂ ẢNH LẶP LẠI --- */
		background-repeat: repeat; /* Cho phép ảnh lặp lại */
		background-size: auto; /* Giữ nguyên kích thước gốc để ảnh lặp lại tự nhiên */
		/* Nếu ảnh quá to hoặc quá nhỏ, bạn có thể chỉnh lại bằng pixel, ví dụ: background-size: 50px; */
		background-position: center; /* Căn giữa ảnh */
		height: 70px;
		width: 100%; 
		margin: 10px 0px 0px 0px;
		border-radius: 0; 
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30px; 
		box-shadow: 0 2px 10px rgba(0,0,0,0.15);
		position: relative;
		box-sizing: border-box; 
		border-bottom: 3px solid #C0933F; /* Thêm viền Vàng Đồng ở dưới cho trang nghiêm */
	}

	.header-left {
		font				: normal 600 1.5em "Cormorant", sans-serif;
		color				: #F7F4EA; 
		display				: flex;
		align-items			: center;
		gap					: 8px;
	}

	.header-left .the-text {
		font				: italic 400 0.9em "Cormorant", sans-serif;
		color				: #F7F4EA; 
	}

	.header-left .holy-text {
		font-weight			: 500;
		letter-spacing		: 1px;
	}

	.header-center {
		position			: absolute !important;
		left				: 59% !important;
		top					: 70% !important;
		transform			: translate(-50%, -50%) !important;
		z-index				: 10;
		display				: flex !important;
		justify-content		: center !important;
		align-items			: center !important;
	}

	.logo-circle {
		background-color	: #FFFFFF;
		width				: 95px; 
		height				: 95px;
		border-radius		: 50%;
		display				: flex;
		justify-content		: center;
		align-items			: center;
		box-shadow			: 0 3px 6px rgba(0,0,0,0.2);
		overflow			: hidden;
		border				: 2px solid #D2B48C;
	}

	.logo-circle a {
		display: block !important;
		width: 95px !important;
		height: 95px !important;
		border-radius: 50%;
		overflow: hidden;
	}

	.logo-circle img {
		width: 100% !important;
		height: 100% !important;
		border-radius: 50%;
		object-fit: cover !important;
		display: block; 
	}

	.header-right {
		display: flex;
		gap: 15px;
		font: italic 400 0.9em "Cormorant", sans-serif;
		align-items: center;
	}

	.icon-btn {
		background: none;
		border: none;
		cursor: pointer;
		color: #D2B48C; 
		padding: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s;
	}

	.icon-btn:hover {
		opacity: 0.8;
		color: #FFFFFF;
	}

	.user-name-desktop {
		display: inline-block !important; 
		font-family: "Cormorant", sans-serif;
		font-size: 1.1em;
		color: #F5EBDC; 
		margin-right: 10px;
	}

	.user-name-mobile {
		display: none !important; 
	}
	

	/* --- Khu vực Menu Dropdown & Định dạng Icon --- */
	.menu-wrapper {
		position: relative;
		display: inline-block;
	}

	.dropdown-content { /* Hiển thị menu bên phải*/
		display				: none;
		position			: absolute;
		right				: 0;
		top					: 100%;
		background-color	: #D2B48C;
		min-width			: 220px;
		box-shadow			: 0px 8px 16px 0px rgba(0,0,0,0.3);
		z-index				: 99999;
		border				: 1px solid #363636;
		border-radius		: 4px;
		margin-top			: 10px;
		max-height			: 60vh;
		overflow-y			: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	.dropdown-content a {
		color				: #3B210B !important; 
		font-style			: normal !important;
		padding				: 12px 16px; 
		text-decoration		: none !important;
		display				: flex !important;
		align-items			: center !important;
		gap					: 10px !important; 
		font-family			: Arial, Helvetica, sans-serif;
		font-size			: 0.9em; 
		font-weight			: 400;
		text-align			: left;
		border-bottom		: 1px solid rgba(139, 69, 19, 0.2);
		transition			: all 0.2s ease;
	}

	.dropdown-content a:last-child {
		border-bottom: none;
	}

	.dropdown-content a:hover {
		background-color: #363636 !important;
		color: #FFE4B5 !important; 
	}

	.dropdown-content.show {
		display: block !important;
		animation: fadeInMenu 0.2s ease-out;
	}

	@keyframes fadeInMenu {
		from { opacity: 0; transform: translateY(-10px); }
		to { opacity: 1; transform: translateY(0); }
	}

	.dropdown-content a::before {
		font-family: "Font Awesome 6 Free" !important; 
		font-weight: 900 !important; 
		font-size: 14px !important;
		color: #363636 !important; 
		display: inline-block;
		width: 20px; 
		text-align: center;
		transition: color 0.2s;
		content: "\f105";
	}

	.dropdown-content a:hover::before {
		color: #FFE4B5 !important;
	}

	.dropdown-content a[href="index.php"]::before,
	.dropdown-content a[href="./"]::before { content: "\f015"; }
	.dropdown-content a[href*="PhaDo"]::before { content: "\f0e8"; }
	.dropdown-content a[href*="PhaHe"]::before { content: "\f1bb"; }
	.dropdown-content a[href*="HonNhan"]::before { content: "\f70b"; }
	.dropdown-content a[href*="KhaiTu"]::before { content: "\f647"; }
	.dropdown-content a[href*="SapXep"]::before { content: "\f550"; }
	.dropdown-content a[href*="ThoiGian"]::before { content: "\f133"; }
	.dropdown-content a[href*="hinhanh"]::before { content: "\f03e"; }
	.dropdown-content a[href*="PhaKy"]::before { content: "\f1da"; }
	.dropdown-content a[href*="XuatBan"]::before { content: "\f518"; }
	.dropdown-content a[href*="NhacNho"]::before { content: "\f4ba"; }
	.dropdown-content a[href*="CauHinh"]::before { content: "\f085"; }
	.dropdown-content a[href*="Admin"]::before { content: "\f3ed"; }
	.dropdown-content a[href*="DangNhap"]::before { content: "\f551"; }
	.dropdown-content a[href*="ThongKe"]::before { content: "\f551"; }
	

	/* ==========================================================================
	 9. KHỐI PHỤC VỤ IN ẤN PHẢ HỆ (PRINTING SECTIONS)
	 ========================================================================== */
	.bodyingiapha {
		font-family	: "Times New Roman", Garamond;
		font-size	: 21px;
		max-width	: 500px;
		margin		: 0px auto;
		padding		: 0px;
		color		: #222222;
		text-indent	: 0px;
		font-weight	: 400; 
		text-align: justify;      /* Căn đều hai bên giúp khung văn bản vuông vắn, giống trang sách */
		hyphens: auto;            /* Hỗ trợ xuống dòng đẹp hơn nếu có từ dài (cho trình duyệt hỗ trợ) */
		letter-spacing: 0.1px;    /* Tăng một chút khoảng cách chữ để font Times New Roman bớt "bí" */
	}
	.Whead {
		padding		: 6px 2px;
		font-size	: 30px;
		font-weight	: bold;
		color		: #cc0000;
		text-align	: center;
	}

	.Wheadchuong {
		font-size	: 22px;
		padding		: 6px 2px;
		font-weight	: bold;
		color		: #660000;
		text-align	: center;
	}

	.Wbody, .Wbodynoidung { 
		
		padding		: 10px 0px;
		margin		: 0px;
		color		: #363636; 
		text-indent	: 42px;
		text-align	: justify;
	}

	.Wbodynospace { 
		padding		: 10px 0px;
		margin		: 2px;
		color		: #363636; 
		text-indent	: 2px;
		text-align	: justify;
	}

	.Wbodytree { 
		font-family	: "Times New Roman", Garamond;
		font-size	: 19px;
		padding		: 0 0 0 5px; 
		margin		: 0px;
		color		: #222222;
		text-indent	: 0px;
		text-align	: left;
	}

	.Wbodyc {
		padding		: 6px 0px;
		font-size	: 22px;
		text-indent	: 0px;
		color		: #660000;
		text-align: center;
	}

	.Wbodyb { 
		padding		: 12px 0px 0px 0px;
		text-indent	: 42px;
		font-weight	: bold;
		color		: #000080;
		text-align	: justify;
	}

	.Wbodybi { 
		padding		: 6px 0px 0px 0px;
		margin		: 0px;
		text-indent	: 42px;
		font-weight	: bold;
		font-style	: italic;
		color		: #660000;
		text-align	: justify;
	}

	.Wbodyhinhanh { 
		padding		: 0px 0px 0px 0px;
		font-size	: 10px;
		margin		: 0px;
		color		: #222222;
		text-indent	: 2px;
		line-height	: 1.0;
		text-align	: center;
	}

	/* --- Chân trang (Footer) --- */
	.Textbottom {
		padding		: 16px;
		font-size	: 16px;
		color		: #F8F9FA;
		text-align	: center;
		/* Buộc không có màu nền (trong suốt tuyệt đối) */
		background	: none !important;
		background-color: transparent !important;
	}

	/* ==========================================================================
	 10. TOÀN BỘ MÃ HIỂN THỊ TRÊN DI ĐỘNG (MOBILE RESPONSIVE - @media max-width: 768px)
	 ========================================================================== */
	@media (max-width: 768px) {
		#wrapper, .body1 {
			padding-top			: 75px !important;
		}
		
		.body, .TextList, .TextListIcon, .Wbody, .Wbodynoidung, .Wbodytree, .Wbodynospace {
			font-size			: 22px !important;
			font-weight			: 400 !important; 
			color				: #363636 !important;
		}
		.bodyingiapha {
			font-family			: "Times New Roman", Garamond;
			font-size			: 21px;
			max-width			: 95% !important;
			margin				: 0px auto;
			padding				: 0px;
			color				: #222222;
			text-indent			: 0px;
			font-weight			: 400; 
			text-align			: justify;      /* Căn đều hai bên giúp khung văn bản vuông vắn, giống trang sách */
			hyphens				: auto;            /* Hỗ trợ xuống dòng đẹp hơn nếu có từ dài (cho trình duyệt hỗ trợ) */
			letter-spacing		: 0.1px;    /* Tăng một chút khoảng cách chữ để font Times New Roman bớt "bí" */
		}
		.Wbody, .Wbodynoidung, .Wbodytree, .Wbodynospace {
			font-family		: "Times New Roman", Garamond !important; 
			font-size		: 22px !important;
			font-weight		: 500 !important; 
			color			: #222222 !important; 
		}
		.TextBODYform {
			padding: 6px;
		}
		.TextBODY {
			font-size: 22px !important; 
			text-align: left !important;
			font-weight: 300 !important;
			padding: 6px 6px 6px 6px !important;
			color: #8B8682 !important;
		}
		
		.TextHeading2 {
			font-size			: 24px !important;
			font-family:		: "Cormorant", sans-serif;
			padding				: 12px 6px 3px 6px;
			text-align			: center;
			color				: #800000;
			font-style			: normal;
		}
		.TextHeading2mb {
			display: none !important; 
		}
		
		.TextTitle { 
			font-size: 23px !important;
		}
		
		.TextTieude {
			font-size: 22px !important;
			text-align: left !important;
		}

		/* --- Bố cục Container và Cột Di động --- */
		.container {
			display: block !important;
			width: 100% !important;
		}

		.column-left {
			display: none !important;
		}

		.column-right {
			width: 100% !important;
			float: none !important;
			padding: 10px !important;
			border-right: none !important;
			background-color: #FFFAF0;
		}

		/* --- Cấu trúc lại Header di động (Logo bên trái, text ở giữa) --- */
		.vatican-header {
			position: fixed !important; 
			top: 0 !important; 
			height: 70px !important; 
			background-color: #1a1a1a !important; 
			border-bottom: 2px solid #363636;
			box-shadow: 0 2px 10px rgba(0,0,0,0.3);
			width: 100% !important;
		}

		.header-container {
			background-color: #363636 !important; 
			color: #D2B48C; 
			height: 70px !important;
			width: 100%; 
			display: flex !important;
			justify-content: space-between !important;
			align-items: center !important;
			padding: 0 12px !important;
			box-shadow: none !important;
			position: relative;
			margin: 0 !important;
			box-sizing: border-box; 
		}

		.header-center {
			position			: static !important; 
			transform			: none !important; 
			flex				: 0 0 auto !important;
			padding				: 25px 0 0 0px !important;
			order				: 1 !important; 
			display				: flex !important;
			justify-content		: center !important;
			align-items			: center !important;
			z-index				: 10;
		}
		
		.logo-circle {
			width				: 80px !important;
			height				: 80px !important;
			background-color	: #FFFFFF;
			border-radius		: 50%;
			display				: flex;
			justify-content		: center;
			align-items			: center;
			box-shadow			: 0 2px 6px rgba(0,0,0,0.3);
			overflow			: hidden;
			border				: 2px solid #D2B48C;
		}

		.logo-circle a {
			display: block !important;
			width: 70px !important;
			height: 70px !important;
			border-radius: 50%;
			overflow: hidden;
		}

		.logo-circle img {
			width: 70px !important;
			height: 70px !important;
			border-radius: 50%;
			object-fit: cover !important;
			display: block; 
		}

		.header-left {
			flex: 1 !important;
			order: 2 !important; 
			justify-content: center !important; 
			text-align: center !important;
			gap: 4px !important;
			font: normal 400 1.1em "Cormorant", sans-serif;
			white-space: nowrap;
			display: flex !important;
			align-items: center !important;
		}

		.header-left a, .header-left .the-text {
			display			: none !important;
		}

		.header-left .holy-text {
			font			: normal 800 1.2em "Cormorant", sans-serif !important;
			color			: #F5EBDC !important;  
			white-space		: nowrap !important;
		}

		.header-right {
			flex: 0 0 auto !important;
			max-width: 35% !important;
			order: 3 !important; 
			justify-content: flex-end !important;
			display: flex !important;
			align-items: center !important;
			color: #ffffff !important;
			gap: 8px !important;
		}

		.header-right .icon-btn {
			width			: 40px !important;
			height			: 40px !important;
			background-color: rgba(210, 180, 140, 0.15) !important; 
			border			: 1px solid rgba(210, 180, 140, 0.3) !important;
			border-radius	: 6px !important;
			color			: #D2B48C !important; 
		}
		
		.header-right .search-btn i {
			font-size: 18px !important;
		}

		.icon-btn.menu-btn svg {
			width: 24px !important;
			height: 24px !important;
			stroke: #D2B48C !important;
		}

		.header-right .user-name-desktop {
			display: none !important; 
		}
		
		.header-right .user-name-mobile {
			display: inline-block !important; 
			font-family: Arial, sans-serif !important;
			font-size: 14px !important;
			color: #ffffff !important;
		}

		.dropdown-content {
			position: absolute !important;
			right: 10px !important;
			top: 65px !important;
			min-width: 180px !important;
		}
			/*
		.khung-anh-ca-nhan, .anh-thanh-vien {
			float			: none !important; 
			width			: 180px !important; 
			height			: auto !important; 
			max-width		: 100% !important; 
			margin			: 30px auto !important; 
			overflow		: hidden !important; 
		}
		*/
		/* --- Khung ảnh thành viên trên di động --- */
		.khung-anh-ca-nhan {
			float				: none !important; 
			width				: 150px !important;
			max-width			: 100% !important; 
			height				: auto !important;
			margin				: 15px auto;
			background-color	: #ffffff; 
			border-radius		: 12px;
			box-shadow			: 5px 5px 10px rgba(0, 0, 0, 0.4);
			overflow			: hidden !important;
		}

		.anh-thanh-vien {
			float				: none !important;
			display				: block;
			border-radius		: 12px;
			object-fit			: cover;
			overflow			: hidden !important;
		}

		/* --- Khung ảnh thành viên lớn (Nằm bên phải) --- */
		.khung-anh-ca-nhan-lon {
			width				: 100%;
			max-width			: 250px;
			height				: auto;
			overflow			: hidden;
			float				: none; 
			margin				: 15px auto;
		}

		.anh-thanh-vien-lon {
			width				: 100%; /* Đổi từ 250px thành 100% để tự động khít với khung cha khi responsive */
			height				: auto;
			display				: block;
			object-fit			: cover;
			border-radius		: 15px; 
			box-shadow			: 5px 5px 15px rgba(0, 0, 0, 0.15); 
		}
		
		.dong-hon-nhan {
			flex-direction: column;      /* Xếp tiêu đề ở dòng trên, cụm nút ở dòng dưới */
			align-items: stretch;        /* Giúp cụm nút bên dưới có thể căn phải chuẩn xác */
			gap: 10px;                   /* Tạo khoảng cách thông thoáng giữa chữ và hàng nút */
		}

		.dong-hon-nhan .TextRight {
			width: 100%;                 /* Cho phép cụm nút chiếm trọn chiều rộng hàng dưới */
			justify-content: flex-end;   /* Ép các nút bấm luôn luôn nằm sát lề bên PHẢI */
		}
		.form-group label {
			font-size		: 20px;
			display			: inline-block;
			margin-bottom	: 8px;
		}

		.form-control, 
		.form-control-short, 
		.form-control-medium {
			width: 100% !important;
			max-width: 100% !important;
			height: 48px;
			font-size: 19px;
		}

		textarea.form-control {
			min-height: 120px;
		}

		.form-actions {
			flex-direction: row;
			justify-content: space-between; 
			gap: 12px;
		}

		.form-actions .link-btn, 
		.form-actions input[type="submit"] {
			flex: 1;
			padding: 8px 8px !important;
			font-size: 18px !important;
			text-align: center;
			justify-content: center;
		}
		
		.dong-hon-nhan {
			display: flex;
			flex-direction: column; /* Đẩy cụm nút xuống dưới tên để giải phóng không gian chữ */
			gap: 10px;
		}

		

		

		
	}
	
	@media print {
		/* Ép font cho toàn bộ khối nội dung */
		.bodyingiapha, .Wbody, .Wbodynoidung, .Wbodytree, .Wbodynospace {
			font-family: "Times New Roman", Times, serif !important;
			font-size: 15pt !important;
			-webkit-print-color-adjust: exact !important;
			print-color-adjust: exact !important;
		}

		/* Ép đặc biệt cho các thẻ bảng */
		table, th, td, tr {
			font-family: "Times New Roman", Times, serif !important;
			color: #000000 !important;
		}
	}
	
	
	/* 1. Khung chứa thông báo chung */
    .notification {
      padding			: 16px 10px;
      font-family		: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size			: 18px;
      line-height		: 1.5;
      margin-bottom		: 15px;
      display			: block;
      align-items		: center;
      box-shadow		: 0 4px 6px rgba(0, 0, 0, 0.05);
      transition		: all 0.3s ease;
    }

    /* 2. Các trạng thái màu sắc khác nhau */
    
    /* Thành công (Success) */
    .notification.success {
      background-color: #ecfdf5;
      color: #065f46;
      border-left-color: #10b981;
    }

    /* Cảnh báo (Warning) */
    .notification.warning {
      background-color: #fffbeb;
      color: #92400e;
      border-left-color: #f59e0b;
    }

    /* Lỗi (Error/Danger) */
    .notification.error {
      background-color: #fef2f2;
      color: #991b1b;
      border-left-color: #ef4444;
    }

    /* Thông tin (Info) */
    .notification.info {
      background-color: #eff6ff;
      color: #1e40af;
      border-left-color: #3b82f6;
	  display: block;
    }

    /* Thêm một chút hiệu ứng hover cho sinh động */
    .notification:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    }