/* ==========================================================================
	 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: Georgia, Garamond, serif;
		font-size: 19px;
		max-width: 100%;
		margin: 0px auto;
		padding: 0px;
		color: #222222;
		text-indent: 0px;
		line-height: 1.5;
		text-align: justify;
		font-weight: 400; 
	}
	
	
	.body1 {
		font-family: Times New Roman, Georgia, Garamond;
		font-size: 18px;
		max-width: 500;
		margin: 0px auto;
		padding: 0px;
		color: #222222;
		text-indent: 0px;
		line-height: 1.0;
		text-align: center;
		font-weight: 400; 
	}

	strong {
		font-weight: normal; 
	}

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

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

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

	/* ==========================================================================
	 2. TIÊU ĐỀ & VĂN BẢN (HEADINGS & TEXT)
	 ========================================================================== */
	.TextHeading {
		font: normal 400 40px "Paytone One", sans-serif;
		padding: 12px 5px 3px 5px;
		line-height: 1.2;
		color: #800000;
		text-align: center;
		text-transform: uppercase;
	}
		
	.TextHeading2 {
		font: normal 500 1em "Cormorant", sans-serif;
		font-optical-sizing: auto;
		padding: 12px 6px 3px 6px;
		line-height: 1.5;
		text-align: center;
		color: #800000;
		font-style: normal;
	}

	.TextTitle { 
		font-family: "Playfair Display SC", serif; 
		font-size: 25px;
		padding: 6px 6px 6px 10px;
		text-align: left;
		background: #A0522D;
		font-weight: 500;
		color: #FDF5E6;
		border-left: 3px solid #8B4513;
	}

	.TextTieude {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 23px;
		padding: 10px 6px 10px 10px;
		text-align: left;
		background: #FFE4B5;
		color: #8B4513;
		font-weight: 600;
		-webkit-text-size-adjust: none !important;
		text-size-adjust: none !important;
	}
	.TextTieude2 {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 20px;
		padding: 10px 6px 10px 10px;
		text-align: left;
		background: #FFE4B5;
		color: #8B4513;
		font-weight: 600;
		-webkit-text-size-adjust: none !important;
		text-size-adjust: none !important;
	}

	.TextBODY {
		font-family: Arial, Helvetica, sans-serif !important;
		font-size: 18px !important; 
		text-align: justify; 
		font-weight: 400; 
		padding: 5px 10px;
		color: #8B4513 !important; 
		line-height: 1.8 !important; 
	}

	.TextLEFT {
		font-family: Arial, Helvetica, sans-serif; 
		font-size: 0.9em;
		font-weight: 300;
		text-align: left;
		padding: 6px 10px 10px 10px;
		color: #5C2E0B !important;
		line-height: 1.6;
	}

	.TextList {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 19px;
		text-align: left;
		padding: 6px 5px 6px 6px;
		margin: 5px;
		line-height: 1.6;
		color: #8B4513 !important; 
	}

	.TextHonnhan {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 18px;
		text-align: left !important;
		padding: 6px 36px 6px 36px;
		margin: 5px;
		font-weight: 300;
		line-height: 1.6;
		color: #8B4513 !important;
	}

	.TextLoiChua {
		font-family		: Arial, Helvetica, sans-serif !important; 
		font-weight		: 100 !important;
		padding			: 10px 6px;
		font-size		: 0.9em;
		color			: #8B4513;
		text-align		: center;
		font-style		: italic;
		line-height		: 1.5;
	}

	/* ==========================================================================
	 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: 10px;
		background-color: #f7f5f0;
		border-right: 1px solid #e8e5da;
	}

	.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;
	}

	ul.danh-sach-chuan li {
		font-family: Arial, Helvetica, sans-serif !important;
		list-style-type: disc !important;
		margin: 6px 3px !important;
		position: static !important;
		font-weight: 200 !important;
		color: #8B8682 !important;
		text-align: left;
		line-height: 1.6 !important;
	}

	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: #8B4513;
		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 !important;
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: center !important;
		width: 100% !important;
		padding: 8px 5px !important;
		border-bottom: 1px dashed #e8e5da !important;
		box-sizing: border-box !important;
		clear: none !important; 
	}

	.dong-hon-nhan .TextHonnhan {
		flex: 1 !important;
		color: #222222;
		padding: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
	}

	.dong-hon-nhan .TextHonnhan div, 
	.dong-hon-nhan .TextHonnhan p, 
	.dong-hon-nhan .TextHonnhan a, 
	.dong-hon-nhan .TextHonnhan span {
		display: inline !important; 
		float: none !important; 
		clear: none !important; 
		margin: 0 !important;
		padding: 0 4px !important; 
		width: auto !important; 
		height: auto !important;
	}

	.dong-hon-nhan .action-links-container {
		flex: 0 0 auto !important; 
		display: flex !important;
		flex-direction: row !important; 
		justify-content: flex-end !important;
		align-items: center !important;
		gap: 6px !important;
		padding: 0 !important;
		margin: 0 !important;
		width: auto !important;
	}

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

	.link-btn i {
		font-size: 20px !important;
		color: #555555 !important;
		transition: color 0.25s ease-in-out !important;
	}

	.link-btn .badge {
		background-color: rgba(0, 0, 0, 0.06);
		color: #666666;
		font-size: 0.4em;
		padding: 1px 5px;
		border-radius: 10px;
		display: inline-block;
		transition: all 0.25s ease-in-out !important;
	}

	.link-btn:hover {
		background-color: #8B4513 !important;
		color: #ffffff !important;
		box-shadow: 0 4px 10px rgba(139, 69, 19, 0.25) !important;
		transform: translateY(-1px) !important;
	}

	.link-btn:hover i {
		color: #ffffff !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;
	}

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

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

	.action-links-container {
		display: flex !important;
		justify-content: flex-end !important; 
		gap: 2px !important; 
		align-items: center;
		flex-wrap: wrap; 
		padding: 2px 6px !important;
		margin: 2px 0;
		width: 100%; 
	}

	.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;
		text-align: center;
	}

	.TextHinhAnh img {
		max-width: 100%;
		height: auto;
		border-radius: 4px;
	}

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

	.anh-thanh-vien {
		width: 100%;
		height: auto;
		display: block;
		border-radius: 12px;
		object-fit: cover;
	}

	.hop-thanh-vien::after {
		content: "";
		display: table;
		clear: both;
	}

	/* --- Khung ảnh thành viên lớn --- */
	.khung-anh-ca-nhan-lon {
		float: left;
		width: 100%;
		max-width: 320px;
		height: auto;
		margin: 10px 5px 20px 0; 
		background-color: #fff; 
		border-radius: 6px;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}

	.anh-thanh-vien-lon {
		width: 100%;
		height: auto;
		display: block;
		border-radius: 12px;
		object-fit: cover;
	}

	.hop-thanh-vien-lon::after {
		content: "";
		display: table;
		clear: both;
	}

	/* --- 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;
		font-size: 13px;
		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)
	 ========================================================================== */
	.TextBODYform {
		font-family: Arial, Helvetica, sans-serif !important;
		font-size: 18px; 
		text-align: justify;
		color: #8B4513 !important; 
		width: 100%;
		max-width: 950px; 
		margin: 5px auto; 
		padding: 12px;
		background-color: #ffffff; 
		border: 1px solid #e8e5da; 
		border-radius: 8px; 
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); 
		box-sizing: border-box;
	}

	.form-container {
		font-family: Arial, Helvetica, sans-serif !important;
		width: 100%;
		max-width: 950px; 
		margin: 20px auto; 
		padding: 25px;
		background-color: #ffffff; 
		border: 1px solid #e8e5da; 
		border-radius: 8px; 
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); 
		box-sizing: border-box;
	}

	.form-group {
		font-family: Arial, Helvetica, sans-serif !important;
		font-size: 18px; 
		margin: 10px; 
		text-align: left;
		font-weight: 300;
		color: #8B4513 !important; 		
	}

	.form-group label {
		display: block;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 18px;
		font-weight: 300;
		color: #8B4513;
		margin-bottom: 8px; 
	}

	.form-note {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		font-weight: normal;
		color: #757575;
		font-style: italic;
		display: inline-block;
		margin-left: 6px; 
	}

	.form-control {
		width: 100%; 
		height: 42px; 
		padding: 8px 12px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 18px;
		color: #222222; 
		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: #8B4513; 
		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; 
		line-height: 1.5;
		resize: vertical; 
	}

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

	.Textbot {
		padding: 0 4px 0 5px;
		font-size: 19px;
		height: 26px;
		color: #421e02;
		text-align: left;
	}

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

	.Dangnhap, .maketchinh {
		padding: 6px 6px;
		font-size: 19px;
		color: #0B0B3B;
		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; 
	}

	/* --- Xử lý riêng cho input type="file" --- */
	input[type="file"].form-control {
		padding: 6px 10px;
		display: inline-flex;
		align-items: center;
		cursor: pointer;
		border: none !important;
		box-shadow: none !important;
		background-color: transparent !important;
		padding-left: 0 !important;
		color: transparent !important;
		position: relative;
	}

	input[type="file"].form-control::-webkit-file-upload-button {
		background-color: #8B4513;
		color: #ffffff;
		border: none;
		padding: 4px 12px;
		margin-right: 10px;
		border-radius: 3px;
		font-family: Arial, sans-serif;
		font-size: 14px;
		cursor: pointer;
		transition: background 0.2s;
	}

	input[type="file"].form-control::-webkit-file-upload-button:hover {
		background-color: #800000;
	}

	input[type="file"].form-control::after {
		content: "Chưa chọn ảnh";
		color: #757575;
		font-family: Arial, sans-serif;
		font-size: 16px;
		font-style: italic;
		position: absolute;
		left: 100px;
		pointer-events: none;
	}

	/* --- Form Upload Tư Liệu --- */
	.upload-form {
		margin: 20px auto;
		padding: 20px;
		border: 1px solid #e8e5da;
		border-radius: 8px;
		background-color: #ffffff;
		max-width: 500px;
		box-shadow: 0 4px 8px rgba(0,0,0,0.05);
	}

	.upload-form h2 {
		text-align: center;
		color: #8B4513;
		margin-bottom: 20px;
		font-size: 15px;
	}

	.upload-form input[type="file"] {
		display: block;
		margin: 10px auto;
		padding: 8px;
		border: 1px solid #ddd;
		border-radius: 4px;
		width: 100%;
	}

	.upload-form input[type="submit"] {
		display: block;
		margin: 20px auto 0;
		padding: 8px 20px;
		background-color: #8B4513; 
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 15px;
		font-weight: bold;
		width: 100%;
		transition: background-color 0.3s;
	}

	.upload-form input[type="submit"]:hover {
		background-color: #660000;
	}

	/* ==========================================================================
	 7. PHÂN TRANG & MENU CHÍNH (PAGINATION & MAIN MENU)
	 ========================================================================== */
	.TextPage {
		font-family: Arial, Helvetica, sans-serif !important;
		font-size: 19px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px; 
		margin: 25px 0;
		flex-wrap: wrap;
	}

	.TextPage .page-label {
		color: #4A2306;
		font-weight: 400;
		margin-right: 4px;
	}

	.TextPage .page-arrow {
		background-color: #8B4513;
		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: #8B4513;
		border: 2px solid #8B4513;
		border-radius: 4px;
		height: 34px; 
		padding: 0 6px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 0.95em;
		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: #8B4513;
		border-radius: 3px;
	}

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

	.TextMenu {
		font-family: Arial;
		font-size: 19px;
		padding: 4px 5px;
		border-top: 1px solid #8B4513;
		border-bottom: 2px solid #8B4513; 
		background: #FFE4B5;
		color: #8B4513;
		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 {
		background-color: #8B4513; 
		color: #D2B48C; 
		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; 
	}

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

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

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

	.header-center {
		position: absolute !important;
		left: 50% !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 {
		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 #8B4513;
		border-radius: 4px;
		margin-top: 10px;
		max-height: 60vh; 
		overflow-y: auto; 
		-webkit-overflow-scrolling: touch; 
		overscroll-behavior: contain;
	}

	.dropdown-content a {
		font-family: Arial, Helvetica, sans-serif !important;
		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-size: 15px; 
		font-weight: 400;
		text-align: left;
		border-bottom: 1px solid rgba(139, 69, 19, 0.2);
		transition: background 0.2s, color 0.2s;
	}

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

	.dropdown-content a:hover {
		background-color: #8B4513 !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: #8B4513 !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*="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)
	 ========================================================================== */
	.Whead { 
		padding: 6px 2px;
		font-size: 22px;
		font-weight: bold;
		color: #cc0000;
		text-align: center;
	}

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

	.Wbody, .Wbodynoidung { 
		padding: 4px 2px;
		margin: 0px;
		font-size: 19px;
		color: #222222;
		line-height: 1.5;
		text-indent: 32px;
		text-align: justify;
	}

	.Wbodynospace { 
		padding: 2px;
		margin: 2px;
		font-size: 19px;
		color: #222222;
		line-height: 1.5;
		text-indent: 2px;
		text-align: justify;
	}

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

	.Wbodyc {
		padding: 6px 2px;
		font-size: 19px;
		text-indent: 0px;
		color: #660000;
		line-height: 1.5;
		text-align: center;
	}

	.Wbodyb { 
		padding: 12px 2px 0px 2px;
		font-size: 19px;
		margin: 0px;
		text-indent: 32px;
		line-height: 1.5;
		font-weight: bold;
		color: #000080;
		text-align: justify;
	}

	.Wbodybi { 
		padding: 6px 2px 0px 2px;
		font-size: 19px;
		margin: 0px;
		text-indent: 32px;
		line-height: 1.5;
		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 {
		font-family	: Arial, Helvetica, sans-serif !important;
		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-family: Arial, Helvetica, sans-serif !important; 
			font-size: 22px !important;
			font-weight: 500 !important; 
			line-height: 1.6 !important; 
			color: #222222 !important; 
		}
		
		.TextBODY {
			font-family: Arial, Helvetica, sans-serif !important; 
			font-size: 22px !important; 
			text-align: left !important;
			font-weight: 300 !important;
			padding: 6px 6px 6px 6px !important;
			color: #8B8682 !important;
			line-height: 1.8 !important;
		}
		
		.TextHeading2 {
			font-size: 19px !important;
			font: normal 500 1em "Cormorant", sans-serif;
			padding: 12px 6px 3px 6px;
			line-height: 1.5;
			text-align: center;
			color: #800000;
			font-style: normal;
		}
		
		.TextTitle { 
			font-size: 23px !important;
		}

		.TextTieude {
			font-size: 19px !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 #8B4513;
			box-shadow: 0 2px 10px rgba(0,0,0,0.3);
			width: 100% !important;
		}

		.header-container {
			background-color: #8B4513 !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 ảnh thành viên trên di động --- */
		.khung-anh-ca-nhan, .khung-anh-ca-nhan-lon {
			float: none !important; 
			width: 180px !important; 
			height: auto !important; 
			max-width: 100% !important; 
			margin: 30px auto !important; 
			overflow: hidden !important; 
			border-radius: 12px !important;
			box-shadow: 0 5px 15px rgba(139, 69, 19, 0.15) !important; 
		}

		.anh-thanh-vien, .anh-thanh-vien-lon {
			width: 180px !important;
			height: auto !important;
			display: block !important;
			object-fit: cover !important; 
		}

		/* --- Tối ưu hiển thị Biểu mẫu Form trên di động --- */
		.form-container {
			margin: 5px;
			padding: 15px 10px;
			border: none;
			box-shadow: none;
			background-color: transparent;
		}

		.form-group label {
			font-size: 20px;
			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;
    }

    .action-links-container {
        display: flex;
        flex-wrap: wrap;          /* QUAN TRỌNG: Tự động xuống dòng khi thiếu chỗ */
        justify-content: flex-end; /* Căn phải các nút */
        gap: 6px;                 /* Khoảng cách giữa các nút */
        width: 100%;              /* Để container co giãn tự do theo khung hiển thị */
    }

    /* Định cấu hình cho các nút con bên trong */
    .action-links-container > * {
        /* Mỗi nút chiếm tối thiểu 22% và tối đa là 50% khi bị ép xuống 2 dòng */
        flex: 1 1 calc(50% - 6px); 
        max-width: 50px;           /* Khống chế không cho nút bị giãn quá to */
        text-align: center;
        box-sizing: border-box;
        margin: 0 !important;
    }


		/* 4. Định hình chính xác kích thước cho từng nút bấm */
		.action-links-container > * {
			flex: 0 0 calc(50% - 3px) !important; /* Mỗi nút chiếm đúng 50% hàng */
			box-sizing: border-box;
			margin: 0 !important;      /* Loại bỏ margin thừa làm lệch hàng */
			padding: 6px 0 !important; /* Định kích thước vừa vặn ngón tay bấm */
			text-align: center;
		}
	}