@charset "utf-8";
/* CSS Document */
.metadata-ref {
    /* Ví dụ: Dùng font hệ thống để phân biệt với Hán văn */
    font-family: Arial, sans-serif !important; 
    font-size: 18px; /* Kích thước nhỏ hơn để gọn gàng */
    line-height: normal;
    color: #4D0101; /* Màu xám nhạt hơn */
	margin-right: 5px; }

	/* Định dạng chung cho container của popup */
.hv-popup-container {
    padding: 15px;
    font-family: Arial, sans-serif;
    color: #000;
    max-width: 700px;
    background-color: #ECE9E9;
    margin: 0 auto;
}

/* Phần hiển thị ký tự Hán Nôm lớn ở đầu */
.hv-char-display {
    font-size: 3rem; /* Kích thước chữ rất lớn */
    font-weight: bold;
    color: #8D0606; /* Màu đỏ đô nổi bật */
    text-align: center;
    border-bottom: 1px solid #3D3636;
    margin-bottom: 5px;
    line-height: 1.2;
}

/* Thanh chứa Âm Hán Việt và trạng thái tải */
.hv-am-han-viet {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2a6496; /* Màu xanh nổi bật */
    text-align: center;
    padding: 8px 0;
    margin-bottom: 20px;
}

.hv-am-han-viet span {
    font-weight:300;
    color: #000;
    font-size: 1.5rem;
}

/* Khung hiển thị chi tiết (Nghĩa) */
#hv-lookup-details {
    margin-top: 2px;
    padding: 2px;
    border: 0.2px solid #ddd;
    border-radius: 12px;
    background-color: #ECE9E9;
}

/* Tiêu đề cho các phần Nghĩa/Giải thích */
.hv-meaning-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #5C0303;
    margin-top: 2px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 2px;
}

/* Định nghĩa/Nội dung Ý Nghĩa */
.hv-definition {
    font-size: 1.5rem;
    line-height: 1.6;
    margin-top: 5px;
    white-space: pre-wrap; /* Giữ lại định dạng dòng mới từ nl2br() trong PHP */
}

/* Hiển thị lỗi */
.hv-error {
    color: #d9534f;
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
}

/* Tinh chỉnh cho FancyBox (Tùy chọn) */
.fancybox-content {
    border-radius: 12px !important;
    padding: 0 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}	

	

/*** Style mới
	
	/* ----------------------------------------------------------------
   CSS CHO NỘI DUNG TRA CỨU HÁN NÔM (HIỂN THỊ TRONG FANCYBOX)
   Các class này được sử dụng trong hv_lookup_details.php
---------------------------------------------------------------- */

/* CONTAINER CHUNG */
.hv-lookup-container {
    padding: 15px;
    background-color: #ECE9E9;
    font-family: Arial, sans-serif;
    color: #1D0505;
    max-width: 700px;
}

/* TIÊU ĐỀ NGUỒN (Tên Từ điển) */
.hv-source-title {
    /* Đảm bảo tiêu đề nguồn nổi bật */
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.hv-source-title h3 {
    font-size: 1.5rem; /* Kích thước chữ lớn */
    font-weight: bold;
    color: #500404; /* Màu đỏ nổi bật cho tên từ điển */
    margin: 0;
}

/* DÒNG HIỂN THỊ HÁN TỰ - ÂM HÁN VIỆT */
.hv-entry-line {
    font-size: 1.9rem;
    font-weight: normal;
    margin-top: 5px;
    margin-bottom: 5px;
}

.hv-entry-line strong {
    /* Ký tự Hán gốc */
    font-size: 1.8rem; 
    font-family: "Han Nom", "SimSun", "MingLiU", sans-serif; /* Đảm bảo hiển thị font Hán */
    font-weight: bold;
    color: #000000;
    margin-right: 5px;
}

/* KHỐI NỘI DUNG GIẢI NGHĨA */
.hv-definition-detail {
    font-size: 1.5rem;
    line-height: 1.6;
    padding-left: 15px; /* Thụt lề nhẹ để phân biệt với dòng tiêu đề */
    margin-bottom: 5px;
    border-left: 3px solid #f0f0f0;
}

/* Định dạng các thẻ HTML được chuyển đổi từ [b] và [i] trong hàm tudien() */
.hv-definition-detail em {
    font-style: italic;
    color: #555;
}

.hv-definition-detail b {
    font-weight: bold;
    color: #333;
}

/* KHOẢNG CÁCH GIỮA CÁC NGUỒN */
.hv-source-separator {
    height: 5px;
    border-bottom: 1px dashed #cccccc;
    margin: 20px 0;
}
/* cho hiển thị link popup */
/* Áp dụng cho thẻ <a> bọc ngoài */
a.han-viet-lookup {
    /* (Tùy chọn) Đảm bảo style mặc định ổn định */
    font-weight: normal; 
    text-decoration: none;
}

/* GHI ĐÈ các thuộc tính khi RÊ CHUỘT (QUAN TRỌNG) */
a.han-viet-lookup:hover {
    /* 1. Vô hiệu hóa thay đổi kích thước/độ đậm */
    font-size: 100% !important;   /* Đảm bảo kích thước không đổi */
    font-weight: normal !important; /* Đảm bảo chữ không đậm lên */
    
    /* 2. Loại bỏ gạch chân và biến đổi hình học */
    text-decoration: none;
    transform: none;
    
    /* 3. Chỉ thay đổi màu sắc để nổi bật */
    color: #0000FF; /* Ví dụ: Màu xanh để nổi bật */
}
    /* Nếu muốn hiệu ứng 3D nhẹ (không làm dịch chuyển layout) */
    /* text-shadow: 0 0 1px rgba(0,0,0,0.5); */ 

/* Tùy chỉnh Font và Màu chữ cho TOÀN BỘ nội dung bên trong Tooltip */
.tippy-box .tippy-content {
    /* 1. FONT CHỮ */
    font-family: 'Arial', sans-serif; /* Đảm bảo font chữ dễ đọc */
    font-size: 14px;                   /* Kích thước chữ bên trong Tooltip */
    line-height: 1.5;  	/* Khoảng cách dòng */
	font-weight:100;

    /* 2. MÀU CHỮ */
    color: #4B0503 !important;
    padding: 8px 12px; /* Thêm padding (khoảng đệm) để nội dung không sát lề */
}
/* Tùy chỉnh KHUNG (BOX) của Tooltip */
.tippy-box {
    /* 1. NỀN và BÓNG */
    background-color: #ece9e9; /* Màu nền nhẹ (ví dụ: vàng nhạt/trắng ngà) */
    border-radius: 6px;        /* Độ cong góc */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Thêm bóng nhẹ (tùy chọn) */
    
    /* 2. CHIỀU RỘNG TỐI ĐA */
    max-width: 350px !important; /* Giới hạn chiều rộng để Tooltip không quá dài */
}

/* Tùy chỉnh MŨI TÊN (ARROW) của Tooltip */
.tippy-box[data-placement^='top'] > .tippy-arrow::before {
    border-top-color: #ece9e9; /* Màu mũi tên phải khớp với màu nền box */
}
.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: #ece9e9; /* Màu mũi tên phải khớp với màu nền box */
}
p, #results {
    color: #000; 
}