/* ===== THUẬT TOÁN CO GIÃN THÔNG MINH & ĐỒNG NHẤT FONT ===== */
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; }
*{ margin:0; padding:0; box-sizing:border-box; font-family: "Times New Roman", Times, serif; word-wrap: break-word; overflow-wrap: break-word; }
html { margin: 0; padding: 0; }
body { background: #f3f5f7; line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; width: 100%; margin: 0; padding: 0; }
img, video, iframe { max-width: 100%; height: auto; }
.page-wrapper{ flex-grow: 1; display:flex; flex-direction:column; }

/* ===== HEADER ===== */
header{ color:white; height:110px; padding:0 30px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:1002; background-color:#1f5f99; background-image:url('daihoc1.png'); background-size:auto 100%; background-position:right center; background-repeat:no-repeat; }
.header-left{ display:flex; align-items:stretch; gap:12px; height:100%; padding:4px 0; }
.header-left img{ height:100%; width:auto; object-fit:contain; }
.header-text{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; width:60%; }
.title{ font-size: clamp(20px, 2.5vw, 34px); font-weight:700; }
.slogan{ font-size: clamp(14px, 1.5vw, 20px); margin-top:6px; }

/* ===== NAV (MENU & DROPDOWN MÁY TÍNH) ===== */
nav{ background: #dcdcdc; box-shadow: 0 3px 6px rgba(0,0,0,0.15); position: sticky; top: 110px; z-index: 1001; }
nav ul { display: flex; list-style: none; align-items: center; justify-content: space-between; width: 100%; max-width: 100%; padding-left: 0; padding-right: 15px; margin: 0; }
nav ul > div { display: flex; align-items: center; flex-shrink: 0; }
nav li { position: relative; } 
nav a{ text-decoration:none; color: #222; display:block; padding: 9px clamp(8px, 0.9vw, 16px); font-size: clamp(13px, 1vw, 15px); font-weight: bold; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease; }

nav li:not(.search-box):hover > a { background:#8a1c1c; color:white; border-radius: 4px; }
.arrow, .arrow-right { display: inline-block; transition: transform 0.3s ease; }
.arrow { font-size: 10px; margin-left: 3px; }
.arrow-right { font-size: 10px; float: right; margin-top: 4px; color: #8a1c1c; }
nav li:hover > a .arrow-right { color: white; }

/* Box Menu Cấp 2, 3, 4 */
.dropdown-content { display: none; position: absolute; top: 100%; left: 0; background-color: #ffffff; min-width: 230px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); border-radius: 0 0 6px 6px; border-top: 3px solid #8a1c1c; z-index: 1005; padding: 0; }
.sub-dropdown-content { display: none; position: absolute; top: 0; left: 100%; background-color: #ffffff; min-width: 220px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); border-radius: 0 6px 6px 6px; border-left: 3px solid #8a1c1c; z-index: 1006; padding: 0; }
.sub-sub-dropdown-content { display: none; position: absolute; top: 0; left: 100%; background-color: #ffffff; min-width: 150px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); border-radius: 0 6px 6px 6px; border-left: 3px solid #8a1c1c; z-index: 1007; padding: 0; }

.dropdown:hover > .dropdown-content { display: block; }
.sub-dropdown:hover > .sub-dropdown-content { display: block; }
.sub-sub-dropdown:hover > .sub-sub-dropdown-content { display: block; }

.dropdown-content a, .sub-dropdown-content a, .sub-sub-dropdown-content a { color: #333; padding: 10px 16px; font-size: 15px; font-weight: normal; border-bottom: 1px solid #f0f0f0; border-radius: 0 !important; background: transparent !important; }
.dropdown-content li:hover > a, .sub-dropdown-content li:hover > a, .sub-sub-dropdown-content li:hover > a { background-color: #f0f2f5 !important; color: #8a1c1c !important; font-weight: bold; }

.menu-toggle{ display:none; font-size:26px; padding:10px 16px; cursor:pointer; }
.search-box { display: flex; align-items: center; padding-right: 0; padding-left: 10px; flex-shrink: 1; }
.search-box form { display: flex; align-items: center; margin: 0; width: 100%; position: relative; }
.search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 15px; color: #666; pointer-events: none; }
.search-box input { padding: 6px 12px 6px 32px; border-radius: 20px; border: 1px solid #ccc; margin-top: 0; width: 180px !important; box-sizing: border-box !important; outline: none; }
.search-box input:focus { max-width: 100vw !important; border-color: #8a1c1c; }

/* ===== LAYOUT & SECTION ===== */
.container{ display:grid; grid-template-columns: minmax(0, 1fr) 240px; gap:12px; padding: 22px 5px 22px 22px; flex-grow: 1; }

.container:not(.auth-container) > div:last-child { 
    position: fixed; 
    top: 150px; 
    right: 5px; /* Ép Sidebar ra sát lề, chỉ để hở 5px */
    width: 240px; 
    max-height: calc(100vh - 160px); 
    overflow-y: auto; 
    overscroll-behavior: contain; 
    z-index: 10; 
}
.container:not(.auth-container) > div:last-child::-webkit-scrollbar { width: 4px; }
.container:not(.auth-container) > div:last-child::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 4px; }
.container:not(.auth-container) > div:last-child::-webkit-scrollbar-thumb:hover { background-color: #0b5fa5; }

.section{ background:white; padding:18px; border-radius:10px; box-shadow:0 3px 8px rgba(0,0,0,0.08); margin-bottom:18px; }
.section h2{ border-bottom:3px solid #0b5fa5; padding-bottom:6px; margin-bottom:12px; }
.post{ padding:12px 0; border-bottom:1px solid #eee; }
.sidebar-box{ background:white; padding:9px 16px 15px 16px; border-radius:10px; box-shadow:0 3px 8px rgba(0,0,0,0.08); margin-bottom:13px; }
.sidebar-box h3{ border-bottom:2px solid #0b5fa5; padding-bottom:2px; margin-bottom:10px; font-size: 17.5px; }

input, textarea { width:100%; padding:10px; margin-top:8px; font-size: 16px; }
.btn{ display:block; width:100%; padding:10px; margin-top:8px; text-align:center; background:#0b5fa5; color:white; text-decoration:none; border-radius:4px; font-weight: bold; border:none; cursor:pointer; }
.btn:hover{ background:#094d87; }
.btn-green{ background:#28a745; }
.btn-green:hover{ background:#218838; }
.btn-red { background:#dc3545; }
.btn-red:hover { background:#c82333; }
.btn-small { padding: 6px; font-size: 12px; }
.btn-inline { width: auto; display: inline-block; }

.text-blue { color:#0b5fa5; } .text-red { color:red; } .text-green { color:green; }
.font-bold { font-weight:bold; } .text-center { text-align: center; } .mb-12 { margin-bottom: 12px; }
.hr-light { border: 0; border-top: 1px solid #eee; margin-bottom: 15px; } .hr-margin { margin: 15px 0; border: 0; border-top: 1px solid #eee; }

.admin-table { width: 100%; border-collapse: collapse; } .admin-table th, .admin-table td { border: 1px solid #ddd; padding: 8px; text-align: left; } .admin-table th { background: #f0f0f0; } .admin-name { font-size: 18px; font-weight: bold; color: #0b5fa5; margin-top: 10px; margin-bottom: 15px; }
.auth-container { display: flex; justify-content: center; align-items: flex-start; padding-top: 40px; } .auth-box { width: 100%; max-width: 400px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .auth-title { text-align: center; border-bottom: 2px solid #0b5fa5; padding-bottom: 10px; margin-bottom: 20px; }
.auth-form-group { margin-bottom: 15px; } .auth-form-group-last { margin-bottom: 20px; } .auth-label { font-weight: bold; display: block; margin-bottom: 5px; } .auth-input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; margin-top:0; } .auth-btn { width: 100%; padding: 12px; font-weight: bold; cursor: pointer; } .auth-link-text { text-align: center; margin-top: 15px; font-size: 14px; } .auth-link { color: #0b5fa5; text-decoration: none; font-weight: bold; }
.alert-error { color: red; font-weight: bold; text-align: center; background: #ffebee; padding: 10px; border-radius: 4px; } .alert-success { background-color: #28a745; color: white; padding: 15px; border-radius: 8px; } .alert-danger { background-color: #dc3545; color: white; padding: 15px; border-radius: 8px; }
.password-container { position: relative; display: flex; align-items: center; } .toggle-password { position: absolute; right: 10px; cursor: pointer; font-size: 18px; top: 50%; transform: translateY(-50%); }

.stat-row { display: flex; justify-content: space-between; margin-bottom: 5px; }
.quote-box-text { font-style: italic; text-align: center; font-weight: 500; font-size: 16px; line-height: 1.5; transition: all 1s ease; }

/* ===== CHUYỂN INDEX.PHP SANG ===== */
.letter-container { background: #ffffff; padding: 40px 45px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-radius: 8px; border-top: 5px solid #0b5fa5; border-bottom: 5px solid #0b5fa5; background-image: url('https://www.transparenttextures.com/patterns/cream-paper.png'); margin-bottom: 20px; }
.letter-title { font-family: 'Lora', serif; font-weight: 700; font-size: 26px; color: #0b5fa5; text-align: center; line-height: 1.5; margin-bottom: 25px; text-transform: uppercase; }
.letter-greeting { font-family: 'Dancing Script', cursive; font-size: 30px; color: #8a1c1c; margin-bottom: 25px; text-align: center; }
.letter-content p { font-family: 'Lora', serif; font-size: 16.5px; line-height: 1.8; color: #333333; text-align: justify; text-indent: 35px; margin-bottom: 18px; }
.letter-content h3 { font-family: 'Lora', serif; font-size: 20px; color: #0b5fa5; margin-top: 35px; margin-bottom: 15px; border-bottom: 1px dashed #ccc; padding-bottom: 8px; }
.letter-signature { text-align: right; margin-top: 40px; }
.letter-signature p { text-indent: 0; text-align: right; margin-bottom: 5px; font-family: 'Lora', serif; }
.signature-name { font-family: 'Dancing Script', cursive; font-size: 38px; color: #0b5fa5; font-weight: 700; margin-top: 10px; }

/* ===== FOOTER ===== */
footer{ background:#0b5fa5; color:white; padding:0; text-align:center; margin-top:20px; font-size:14px; position: relative; z-index: 999; } 
footer p{ margin:0; line-height:1.2; }
#quoteText {font-size:16px;font-style:italic;color:#555;text-align:center;transition: all 0.5s ease-in-out;} #quoteBox:hover #quoteText {font-size:18px;color:#0b5fa5;}
#statsBox p {font-size:16px;color:#333;} #statsBox span {font-weight:bold;font-size:18px;color:#0b5fa5;}
.nav-mobile-header { display: none; }

/* ==========================================
   GIAO DIỆN ĐIỆN THOẠI (TỪ 900px TRỞ XUỐNG)
========================================== */
@media(max-width:900px){
    header { height: 110px; } nav { top: 110px; } .header-text{ display:none !important; }
    .container{ display: flex; flex-direction: column; padding: 15px; } 
    
    .container:not(.auth-container) > div:last-child { order: -1; position: static !important; width: 100% !important; right: auto !important; max-height: none !important; overflow-y: visible !important; } 
    .container > div:first-child { order: 1; }
    .nav-mobile-header { display: flex; align-items: center; justify-content: center; width: 100%; position: relative; min-height: 54px; padding: 5px 0; } 
    .menu-toggle { display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 10; padding: 10px 16px; } 
    .mobile-nav-text { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; padding: 0 50px; overflow: hidden; } 
    .mobile-title { font-size: clamp(14px, 4vw, 18px); font-weight: bold; color: #0b5fa5; white-space: nowrap; text-overflow: ellipsis; line-height: 1.2; } 
    .mobile-slogan { font-size: clamp(9px, 2.5vw, 13px); color: #333; white-space: nowrap; text-overflow: ellipsis; line-height: 1.2; margin-top: 6px; }
    
    /* MENU ĐIỆN THOẠI ĐƯỢC CẤP LỆNH VUỐT MƯỢT (-webkit-overflow-scrolling) */
    nav ul{ display:none; flex-direction:column; position: absolute; top: 100%; left: 0; background: white; width: 100%; box-shadow: 0 4px 6px rgba(0,0,0,0.1); max-height: calc(100vh - 170px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: auto; }
    nav ul::-webkit-scrollbar { width: 4px; } nav ul::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 4px; }
    nav ul.show{ display:flex; } nav ul div { display: block !important; width: 100%; }
    nav a { padding: 15px 20px; font-size: 16px; white-space: normal; color: #333; border-radius: 0 !important; }
    nav li { width: 100%; border-bottom: 1px solid #eee; }
    
    .search-box { padding:15px; width: 100%; justify-content: center; background: #f9f9f9; } 
    .search-box form { width: 90%; max-width: 400px; justify-content: center; } 
    .search-box input { width: 100% !important; } 

    nav li:not(.search-box):hover > a { background-color: transparent !important; color: #333 !important; }
    nav li a.active-menu { background-color: #8a1c1c !important; color: white !important; }
    nav.mobile-interacting li a.active-menu { background-color: transparent !important; color: #222 !important; }
    nav a.dropbtn.menu-opened { background-color: #8a1c1c !important; color: white !important; }
    nav a.sub-dropbtn.menu-opened { background-color: #d1d6dc !important; color: #8a1c1c !important; }
    nav a.sub-sub-dropbtn.menu-opened { background-color: #e2e6ea !important; color: #0b5fa5 !important; }

    .dropdown:hover > .dropdown-content, .sub-dropdown:hover > .sub-dropdown-content, .sub-sub-dropdown:hover > .sub-sub-dropdown-content { display: none; }
    
    .dropdown-content, .sub-dropdown-content, .sub-sub-dropdown-content { position: static; box-shadow: none; width: 100%; display: none !important; border: none; max-height: none; }
    .dropdown-content.show-mobile, .sub-dropdown-content.show-mobile, .sub-sub-dropdown-content.show-mobile { display: block !important; }

    .dropdown-content > li > a.sub-dropbtn { padding-left: 20px !important; background-color: #f0f2f5 !important; color: #333 !important; border-bottom: 1px solid #ccc !important; text-transform: uppercase; display: flex !important; justify-content: space-between; align-items: center; }
    .sub-dropdown-content > li > a.sub-sub-dropbtn { padding-left: 35px !important; font-weight: 600 !important; background-color: #fdfdfd !important; color: #444 !important; border-bottom: 1px solid #e0e0e0 !important; display: flex !important; justify-content: space-between; align-items: center; }

    .arrow.rotate { transform: rotate(180deg); } .arrow-right { transform: rotate(0deg); margin-top: 0; } .arrow-right.rotate { transform: rotate(90deg) !important; }
    a.final-level-link { padding-left: 45px !important; font-size: 14.5px !important; background-color: #fff !important; border-bottom: 1px dashed #eee !important; color: #333 !important; display: block; }
    .sub-sub-dropdown-content a.final-level-link { padding-left: 55px !important; } 
    .dropdown-content > li > a.direct-link { padding-left: 20px !important; background-color: #fff !important; border-bottom: 1px dashed #eee !important; color: #333 !important; font-size: 15px !important; display: block !important; font-weight: normal !important; }
    
    .letter-container { padding: 25px 20px; } .letter-title { font-size: 20px; } .letter-content p { font-size: 15px; text-indent: 20px; }
}

/* ==========================================
   GIAO DIỆN MÁY TÍNH (TỪ 901px TRỞ LÊN)
========================================== */
@media screen and (min-width: 901px) {
    /* Mở rộng khung Menu và nhốt con lăn chuột trên PC */
    .dropdown-content { min-width: 260px !important; overscroll-behavior: contain !important; }
    .sub-dropdown-content, .sub-sub-dropdown-content { min-width: 270px !important; overscroll-behavior: contain !important; }
    .dropdown-content li a, .sub-dropdown-content li a, .sub-sub-dropdown-content li a { white-space: nowrap !important; padding-right: 20px !important; }
}

/* ==========================================
   GIAO DIỆN DROPDOWN NGÔN NGỮ VN | EN
========================================== */
/* Căn chỉnh nút gốc trên Menu */
nav li.lang-dropdown > a {
    color: #0b5fa5; /* Xanh dương đồng bộ với Logo */
}
/* Khi rê chuột vào Menu Ngôn ngữ, đổi nền xanh nhạt, KHÔNG ĐỂ MÀU ĐỎ */
nav li.lang-dropdown:hover > a {
    background: #e3f2fd !important; 
    color: #0b5fa5 !important;
    border-radius: 4px;
}
/* Thu gọn khung xổ xuống cho vừa vặn */
.lang-dropdown .dropdown-content {
    min-width: 140px !important; 
}
.lang-dropdown .dropdown-content a {
    padding: 10px 15px !important;
    text-align: left;
}
/* Trạng thái ngôn ngữ đang được chọn (Nền xanh lá nhạt thân thiện) */
.lang-dropdown .dropdown-content a.active-lang {
    background-color: #e8f5e9 !important; 
    color: #2e7d32 !important; /* Chữ xanh lá cây đậm */
    font-weight: bold;
    border-left: 3px solid #2e7d32;
}
/* ==========================================
   TỐI ƯU MOBILE: DI CHUYỂN NÚT NGÔN NGỮ LÊN VỊ TRÍ SỐ 2
========================================== */
@media screen and (max-width: 900px) {
    /* Ép khung menu con thành dạng cột để dùng lệnh sắp xếp vị trí (Order) */
    nav ul div { display: flex !important; flex-direction: column; width: 100%; }
    
    /* Gán vị trí mặc định cho tất cả các mục Menu là Số 3 */
    nav ul div > li { order: 3; } 
    
    /* Chỉ định riêng mục Trang chủ (Home) phải đứng Số 1 */
    nav ul div > li:nth-child(1) { order: 1; } 
    
    /* Kéo mục Ngôn ngữ từ dưới cùng lên vị trí Số 2 */
    nav ul div > li.lang-dropdown { order: 2 !important; border-bottom: 1px solid #eee; } 
    
    /* Hiện lại dấu mũi tên ▼ cho ngôn ngữ trên điện thoại */
    nav li.lang-dropdown > a .arrow { display: inline-block !important; margin-left: 5px; }
}

/* ==========================================
   GIAO DIỆN TÌM KIẾM DẠNG POPUP (DROP-DOWN)
========================================== */
/* 1. Nút tròn chứa kính lúp */
.nav-search-item > a.search-circle-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important; /* Tạo hình tròn */
    border: 1.5px solid #0b5fa5 !important; /* Viền xanh đồng bộ logo */
    padding: 0 !important;
    margin-left: 8px; /* Khoảng cách đồng đều với Menu */
    background: transparent !important;
    transition: all 0.3s ease;
}

.nav-search-item > a.search-circle-icon:hover {
    background: #e3f2fd !important; /* Rê chuột sáng màu nền xanh nhạt */
}

/* Ẩn mũi tên ▼ của nút Tìm kiếm để giữ hình tròn hoàn hảo */
.nav-search-item > a.search-circle-icon .arrow {
    display: none !important; 
}

/* 2. Hộp Popup xổ xuống */
.search-popup {
    min-width: 250px !important; 
    right: 0 !important; /* Neo vào mép phải để không bị tràn màn hình */
    left: auto !important;
    padding: 12px 15px !important;
    border-top: 3px solid #f39c12 !important; /* Viền vàng cam giống ảnh mẫu */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.15) !important;
}

/* 3. Khung nhập liệu và nút bấm màu vàng cam */
.popup-search-form {
    display: flex;
    width: 100%;
    margin: 0;
}

.popup-search-form input {
    flex: 1;
    padding: 8px 12px !important;
    border: 1px solid #ccc !important;
    border-right: none !important; /* Ghép sát vào nút bấm */
    border-radius: 0 !important; /* Bỏ bo góc */
    margin: 0 !important;
    outline: none;
    font-size: 14px !important;
    width: auto !important;
}

.popup-search-form input:focus {
    border-color: #f39c12 !important;
}

.popup-search-form button {
    background-color: #f39c12 !important; /* Nút màu vàng cam */
    color: white !important;
    border: 1px solid #f39c12 !important;
    padding: 0 15px !important;
    cursor: pointer;
    font-size: 15px !important;
    border-radius: 0 !important;
    transition: background 0.2s;
}

.popup-search-form button:hover {
    background-color: #e67e22 !important; /* Đậm hơn khi rê chuột */
}