@charset "utf-8";
/* CSS Document - Final Combined File (Fixed Image Centering and Scrollbar) */
@font-face {
    font-family: 'CNKhai'; /* 💥 1. ĐẶT TÊN FONT BẠN MUỐN SỬ DỤNG */
    src: url('../styles/cn-khai.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    /* 💥 Tùy chọn: Đặt độ ưu tiên tải font (giúp tăng tốc độ hiển thị) */
    font-display: swap; 
}
/* ------------------------------------- */
/* 1. Reset, Typography, & Basic Setup */
/* ------------------------------------- */
body {
	font: 80%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #C4E5EE;
	margin: 0;
	padding: 0;
	color: #000;	
}
header, nav, main, section, article, aside, footer, figure, figcaption {
    display: block; 
}
img { 
    max-width: 100%; 
    height: auto; 
}

/* 💥 ĐÃ SỬA LỖI LIST ITEM SÁT LỀ */
ul, ol, dl { 
	/* Khôi phục khoảng cách mặc định của trình duyệt (thường là 40px) */
    padding: 0 0 0 40px; 
	margin: 0;
}

/* ------------------------------------- */
/* 2. Heading Styles (H1-H6) */
/* ------------------------------------- */
h1 { margin-top: 10px; padding-right: 5px; padding-left: 0px; color: #00F; font-size: 14px; text-align:center; }
h2 { margin-top: 0; padding-right: 15px; padding-left: 15px; color: #30C; font-size: 17px; background-image: url(../image/back_blue.gif); }
h3 { margin-top: 0; padding-right: 15px; padding-left: 15px; color: #00C; font-size: 15px; }
h4 { margin-top: 0; padding-right: 15px; padding-left: 15px; text-align:right; }
h5 { margin-top: 0; padding-right: 15px; padding-left: 15px; font-size: 14px; }
h6, p { 
    margin-top: 0; 
    padding-right: 15px; 
    padding-left: 15px; 
    text-align: left; /* Đặt mặc định P và H6 về canh trái */
}

/* ------------------------------------- */
/* 3. Link & Hover Styles */
/* ------------------------------------- */
a img { border: none; }
a:link { color: #000; text-decoration: none; }
a:visited { color: #000; text-decoration: none; }
a:hover, a:active, a:focus { color: #FFF; font-size: 100%; text-decoration: none; }
a:hover { color: #F7941D; }


/* ------------------------------------- */
/* 4. BỐ CỤC TOÀN CỤC (Responsive Layout) */
/* ------------------------------------- */
#page-header, #main-content, #page-footer, #new-main-menu {
    width: 100%; 
    max-width: 1024px; 
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
}

/* ------------------------------------- */
/* 5. Header & Footer Specific Styles */
/* ------------------------------------- */
#page-header { background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; }
#page-footer { text-align: center; background-color: rgb(240, 248, 255); }

/* ------------------------------------- */
/* 6. Main Content & Section Styles */
/* ------------------------------------- */
#main-content {
    background-color: rgb(240, 248, 255); 
}
#main-content #login-section {
    text-align: center; /* GIỮ: Canh giữa khối form/nội dung */
    max-width: 800px; 
    width: 90%;       
    margin: 0 auto; 
}
/* Canh giữa form bên trong section */
#main-content #login-section form {
    display: inline-block; 
    text-align: left; /* Giữ nguyên: Đặt lại văn bản bên trong form về bên trái */
}
/* Center-img for single image */
.center-img {
    display: block; /* Biến thẻ <img> từ inline thành block */
    margin-left: auto; /* Canh lề trái tự động */
    margin-right: auto; /* Canh lề phải tự động */
}

/* ------------------------------------- */
/* 7. Flexbox Menu */
/* ------------------------------------- */
#new-main-menu {
/*    background-color: #314a2e; 
    height: 51px; /* 💥 
	1. Đặt ảnh nền */
    background-image: url('../image/bg_menu.jpg'); 
    
    /* 💥 2. Đảm bảo ảnh lặp lại theo chiều ngang (Nếu ảnh nhỏ) */
    /* Nếu ảnh của bạn đủ rộng (ví dụ 1024px), dùng no-repeat */
    background-repeat: no-repeat; 
    
    /* 💥 3. Đảm bảo ảnh phủ hết chiều rộng và chiều cao của menu */
    background-size: cover; /* Hoặc 100% 100% nếu bạn muốn kéo dãn tuyệt đối */
    
    height: 51px; /* Giữ nguyên chiều cao */

}
#menu-list {
    list-style: none;
    margin: 0;
    padding: 0 15px; /* Đã thêm padding 15px cho lề trái/phải */
    height: 100%;
    
    display: flex;
    flex-wrap: wrap; 
    
    justify-content: center; 
    align-items: center; 
}
#menu-list li {
    margin: 0 5px;
    padding: 0;
    height: 25px; 
    display: flex;
    align-items: center;
}
#menu-list a {
    text-decoration: none;
    font-size: 13px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: #fff; 
    padding: 0 10px; 
    line-height: 25px; 
    transition: background-color 0.2s;

    display: block; 
}
#menu-list a:hover, #menu-list .active-item {
    color: #000; 
    background-color: #f2f2f2; 
    border-radius: 3px; 
}
.search-box { 
    margin-left: 20px; 
}
.search-box input[type="text"], .search-box button {
    height: 25px; border: none; padding: 0 5px; font-size: 13px; vertical-align: middle;
}
.search-box button { background-color: #f2f2f2; cursor: pointer; font-weight: bold; color: #333; }


/* ------------------------------------- */
/* 8. Round Box Styles (Giữ nguyên) */
/* ------------------------------------- */
.h1_round3 { background: url(../image/round_tl3.png) no-repeat top left; }
.round_box3 { background: url(../image/round_tr3.png) no-repeat top right; }
.round_box_bottom3 { background: url(../image/round_bl3.png) no-repeat bottom left; }
.round_box_bottom3 div { background: url(../image/round_br3.png) no-repeat bottom right; }
.round_box_content3 { background: url(../image/round_r3.png) top right repeat-y; }
.round_box3 div,.round_box3, .round_box_bottom3 div, .round_box_bottom3 { width: 100%; height: 22px; font-size: 1px; }
.round_box_content3, .round_box_bottom3 { margin-top: -19px; }
.round_box_content3 { padding: 0 15px; }
.h1_round_box { background: #ffffff url(../image/round_grad.gif) repeat-x top left; }
.h1_round_top div { background: url(../image/round_tl.gif) no-repeat top left; }
.h1_round_top { background: transparent url(../image/round_tr.gif) no-repeat top right; }
.h1_round_bottom div { background: url(../image/round_bl.gif) no-repeat bottom left; }
.h1_round_bottom { background: transparent url(../image/round_br.gif) no-repeat bottom right; }
.h1_round_top div, .h1_round_top, .h1_round_bottom div, .h1_round_bottom { width: 100%; height: 45px; font-size: 1px; }
.h1_round_content { margin: 0 20px; }
.h1_round { background: url(../image/round_tl.png) no-repeat top left; }
.round_box { background: url(../image/round_tr.png) no-repeat top right; }
.round_box_bottom { background: url(../image/round_bl.png) no-repeat bottom left; }
.round_box_bottom div { background: url(../image/round_br.png) no-repeat bottom right; }
.round_box_content { background: url(../image/round_r.png) top right repeat-y; }
.round_box div,.round_box, .round_box_bottom div, .round_box_bottom { width: 100%; height: 22px; font-size: 1px; }
.round_box_content, .round_box_bottom { margin-top: -19px; }
.round_box_content { padding: 0 15px; }
blockquote { max-width: 360px; background: url(../image/rs-right.png) right repeat-y }
blockquote:before { display: block; line-height: 0; background: url(../image/rs-topright.png) top right no-repeat; content: url(rs-topleft.png) }
blockquote:after { display: block; line-height: 0; background: url(../image/rs-bottomright.png) bottom right no-repeat; content: url(../image/rs-bottomleft.png) }


/* ------------------------------------- */
/* 9. Utility & Clear */
/* ------------------------------------- */
.fltrt {	float: right; margin-left: 8px; }
.fltlft { float: left; margin-right: 8px; }
.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; }


/* ------------------------------------- */
/* 10. CUSTOM TEXT STYLES (ĐÃ GHI ĐÈ LỖI ẢNH) */
/* ------------------------------------- */
.note { padding: 0px; padding-top: 10px; font-size: x-small; }
.side_text { font-size: 11px; text-align:left; }
.pSuperTitle, .pSubTitle { font-family: 'arial'; font-size: 10pt; font-weight: bold; margin-top: 0 }
.pTitle { font-family: 'arial'; font-size: 18px; font-weight: bold; margin-top: 0; color:#004a80; }
.pHead { font-family: 'arial'; font-size: 12px; color: #7d7d7d; font-weight: bold }
.pBody { font-family: 'arial'; font-size: 12px; color: #000;}
.pInterTitle { font-family: 'arial'; font-size: 11pt; color: #000000; font-weight: bold }
.pAuthor { font-family: 'arial'; font-size: 12px; text-align: Right; color:#3d3d3d; font-weight: bold }
.pSource { font-family: 'arial'; font-size: 10pt; text-align: Right; font-style: italic; text-transform: uppercase }
.pAnswer, .pQuestion { font-family: 'arial'; font-size: 10pt; color: #000000;}
.pQuestion { font-weight: bold; }
.tLegend { font-size: 8.5pt; color: #888888; font-style: italic; font-family: 'Arial'; }
.sutra { font-family:Arial, Helvetica, sans-serif; font-size: 18px; line-height: 32px; }
.lImage { border: 1 solid #0000FF; cursor: hand; }
#holder { width: 600px; height: 300px; left: 10px; top: 10px; }
largefont { font-size: 24px; margin-left: 30px; left: 30px; }

/* 💥 QUY TẮC MỚI: Ghi đè float:left cũ cho TẤT CẢ ảnh bên trong bảng */
table img {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important; /* Đảm bảo hình ảnh là một inline element */
}
/* 10A. TEXT AND TABLE CELL CENTERING */
.center-text {
    text-align: center !important; /* Dùng !important cho text */
}
.td-center {
    text-align: center !important; /* Dùng !important để canh giữa nội dung trong TD */
}

/* 10B. IMAGE GALLERY CENTERING (FIXED SCROLLBAR AND CENTERING CONFLICTS) */

/* 💥 QUY TẮC SỐ 1: Ghi đè float, margin, padding cũ cho TẤT CẢ ảnh trong nội dung chính */
#main-content img {
    float: none !important;    /* 💥 QUAN TRỌNG: Vô hiệu hóa float: left */
    margin: 0 !important;      /* Vô hiệu hóa margin xung đột */
    padding: 0 !important;
    display: inline-block !important;     /* Đảm bảo ảnh hoạt động tốt */
}

/* 💥 CLASS CANH GIỮA MỚI: Dùng Flexbox và Margin Auto trên khối ảnh */
.img-gallery-center, .img-pair-center {
    /* 1. Thiết lập Flexbox */
    display: flex !important; /* Dùng display: flex (thay vì inline-flex) */
    
    /* 2. Loại bỏ float và margin xung đột */
    float: none !important;
    padding: 0 !important;
    
    /* 3. Bắt buộc canh giữa khối DIV bằng Margin Auto */
    margin-left: auto !important; 
    margin-right: auto !important; 
    
    /* 4. Canh giữa các ảnh bên trong khối Flex */
    justify-content: center !important; 
    
    flex-wrap: nowrap !important; 
    gap: 10px !important; 
}
/* CLASS CĂN GIỮA DỨT ĐIỂM (CHUYỂN ĐỔI TỪ <div align="center">) */
.center-wrapper {
    /* 1. Canh giữa phần tử khối: Dùng Margin Auto */
    margin-left: auto !important; 
    margin-right: auto !important;
    
    /* 2. Canh giữa nội dung inline bên trong (dự phòng) */
    text-align: center !important; 
    
    /* 3. Đảm bảo nó là phần tử khối để Margin Auto hoạt động */
    display: block !important; 
    
    /* 4. Đảm bảo nó không bị float và chiếm hết chiều ngang có thể */
    float: none !important;
    width: fit-content; /* Đảm bảo nó không chiếm 100% chiều rộng */
    max-width: 100%;
}
.img-float-left {
    float: left !important;      /* Bắt buộc nổi về bên trái */
    margin-right: 15px !important; /* Tạo khoảng cách giữa ảnh và text */
    margin-bottom: 10px !important; /* Khoảng cách giữa ảnh và văn bản bên dưới */
    clear: none !important;      /* Đảm bảo không bị clear float */
}
/* CLASS KHUNG HÌNH MẶC ĐỊNH */
.photo-frame {
    /* 1. Thiết lập kích thước khung (phải lớn hơn ảnh gốc) */
    width: 270px;  /* Ví dụ: lớn hơn 160px của ảnh gốc */
    height: 290px; /* Ví dụ: lớn hơn 251px của ảnh gốc */
    
    /* 2. Áp dụng file PNG làm ảnh nền */
    background-image: url('../image/frame.png');
    background-size: 100% 100%; /* Kéo dãn ảnh PNG vừa với khối DIV */
    background-repeat: no-repeat;
    
    /* 3. Canh giữa khối khung hình (quan trọng cho layout) */
    display: inline-block; /* Hoặc flex/inline-flex tùy bố cục */
    text-align: center; 
    
    /* 4. Canh giữa ảnh thực tế (nếu ảnh nhỏ hơn khung) */
    line-height: 271px; /* Bằng chiều cao khối DIV */
}

/* Định kiểu cho ảnh thực tế bên trong khung */
.photo-frame img {
    /* Điều chỉnh ảnh thực tế nhỏ hơn khung để thấy được viền PNG */
    width: 250px;
    height: 270px;
    
    /* Đặt ảnh nằm giữa khung */
    vertical-align: middle; 
}
/* 💥 QUY TẮC MỚI: Đóng khung cho ảnh */
.framed-photo img {
    /* Độ dày 5px | Kiểu liền nét | Màu Đỏ Bordo sẫm */
    border: 5px solid #800020 !important; 
    
    /* Khoảng cách giữa viền và ảnh (tùy chọn) */
    padding: 2px !important;
    
    /* Vô hiệu hóa border: 2px cũ (nếu có) */
    border-width: 5px !important;
}
/* ------------------------------------- */
/* 11. MEDIA QUERIES (FIX MENU & BỐ CỤC MOBILE) */
/* ------------------------------------- */
@media (max-width: 650px) {
    /* Điều chỉnh Menu để hiển thị XẾP CHỒNG (Stacked) */
    #new-main-menu {
        height: auto; 
        padding: 5px 0;
    }
    #menu-list {
        height: auto; 
        justify-content: space-between;
    }
    #menu-list li {
        width: 100%; 
        margin: 0;
        height: auto;
    }
    #menu-list a {
        padding: 10px 10px; 
        text-align: left;
        width: 100%; 
        border-radius: 0; 
    }
    #menu-list a:hover, #menu-list .active-item {
        background-color: #f2f2f2;
        color: #1a609d; 
        border-left: 5px solid #F7941D;
    }

    /* Đặt ô tìm kiếm xuống hàng riêng */
    .search-box {
        margin: 5px auto; 
        width: 90%; 
        margin-left: 0;
    }
    .search-box form {
        width: 100%;
        display: flex;
    }
    .search-box input[type="text"] {
        flex-grow: 1;
    }
    
    /* Đảm bảo nội dung chính có khoảng cách với màn hình */
    #main-content #login-section {
        padding: 10px;
        width: 95%;
    }

    /* 💥 QUY TẮC CHO NHÓM ẢNH (.img-gallery-center) TRÊN MOBILE */
    .img-gallery-center, .img-pair-center {
        flex-wrap: wrap !important; /* Cho phép hình ảnh xuống hàng trên mobile */
        display: flex !important;   /* Đặt lại thành FLEX để chiếm hết chiều rộng của TD */
        justify-content: center !important; /* Canh giữa ảnh trong chế độ xếp chồng */
        gap: 20px 0 !important;     /* Tăng khoảng cách dọc giữa các ảnh đã xếp chồng */
    }
    
    /* Buộc mỗi ảnh bên trong chiếm toàn bộ chiều rộng (tùy chọn, nếu cần) */
    .img-gallery-center img, .img-pair-center img {
        width: 100%;
        max-width: 300px; /* Giới hạn kích thước ảnh trên mobile nếu cần */
    }
}