/* ==========================================================================
   1. KHU VỰC TÙY CHỈNH DỄ DÀNG (BIẾN MÀU & FONT)
   ========================================================================== */
:root {
    --primary-color: #0d6efd;
    --secondary-color: #003366;
    --accent-color: #fd7e14;
    --text-heading-color: #212529;
    --text-body-color: #495057;
    --background-light-color: #f8f9fa;
    --border-color: #dee2e6;
    --white-color: #ffffff;
    --online-tag-bg: #e0f2fe;
    --online-tag-text: #0ea5e9;
    --font-primary: 'Manrope', sans-serif;
}

/* ==========================================================================
   2. GENERAL & RESET
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-primary);
      overflow-x: hidden; color: var(--text-body-color); line-height: 1.7; background-color: var(--white-color); -webkit-font-smoothing: antialiased; }
/* .container { max-width: 1280px; margin: 0 auto; padding: 0 20px; } */
/* Thay thế đoạn mã cũ bằng đoạn mã này */

.table-wrapper {
  overflow-x: auto;
  width: 100%;
}
/* ==========================================================================
   GIẢI PHÁP TỐI THƯỢNG CHỐNG TRÀN LỀ (MOBILE)
   ========================================================================== */
.site-wrapper {
    width: 100%;
    overflow-x: hidden;
}

.section-title h2 { font-size: 2.5rem; font-weight: 800; color: var(--text-heading-color); text-align: center; margin-bottom: 60px; position: relative; display: inline-block; padding-bottom: 20px; }
.section-title h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: linear-gradient(90deg, var(--secondary-color), var(--primary-color)); border-radius: 2px; }

/* ==========================================================================
   3. HEADER
   ========================================================================== */
.new-site-header { background-color: var(--white-color); }
.header-super-top { background-color: #f8f9fa; padding: 8px 0; border-bottom: 1px solid var(--border-color); }
.header-super-top .container { display: flex; justify-content: flex-end; align-items: center; gap: 25px; }
.header-super-top .hotline { font-size: 0.9rem; }
.header-super-top .hotline strong { color: var(--primary-color); font-size: 1rem; }
.search-form { display: flex; border: 1px solid var(--border-color); border-radius: 20px; overflow: hidden; }
.search-form input { background-color: transparent; color: var(--text-body-color); border: none; outline: none; padding: 6px 15px; }
.search-form button { background: none; border: none; padding: 0 15px; cursor: pointer; color: var(--primary-color); }
.header-main { padding: 20px 0; }
.header-main .container { display: flex; align-items: center; justify-content: space-between; }
.logo-branding { display: flex; align-items: center; text-decoration: none; }
.logo-branding img { height: 100px; margin-right: 25px; }
.school-name { display: flex; flex-direction: column; align-items: flex-start; }
.school-name h1 { font-size: 2.5rem; font-weight: 800; text-transform: uppercase; line-height: 1.2; margin: 0 0 5px 0; background: linear-gradient(90deg, var(--secondary-color), var(--primary-color)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.slogan { font-size: 1.2rem; font-weight: 600; color: #6c757d; }
.header-bottom { background-color: var(--primary-color); position: sticky; top: 0; z-index: 1000; box-shadow: 0 5px 15px rgba(0, 51, 102, 0.2); }
.header-bottom .container { display: flex; justify-content: center; align-items: center; }

.main-navigation { display: flex; align-items: center; }
.main-navigation a { color: var(--white-color); text-decoration: none; padding: 15px 25px; font-weight: 700; text-transform: uppercase; transition: background-color 0.3s; position: relative; }
.main-navigation a::after { content: ''; position: absolute; bottom: 0; left: 15px; right: 15px; height: 3px; background-color: var(--white-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s ease; }
.main-navigation a:not(.cta-button):hover::after, .main-navigation a.active:not(.cta-button)::after { transform: scaleX(1); }
.main-navigation a:not(.cta-button):hover, .main-navigation a.active:not(.cta-button) { background-color: var(--secondary-color); }
.cta-button { background-color: var(--accent-color) !important; color: var(--white-color) !important; padding: 10px 25px !important; border-radius: 50px; margin-left: 20px; box-shadow: 0 4px 15px rgba(255, 87, 34, 0.4); animation: pulse-animation 2s infinite; border-bottom: none; line-height: 1.5; font-weight: 800; }
.cta-button:hover { background-color: #e64a19 !important; transform: scale(1.05); }
.cta-button::after { display: none !important; }
@keyframes pulse-animation { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.mobile-menu-button { display: none; background: none; border: none; color: var(--white-color); font-size: 1.8rem; cursor: pointer; }

/* ==========================================================================
   4. FOOTER
   ========================================================================== */
.site-footer-main { background-color: var(--secondary-color); color: rgba(255, 255, 255, 0.8); padding: 60px 0 30px 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; text-align: left; margin-bottom: 40px; }
.footer-about h4, .footer-links h4 { color: var(--white-color); font-size: 1.2rem; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; }
.footer-about img { height: 80px; margin-bottom: 15px; }
.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: all 0.3s ease; }
.footer-links a:hover { color: var(--white-color); padding-left: 5px; }
.footer-bottom-text { text-align: center; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.9rem; }

/* ==========================================================================
   5. PAGE COMPONENTS
   ========================================================================== */
/* --- PAGE HEADER (TRANG CON) --- */
.page-header { background: linear-gradient(to right, var(--secondary-color), var(--primary-color)); color: var(--white-color); padding: 60px 0; text-align: center; margin-bottom: 60px; }
.page-header h1 { font-size: 2.8rem; font-weight: 800; }
.page-header p { font-size: 1.2rem; opacity: 0.9; margin-top: 10px; }
.page-header .breadcrumbs { margin-top: 15px; }
.page-header .breadcrumbs a { color: var(--white-color); opacity: 0.8; text-decoration: none; }
.page-header .breadcrumbs span { margin: 0 10px; opacity: 0.6; }

/* --- SLIDER (TRANG CHỦ) --- */
/* --- SLIDER (TRANG CHỦ) - SỬA LỖI TRIỆT ĐỂ --- */

.hero-section {
    width: 100%;
    /* KHÔNG ĐẶT CHIỀU CAO CỐ ĐỊNH Ở ĐÂY NỮA */
    padding: 0;      /* Đảm bảo không có đệm trên/dưới */
    line-height: 0;  /* Mẹo nhỏ để loại bỏ mọi khoảng trắng ký tự */
}

/* Các thẻ của thư viện Swiper phải có chiều cao tự động theo ảnh */
.hero-slider, 
.hero-slider .swiper-wrapper, 
.hero-slider .swiper-slide {
    height: auto; 
}

/* Ảnh là thứ quyết định chiều cao của toàn bộ slider */
.hero-slider .swiper-slide img {
    width: 100%;      /* Luôn rộng 100% */
    height: auto;     /* Chiều cao tự động tính theo tỷ lệ ảnh -> ĐÂY LÀ CHÌA KHÓA */
    display: block;   /* Loại bỏ khoảng trắng thừa mặc định dưới ảnh */
}
/* LÀM ĐẸP VÀ CĂN GIỮA TIÊU ĐỀ SECTION */
.section-title {
    text-align: center; /* Thêm dòng này để căn giữa h2 */
}

#admission-section { background-color: var(--background-light-color); }
.admission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 40px; }

.admission-card {
    background: var(--white-color); border-radius: 16px;
    display: flex; flex-direction: column;
    box-shadow: 0 10px 25px rgba(0, 51, 102, 0.07);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden; border: 1px solid var(--border-color);
}
.admission-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 51, 102, 0.15); }

.card-header {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    padding: 30px 25px;
}
.card-header h3 {
    font-size: 1.8rem; font-weight: 800; color: var(--white-color); text-align: center;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3); display: flex;
    align-items: center; justify-content: center; gap: 12px;
}
.card-header h3::before {
    content: '\f19d'; font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: 1.5rem; opacity: 0.9;
}

.info-list {
    list-style: none; padding: 20px 30px 0 30px; margin: 0;
    flex-grow: 1;
}

/* Logic hiển thị item ẩn/hiện */
.info-list .list-item.hidden {
    display: none;
}

.info-list a {
    text-decoration: none; color: var(--text-heading-color);
    display: flex; align-items: center; gap: 10px;
    transition: all 0.3s;
    font-weight: 700; /* Chữ đậm hơn */
    font-size: 1.05rem; /* Chữ to hơn */
    padding: 15px 0; /* Tăng khoảng cách dọc */
    border-bottom: 1px solid var(--border-color);
}
.info-list li:last-child a {
    border-bottom: none; /* Bỏ gạch chân cho mục cuối cùng */
}

.info-list a:hover {
    color: var(--primary-color);
    transform: translateX(5px);
}
.info-list a::after {
    content: '\f054'; font-family: "Font Awesome 6 Free"; font-weight: 900;
    margin-left: auto; color: #ccc; transition: all 0.3s ease;
}
.info-list a:hover::after {
    color: var(--primary-color);
    transform: translateX(4px);
}

.card-actions {
    padding: 20px 30px 30px 30px;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.btn-card-register {
    display: block; width: 100%; text-align: center;
    background-color: var(--accent-color);
    color: var(--white-color);
    padding: 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-card-register:hover {
    background-color: #e64a19;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3);
}

.btn-toggle-more {
    background-color: #f0f0f0;
    color: var(--text-body-color);
    border: none;
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.btn-toggle-more:hover {
    background-color: #e0e0e0;
    color: var(--text-heading-color);
}
.btn-toggle-more .icon-toggle {
    transition: transform 0.3s ease;
}
.btn-toggle-more.expanded .icon-toggle {
    transform: rotate(180deg);
}

/* Bỏ tag online không cần thiết nữa */
.online-tag {
    display: none;
}
/* === KHÔI PHỤC CSS CHO TRANG CHỨNG CHỈ === */
.course-list-section { background-color: var(--background-light-color); }
.course-list-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.course-list-card { background: var(--white-color); border-radius: 12px; box-shadow: 0 4px 25px rgba(0, 0, 0, 0.07); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s, box-shadow 0.3s; text-decoration: none; }
.course-list-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); }
.course-list-card img { width: 100%; height: 200px; object-fit: cover; }
.list-card-content { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.list-card-content h3 { font-size: 1.25rem; font-weight: 700; color: var(--text-heading-color); margin-bottom: 10px; min-height: 3.2em; }
.list-card-content .price { font-weight: 600; color: var(--primary-color); margin-bottom: 15px; }
.list-card-content p { font-size: 0.95rem; flex-grow: 1; margin-bottom: 20px; color: var(--text-body-color); }
.btn-detail-list { display: inline-block; text-align: center; background-color: #eef8ff; color: var(--primary-color); padding: 10px 15px; border-radius: 8px; font-weight: 600; transition: all 0.3s; margin-top: auto; }
.course-list-card:hover .btn-detail-list { background-color: var(--primary-color); color: var(--white-color); }

/* === KHÔI PHỤC CSS CHO TRANG CHI TIẾT CHỨNG CHỈ === */
.course-detail-section { background-color: var(--white-color); }
.course-detail-container { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
.course-main-content h4 { font-size: 1.5rem; margin: 40px 0 20px; color: var(--secondary-color); border-left: 4px solid var(--primary-color); padding-left: 15px; }
.schedule-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.schedule-table th, .schedule-table td { padding: 12px; border: 1px solid var(--border-color); }
.schedule-table thead th { background-color: var(--background-light-color); }
.course-note { margin-top: 30px; padding: 15px; background-color: #f0faff; border-left: 4px solid var(--primary-color); }
.course-sidebar { position: sticky; top: 100px; /* Căn với menu sticky */ }
.sidebar-box { padding: 25px; border-radius: 12px; box-shadow: 0 4px 25px rgba(0,0,0,0.1); margin-bottom: 25px; background: var(--white-color); }
.sidebar-box img { width: 100%; border-radius: 8px; margin-bottom: 15px; }
.btn-register-sidebar { width: 100%; padding: 12px; font-size: 1rem; font-weight: 700; background-color: var(--accent-color); color: var(--white-color); border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; }
.btn-register-sidebar:hover { background-color: #e64a19; transform: translateY(-2px); }
.quick-menu-box h3 { cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 1.2rem; }
.quick-menu-box h3::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; transition: transform 0.3s; }
.quick-menu-box.open h3::after { transform: rotate(180deg); }
.quick-menu-list { list-style: none; padding-left: 0; max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out; margin-top: 15px; }
.quick-menu-box.open .quick-menu-list { max-height: 500px; }
.quick-menu-list li a { display: block; padding: 10px 15px; text-decoration: none; color: var(--text-body-color); font-weight: 500; border-radius: 6px; transition: all 0.2s; }
.quick-menu-list li a:hover { background-color: #f0faff; color: var(--secondary-color); }
.quick-menu-list li a.active { background-color: var(--primary-color); color: var(--white-color); font-weight: 600; }

/* ==========================================================================
   6. FORM MODAL (POPUP)
   ========================================================================== */
.form-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(17, 24, 39, 0.8); backdrop-filter: blur(8px);
    display: flex; justify-content: center; align-items: center; z-index: 2000;
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.form-modal-overlay.active { opacity: 1; visibility: visible; }
/* TRONG FILE STYLE.CSS, TÌM VÀ THAY THẾ KHỐI NÀY */

.form-modal-content {
    background: linear-gradient(145deg, var(--white-color) 0%, #f7f9fc 100%);
    padding: 35px 40px;
    border-radius: 16px;
    width: 90%;
    max-width: 550px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border-top: 4px solid var(--primary-color);
    
    /* === THÊM CÁC DÒNG NÀY ĐỂ SỬA LỖI === */
    display: flex; /* Bật Flexbox để dễ quản lý chiều cao */
    flex-direction: column; /* Sắp xếp các mục theo chiều dọc */
    max-height: 90vh; /* Chiều cao tối đa là 90% chiều cao màn hình */
    /* === KẾT THÚC PHẦN THÊM MỚI === */
    
    transform: translateY(-30px) scale(0.95);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

/* THÊM KHỐI NÀY NGAY BÊN DƯỚI .form-modal-content */
.form-modal-content > form {
    overflow-y: auto; /* Cho phép CHỈ PHẦN FORM được cuộn */
    padding-right: 15px; /* Thêm khoảng trống cho thanh cuộn, tránh che nội dung */
    margin-right: -15px; /* Bù lại khoảng trống vừa thêm */
}
.form-modal-overlay.active .form-modal-content { transform: translateY(0) scale(1); opacity: 1; }
.close-button {
    position: absolute; top: 15px; right: 15px; background-color: #e5e7eb;
    border: none; width: 36px; height: 36px; border-radius: 50%;
    font-size: 1.5rem; line-height: 1; color: #6b7280; cursor: pointer;
    display: flex; justify-content: center; align-items: center; transition: all 0.3s ease;
}
.close-button:hover { background-color: #d1d5db; color: var(--secondary-color); transform: rotate(90deg); }
.form-title { text-align: center; margin-bottom: 30px; }
.form-title h2 { font-size: 2rem; font-weight: 800; background: linear-gradient(90deg, var(--secondary-color), var(--primary-color)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.form-title p { margin-top: 8px; font-size: 1.1rem; color: var(--text-body-color); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 0.95rem; color: var(--text-heading-color); }
.form-group input, .form-group select { width: 100%; padding: 14px 18px; border: 1px solid #d1d5db; border-radius: 10px; font-size: 1rem; font-family: var(--font-primary); background-color: var(--white-color); transition: border-color 0.3s, box-shadow 0.3s; }
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2); }
.system-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 10px; }
.system-options label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; padding: 12px; border: 1px solid #d1d5db; border-radius: 10px; transition: all 0.3s ease; }
.system-options input[type="radio"] { display: none; }
.system-options label::before { content: ''; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #d1d5db; transition: all 0.3s ease; }
.system-options input[type="radio"]:checked + label { background-color: #eef8ff; border-color: var(--primary-color); color: var(--primary-color); font-weight: 700; }
.system-options input[type="radio"]:checked + label::before { border-color: var(--primary-color); background-color: var(--primary-color); box-shadow: inset 0 0 0 3px var(--white-color); }
.submit-button { width: 100%; background: linear-gradient(90deg, var(--accent-color), #ff7e5f); color: var(--white-color); padding: 16px; border: none; border-radius: 10px; font-size: 1.2rem; font-weight: 700; cursor: pointer; margin-top: 15px; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3); }
.submit-button:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255, 87, 34, 0.4); }

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */
/* ==========================================================================
   7. RESPONSIVE - TỐI ƯU TOÀN DIỆN CHO MOBILE
   ========================================================================== */

/* --- Dành cho Tablet (từ 1024px trở xuống) --- */


/* --- Dành cho Tablet & Mobile (từ 991px trở xuống) --- */


/* --- Dành riêng cho Mobile (từ 767px trở xuống) --- */
/* TRONG FILE STYLE.CSS, TÌM VÀ THAY THẾ TOÀN BỘ KHỐI NÀY */

/* --- Dành riêng cho Mobile (từ 767px trở xuống) --- */


/* ==========================================================================
   8. MENU XỔ XUỐNG (DROPDOWN MENU)
   ========================================================================== */

/* Bọc ngoài của mục menu có con */
.menu-item-has-children {
    position: relative;
}

/* Thêm mũi tên xổ xuống */
.menu-item-has-children > a::after {
    content: '\f078'; /* Icon chevron down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.7rem;
    margin-left: 8px;
}

/* Menu con (ẩn mặc định) */
.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--white-color);
    list-style: none;
    padding: 10px 0;
    margin: 0;
    min-width: 280px; /* Độ rộng tối thiểu của menu con */
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    border-top: 3px solid var(--accent-color);
    z-index: 1001;
    /* Hiệu ứng */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

/* Hiển thị menu con khi hover */
.menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sub-menu li a {
    display: block;
    padding: 12px 20px;
    color: var(--text-heading-color); /* Màu chữ đen */
    text-transform: none; /* Không viết hoa */
    font-weight: 600;
    white-space: nowrap; /* Không xuống dòng */
    font-size: 0.95rem;
}

.sub-menu li a:hover {
    background-color: #f8f9fa;
    color: var(--primary-color);
}

/* Bỏ hiệu ứng gạch chân của menu cha khi hover menu con */
.sub-menu li a::after {
    display: none;
}
/* ==========================================================================
   TIN TỨC & SỰ KIỆN (TRANG CHỦ)
   ========================================================================== */
.news-section {
    background-color: #f8f9fa;

}

.news-slider {
    padding-bottom: 50px;
        overflow: hidden; 
}

.news-card {
    display: block;
    background-color: var(--white-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: var(--text-body-color);
    height: 100%; /* Đảm bảo các card cao bằng nhau */
}

.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 51, 102, 0.1);
}

.news-card-image {
    position: relative;
    width: 100%;
    padding-top: 62.5%;
}

.news-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-card-date {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: rgba(0, 51, 102, 0.8);
    color: var(--white-color);
    border-radius: 8px;
    text-align: center;
    padding: 8px 10px;
    line-height: 1;
    backdrop-filter: blur(4px);
}

.news-card-date strong {
    font-size: 1.5rem;
    display: block;
    font-weight: 800;
}

.news-card-date span {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.news-card-content {
    padding: 20px;
}

.news-card-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-heading-color);
    margin-bottom: 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    min-height: 3.08em;
}

.news-card-content p {
    font-size: 0.9rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.news-slider .swiper-button-next,
.news-slider .swiper-button-prev {
    color: var(--secondary-color);
    top: 45%;
}

.news-slider .swiper-pagination-bullet-active {
    background-color: var(--primary-color);
}

/* ==========================================================================
   TRANG DANH SÁCH TIN TỨC
   ========================================================================== */
.news-list-section {
    padding: 60px 0;
}

.news-list-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.news-list-item {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
    background: var(--white-color);
    border-radius: 12px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    text-decoration: none;
    color: var(--text-body-color);
    transition: box-shadow 0.3s ease;
}

.news-list-item:hover {
    box-shadow: 0 12px 30px rgba(0, 51, 102, 0.12);
}

.news-list-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-list-item-content {
    padding: 30px 30px 30px 0;
    display: flex;
    flex-direction: column;
}

.news-list-item-content h3 {
    font-size: 1.5rem;
    color: var(--text-heading-color);
    margin-bottom: 15px;
}

.news-list-item-content p {
    flex-grow: 1;
    margin-bottom: 20px;
}

.news-list-item-content .btn-detail-list {
    align-self: flex-start;
}


/* ==========================================================================
   TRANG CHI TIẾT TIN TỨC
   ========================================================================== */
.news-detail-section {
    padding: 60px 0;
    background-color: var(--white-color);
}

.news-detail-container {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    gap: 50px;
}

.article-image {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 30px;
}

.article-content h4 {
    font-size: 1.5rem;
    color: var(--secondary-color);
    margin-top: 40px;
    margin-bottom: 20px;
}

.article-content p, .article-content li {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.article-content ul, .article-content ol {
    padding-left: 25px;
}

.news-sidebar .sidebar-box {
    position: sticky;
    top: 100px;
}

.other-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.other-posts-list li a {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 15px;
    align-items: center;
    text-decoration: none;
    color: var(--text-body-color);
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

.other-posts-list li:last-child a {
    border-bottom: none;
}

.other-posts-list li a:hover span {
    color: var(--primary-color);
}

.other-posts-list img {
    width: 100%;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}

.other-posts-list span {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: color 0.2s;
}

/* Responsive cho trang tin tức */

/* ==========================================================================
   CSS CHO CÁC TÍNH NĂNG MỚI
   ========================================================================== */

/* --- CSS CHUNG CHO CÁC TRANG CON --- */
.benefit-list {
    list-style: none;
    padding-left: 0;
    margin: 25px 0;
}
.benefit-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    font-size: 1.05rem;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border-color);
}
.benefit-list li:last-child {
    border-bottom: none;
}
.benefit-list i {
    color: var(--accent-color);
    font-size: 1.2rem;
    margin-top: 5px;
}
   
/* --- TIN TỨC (TRANG CHỦ) --- */
.news-section { background-color: #f8f9fa; }
.news-slider { padding-bottom: 50px; }
.news-card { display: block; background-color: var(--white-color); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; color: var(--text-body-color); height: 100%; }
.news-card:hover { transform: translateY(-8px); box-shadow: 0 12px 25px rgba(0, 51, 102, 0.1); }
.news-card-image { position: relative; width: 100%; padding-top: 62.5%; }
.news-card-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.news-card-date { position: absolute; top: 15px; left: 15px; background-color: rgba(0, 51, 102, 0.8); color: var(--white-color); border-radius: 8px; text-align: center; padding: 8px 10px; line-height: 1; backdrop-filter: blur(4px); }
.news-card-date strong { font-size: 1.5rem; display: block; font-weight: 800; }
.news-card-date span { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; }
.news-card-content { padding: 20px; }
.news-card-content h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-heading-color); margin-bottom: 10px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.08em; }
.news-card-content p { font-size: 0.9rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-slider .swiper-button-next, .news-slider .swiper-button-prev { color: var(--secondary-color); top: 45%; }
.news-slider .swiper-pagination-bullet-active { background-color: var(--primary-color); }

/* --- TRANG DANH SÁCH TIN TỨC --- */
.news-list-section { padding: 60px 0; }
.news-list-container { display: grid; grid-template-columns: 1fr; gap: 40px; }
.news-list-item { display: grid; grid-template-columns: 300px 1fr; gap: 30px; background: var(--white-color); border-radius: 12px; box-shadow: 0 4px 25px rgba(0, 0, 0, 0.07); overflow: hidden; text-decoration: none; color: var(--text-body-color); transition: box-shadow 0.3s ease; }
.news-list-item:hover { box-shadow: 0 12px 30px rgba(0, 51, 102, 0.12); }
.news-list-item-image img { width: 100%; height: 100%; object-fit: cover; }
.news-list-item-content { padding: 30px 30px 30px 0; display: flex; flex-direction: column; }
.news-list-item-content h3 { font-size: 1.5rem; color: var(--text-heading-color); margin-bottom: 15px; }
.news-list-item-content p { flex-grow: 1; margin-bottom: 20px; }
.news-list-item-content .btn-detail-list { align-self: flex-start; }

/* --- TRANG CHI TIẾT TIN TỨC --- */
.news-detail-section { padding: 60px 0; background-color: var(--white-color); }
.news-detail-container { display: grid; grid-template-columns: 2.5fr 1fr; gap: 50px; }
.article-image { width: 100%; border-radius: 12px; margin-bottom: 30px; }
.article-content h4 { font-size: 1.5rem; color: var(--secondary-color); margin-top: 40px; margin-bottom: 20px; }
.article-content p, .article-content li { font-size: 1.1rem; line-height: 1.8; margin-bottom: 1rem; }
.article-content ul, .article-content ol { padding-left: 25px; }
.news-sidebar .sidebar-box { position: sticky; top: 100px; }
.other-posts-list { list-style: none; padding: 0; margin: 0; }
.other-posts-list li a { display: grid; grid-template-columns: 80px 1fr; gap: 15px; align-items: center; text-decoration: none; color: var(--text-body-color); padding: 15px 0; border-bottom: 1px solid var(--border-color); transition: background-color 0.2s; }
.other-posts-list li:last-child a { border-bottom: none; }
.other-posts-list li a:hover span { color: var(--primary-color); }
.other-posts-list img { width: 100%; height: 60px; object-fit: cover; border-radius: 8px; }
.other-posts-list span { font-weight: 600; font-size: 0.95rem; line-height: 1.4; transition: color 0.2s; }

/* --- TRANG GIỚI THIỆU --- */
.about-intro-section { padding: 80px 0; background-color: var(--white-color); }
.about-intro-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; align-items: center; }
.about-intro-image img { width: 100%; border-radius: 12px; box-shadow: 0 15px 35px rgba(0, 51, 102, 0.15); }
.about-intro-content h2 { font-size: 2.2rem; font-weight: 800; color: var(--secondary-color); margin-bottom: 20px; }
.about-intro-content p { font-size: 1.1rem; line-height: 1.8; margin-bottom: 15px; }
.mission-vision-section { padding: 80px 0; background-color: var(--background-light-color); }
.mission-vision-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.mission-card { background: var(--white-color); padding: 40px 30px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 51, 102, 0.07); transition: transform 0.3s, box-shadow 0.3s; }
.mission-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 51, 102, 0.12); }
.mission-card i { font-size: 3rem; color: var(--primary-color); margin-bottom: 20px; }
.mission-card h3 { font-size: 1.5rem; color: var(--text-heading-color); margin-bottom: 15px; }
.why-choose-us-section { padding: 80px 0; }
.why-choose-us-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; }
.why-card { background: #f8faff; border: 1px solid #e0e8ff; padding: 30px; border-radius: 12px; text-align: center; transition: background-color 0.3s, border-color 0.3s; }
.why-card:hover { background-color: #eef8ff; border-color: var(--primary-color); }
.why-card i { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 20px; display: block; }
.why-card h4 { font-size: 1.25rem; color: var(--secondary-color); margin-bottom: 10px; }

/* --- TRANG LIÊN HỆ --- */
.contact-section { padding: 80px 0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.contact-info-wrapper h3, .contact-form-wrapper h3 { font-size: 1.8rem; color: var(--secondary-color); margin-bottom: 30px; }
.campus-card { background: #f8f9fa; padding: 25px; border-radius: 12px; margin-bottom: 20px; border-left: 4px solid var(--primary-color); }
.campus-card h4 { font-size: 1.2rem; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; color: var(--text-heading-color); }
.campus-card h4 i { color: var(--primary-color); }
.campus-card p { margin: 5px 0 5px 26px; line-height: 1.6; }
#contact-page-form .form-group { margin-bottom: 20px; }
#contact-page-form input, #contact-page-form textarea { width: 100%; padding: 14px 18px; border: 1px solid #d1d5db; border-radius: 10px; font-size: 1rem; font-family: var(--font-primary); background-color: var(--white-color); transition: border-color 0.3s, box-shadow 0.3s; }
#contact-page-form input:focus, #contact-page-form textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2); }
#contact-page-form .submit-button { width: 100%; background: linear-gradient(90deg, var(--accent-color), #ff7e5f); color: var(--white-color); padding: 16px; border: none; border-radius: 10px; font-size: 1.2rem; font-weight: 700; cursor: pointer; margin-top: 15px; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3); }
#contact-page-form .submit-button:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255, 87, 34, 0.4); }
.map-section { padding: 0 0 80px 0; }
.map-container { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

/* --- RESPONSIVE CHUNG --- */





/* Responsive cho mobile */

/* === SLIDER (TRANG CHỦ) - PHIÊN BẢN CUỐI CÙNG - SỬA LỖI HIỂN THỊ === */

/* 1. Thiết lập khu vực chung của slider */
.hero-section {
    padding: 0 !important; /* Dùng !important để chắc chắn không có padding */
    line-height: 0;        /* Mẹo: Loại bỏ các khoảng trắng nhỏ do font-size gây ra */
    background-color: #e9ecef; /* Giữ lại màu nền phòng khi ảnh tải chậm */
}

/* 2. Đảm bảo các container của Swiper không tự ý thêm chiều cao */
.hero-slider,
.hero-slider .swiper-wrapper,
.hero-slider .swiper-slide {
    height: auto !important; /* Quan trọng: Ép chiều cao phải tự động theo ảnh bên trong */
}

/* 3. Đây là phần cốt lõi: Để ảnh tự quyết định chiều cao */
.hero-slider .swiper-slide img {
    width: 100%;      /* Luôn rộng 100% theo màn hình */
    height: auto;     /* Chiều cao sẽ tự động điều chỉnh theo tỷ lệ gốc của ảnh -> ĐÂY LÀ CHÌA KHÓA */
    display: block;   /* Loại bỏ khoảng trắng thừa mặc định của thẻ img */
    
    /* BỎ HOÀN TOÀN 'object-fit' đi. Chúng ta không cần nó nữa,
       vì ảnh sẽ tự lấp đầy chính nó một cách hoàn hảo. */
}
/* Trong file CSS của bạn */
.info-list .list-item.hidden {
    display: none;
}
/* ==========================================================================
   CHỨNG CHỈ NGẮN HẠN NỔI BẬT (TRANG CHỦ)
   ========================================================================== */
/* ==========================================================================
   CHỨNG CHỈ NGẮN HẠN NỔI BẬT (TRANG CHỦ) - PHIÊN BẢN NÂNG CẤP
   ========================================================================== */


/* Quan trọng: Thêm overflow: hidden để các card không bị tràn ra ngoài khi có hiệu ứng */
.featured-courses-slider {
    padding: 10px 0 50px 0; /* Thêm padding top để card không bị cắt bóng */
    overflow: hidden;
}

/* Thiết kế lại card chính */


.course-card-featured:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 51, 102, 0.12);
}

/* Phần hình ảnh */



.course-card-featured:hover .course-card-image img {
    transform: scale(1.05); /* Hiệu ứng zoom ảnh khi hover */
}

/* Tag giá tiền */
.course-card-price {
    position: absolute;
    top: 15px;
    right: -1px; /* Dịch nhẹ để bo góc đẹp hơn */
    background: linear-gradient(135deg, var(--accent-color), #ff5722);
    color: var(--white-color);
    padding: 8px 18px;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 8px 0 0 8px; /* Bo góc kiểu tag */
    box-shadow: -2px 2px 10px rgba(0,0,0,0.2);
}

/* Phần nội dung text */
.course-card-content {
    padding: 25px; /* Tăng padding */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.course-card-content h3 {
    font-size: 1.25rem; /* Tăng kích thước tiêu đề */
    font-weight: 700;
    color: var(--text-heading-color);
    margin-bottom: 15px;
    line-height: 1.4;
    min-height: 3.5em; /* 1.25rem * 1.4 * 2 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.course-card-content p {
    font-size: 0.95rem; /* Tăng kích thước mô tả */
    line-height: 1.7;
    margin-bottom: 25px; /* Tăng khoảng cách */
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

/* Footer của card */
.course-card-footer {
    margin-top: auto;
    font-weight: 700; /* Chữ đậm hơn */
    color: var(--primary-color);
    font-size: 1rem;
    display: flex; /* Dàn ngang */
    align-items: center; /* Căn giữa */
    justify-content: flex-end; /* Đẩy sang phải */
}

.course-card-footer span i {
    margin-left: 8px; /* Tăng khoảng cách icon */
    transition: transform 0.3s ease;
}

.course-card-featured:hover .course-card-footer span i {
    transform: translateX(5px);
}

/* Tùy chỉnh nút và pagination cho thoáng hơn */
.featured-courses-slider .swiper-button-next,
.featured-courses-slider .swiper-button-prev {
    color: var(--primary-color);
    background-color: rgba(255, 255, 255, 0.9);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: background-color 0.3s, color 0.3s;
}

.featured-courses-slider .swiper-button-next:hover,
.featured-courses-slider .swiper-button-prev:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.featured-courses-slider .swiper-button-next::after,
.featured-courses-slider .swiper-button-prev::after {
    font-size: 18px; /* Chỉnh kích thước icon mũi tên */
}

.featured-courses-slider .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
}

.featured-courses-slider .swiper-pagination-bullet-active {
    background-color: var(--primary-color);
    transform: scale(1.2);
}
.course-card-featured {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--white-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: var(--text-body-color);
    border: 1px solid var(--border-color);
}

.course-card-featured:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 51, 102, 0.12);
}

.course-card-image {
    position: relative;
    width: 100%;
    padding-top: 62.5%; /* Tỷ lệ 16:10 */
}

.course-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-card-price {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, var(--accent-color), #ff5722);
    color: var(--white-color);
    padding: 8px 15px;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 0 12px 0 12px;
    box-shadow: -2px 2px 10px rgba(0,0,0,0.2);
}

.course-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Quan trọng để footer đẩy xuống dưới */
}

.course-card-content h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-heading-color);
    margin-bottom: 10px;
    line-height: 1.4;
    min-height: 3.36em; /* 1.2rem * 1.4 * 2 */
}

.course-card-content p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1; /* Đẩy footer xuống */
}

.course-card-footer {
    margin-top: auto; /* Đẩy footer xuống dưới cùng */
    text-align: right;
    font-weight: 600;
    color: var(--primary-color);
}

.course-card-footer span i {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.course-card-featured:hover .course-card-footer span i {
    transform: translateX(5px);
}

/* Tùy chỉnh nút và pagination của slider chứng chỉ */
.featured-courses-slider .swiper-button-next,
.featured-courses-slider .swiper-button-prev {
    color: var(--secondary-color);
    top: 45%;
}

.featured-courses-slider .swiper-pagination-bullet-active {
    background-color: var(--primary-color);
}
/* ==========================================================================
   CSS CHO CÁC TÍNH NĂNG MỚI (NẾU CHƯA CÓ)
   ========================================================================== */

/* --- CSS CHUNG CHO CÁC TRANG CON --- */
.benefit-list { list-style: none; padding-left: 0; margin: 25px 0; }
.benefit-list li { display: flex; align-items: flex-start; gap: 15px; font-size: 1.05rem; padding: 10px 0; border-bottom: 1px dashed var(--border-color); }
.benefit-list li:last-child { border-bottom: none; }
.benefit-list i { color: var(--accent-color); font-size: 1.2rem; margin-top: 5px; }
   
/* --- TIN TỨC & SỰ KIỆN (TRANG CHỦ) --- */
.news-section { background-color: #f8f9fa; }
.news-slider { padding-bottom: 50px; }
.news-card { display: block; background-color: var(--white-color); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; color: var(--text-body-color); height: 100%; }
.news-card:hover { transform: translateY(-8px); box-shadow: 0 12px 25px rgba(0, 51, 102, 0.1); }
.news-card-image { position: relative; width: 100%; padding-top: 62.5%; }
.news-card-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.news-card-date { position: absolute; top: 15px; left: 15px; background-color: rgba(0, 51, 102, 0.8); color: var(--white-color); border-radius: 8px; text-align: center; padding: 8px 10px; line-height: 1; backdrop-filter: blur(4px); }
.news-card-date strong { font-size: 1.5rem; display: block; font-weight: 800; }
.news-card-date span { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; }
.news-card-content { padding: 20px; }
.news-card-content h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-heading-color); margin-bottom: 10px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.08em; }
.news-card-content p { font-size: 0.9rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-slider .swiper-button-next, .news-slider .swiper-button-prev { color: var(--secondary-color); top: 45%; }
.news-slider .swiper-pagination-bullet-active { background-color: var(--primary-color); }

/* --- CHỨNG CHỈ NỔI BẬT (TRANG CHỦ) --- */
.featured-courses-section {    padding-top: 60px;
    padding-bottom: 40px; padding: 40px 0; background-color: var(--white-color); }
  /* Giữ lại một chút khoảng trắng ở cuối trang */

.featured-courses-slider { padding-bottom: 50px; }
.course-card-featured { display: flex; flex-direction: column; height: 100%; background-color: var(--white-color); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 25px rgba(0, 0, 0, 0.07); transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; color: var(--text-body-color); border: 1px solid var(--border-color); }
.course-card-featured:hover { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(0, 51, 102, 0.12); }
.course-card-image { position: relative; width: 100%; padding-top: 62.5%; }
.course-card-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.course-card-price { position: absolute; top: 0; right: 0; background: linear-gradient(135deg, var(--accent-color), #ff5722); color: var(--white-color); padding: 8px 15px; font-weight: 700; font-size: 1rem; border-radius: 0 12px 0 12px; box-shadow: -2px 2px 10px rgba(0,0,0,0.2); }
.course-card-content { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.course-card-content h3 { font-size: 1.2rem; font-weight: 700; color: var(--text-heading-color); margin-bottom: 10px; line-height: 1.4; min-height: 3.36em; }
.course-card-content p { font-size: 0.9rem; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }
.course-card-footer { margin-top: auto; text-align: right; font-weight: 600; color: var(--primary-color); }
.course-card-footer span i { margin-left: 5px; transition: transform 0.3s ease; }
.course-card-featured:hover .course-card-footer span i { transform: translateX(5px); }
.featured-courses-slider .swiper-button-next, .featured-courses-slider .swiper-button-prev { color: var(--secondary-color); top: 45%; }
.featured-courses-slider .swiper-pagination-bullet-active { background-color: var(--primary-color); }

/* --- TRANG DANH SÁCH TIN TỨC --- */
.news-list-section { padding: 60px 0; }
.news-list-container { display: grid; grid-template-columns: 1fr; gap: 40px; }
.news-list-item { display: grid; grid-template-columns: 300px 1fr; gap: 30px; background: var(--white-color); border-radius: 12px; box-shadow: 0 4px 25px rgba(0, 0, 0, 0.07); overflow: hidden; text-decoration: none; color: var(--text-body-color); transition: box-shadow 0.3s ease; }
.news-list-item:hover { box-shadow: 0 12px 30px rgba(0, 51, 102, 0.12); }
.news-list-item-image img { width: 100%; height: 100%; object-fit: cover; }
.news-list-item-content { padding: 30px 30px 30px 0; display: flex; flex-direction: column; }
.news-list-item-content h3 { font-size: 1.5rem; color: var(--text-heading-color); margin-bottom: 15px; }
.news-list-item-content p { flex-grow: 1; margin-bottom: 20px; }
.news-list-item-content .btn-detail-list { align-self: flex-start; }

/* --- TRANG CHI TIẾT TIN TỨC --- */
.news-detail-section { padding: 60px 0; background-color: var(--white-color); }
.news-detail-container { display: grid; grid-template-columns: 2.5fr 1fr; gap: 50px; }
.article-image { width: 100%; border-radius: 12px; margin-bottom: 30px; }
.article-content h4 { font-size: 1.5rem; color: var(--secondary-color); margin-top: 40px; margin-bottom: 20px; }
.article-content p, .article-content li { font-size: 1.1rem; line-height: 1.8; margin-bottom: 1rem; }
.article-content ul, .article-content ol { padding-left: 25px; }
.news-sidebar .sidebar-box { position: sticky; top: 100px; }
.other-posts-list { list-style: none; padding: 0; margin: 0; }
.other-posts-list li a { display: grid; grid-template-columns: 80px 1fr; gap: 15px; align-items: center; text-decoration: none; color: var(--text-body-color); padding: 15px 0; border-bottom: 1px solid var(--border-color); transition: background-color 0.2s; }
.other-posts-list li:last-child a { border-bottom: none; }
.other-posts-list li a:hover span { color: var(--primary-color); }
.other-posts-list img { width: 100%; height: 60px; object-fit: cover; border-radius: 8px; }
.other-posts-list span { font-weight: 600; font-size: 0.95rem; line-height: 1.4; transition: color 0.2s; }

/* --- TRANG GIỚI THIỆU --- */
.about-intro-section { padding: 80px 0; background-color: var(--white-color); }
.about-intro-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; align-items: center; }
.about-intro-image img { width: 100%; border-radius: 12px; box-shadow: 0 15px 35px rgba(0, 51, 102, 0.15); }
.about-intro-content h2 { font-size: 2.2rem; font-weight: 800; color: var(--secondary-color); margin-bottom: 20px; }
.about-intro-content p { font-size: 1.1rem; line-height: 1.8; margin-bottom: 15px; }
.mission-vision-section { padding: 80px 0; background-color: var(--background-light-color); }
.mission-vision-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.mission-card { background: var(--white-color); padding: 40px 30px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 51, 102, 0.07); transition: transform 0.3s, box-shadow 0.3s; }
.mission-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 51, 102, 0.12); }
.mission-card i { font-size: 3rem; color: var(--primary-color); margin-bottom: 20px; }
.mission-card h3 { font-size: 1.5rem; color: var(--text-heading-color); margin-bottom: 15px; }
.why-choose-us-section { padding: 80px 0; }
.why-choose-us-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; }
.why-card { background: #f8faff; border: 1px solid #e0e8ff; padding: 30px; border-radius: 12px; text-align: center; transition: background-color 0.3s, border-color 0.3s; }
.why-card:hover { background-color: #eef8ff; border-color: var(--primary-color); }
.why-card i { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 20px; display: block; }
.why-card h4 { font-size: 1.25rem; color: var(--secondary-color); margin-bottom: 10px; }

/* --- TRANG LIÊN HỆ --- */
.contact-section { padding: 80px 0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.contact-info-wrapper h3, .contact-form-wrapper h3 { font-size: 1.8rem; color: var(--secondary-color); margin-bottom: 30px; }
.campus-card { background: #f8f9fa; padding: 25px; border-radius: 12px; margin-bottom: 20px; border-left: 4px solid var(--primary-color); }
.campus-card h4 { font-size: 1.2rem; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; color: var(--text-heading-color); }
.campus-card h4 i { color: var(--primary-color); }
.campus-card p { margin: 5px 0 5px 26px; line-height: 1.6; }
#contact-page-form .form-group { margin-bottom: 20px; }
#contact-page-form input, #contact-page-form textarea { width: 100%; padding: 14px 18px; border: 1px solid #d1d5db; border-radius: 10px; font-size: 1rem; font-family: var(--font-primary); background-color: var(--white-color); transition: border-color 0.3s, box-shadow 0.3s; }
#contact-page-form input:focus, #contact-page-form textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2); }
#contact-page-form .submit-button { width: 100%; background: linear-gradient(90deg, var(--accent-color), #ff7e5f); color: var(--white-color); padding: 16px; border: none; border-radius: 10px; font-size: 1.2rem; font-weight: 700; cursor: pointer; margin-top: 15px; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3); }
#contact-page-form .submit-button:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255, 87, 34, 0.4); }
.map-section { padding: 0 0 80px 0; }
.map-container { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

/* --- RESPONSIVE CHUNG --- */

/* Đoạn mã đúng này đã có sẵn trong file của bạn, chỉ cần đảm bảo nó không bị xóa */
.hero-slider .swiper-slide img {
    width: 100%;
    height: auto;     /* <-- Dòng này sẽ đảm bảo chiều cao slider đúng theo ảnh */
    display: block;
}
/* ==========================================================================
   BOX TƯ VẤN HỖ TRỢ (THÊM MỚI)
   ========================================================================== */
.contact-support-box {
    margin-top: 40px;
    padding: 25px;
    background-color: #f0faff; /* Màu nền xanh nhạt */
    border-left: 5px solid var(--primary-color); /* Đường viền xanh dương bên trái */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.1);
    line-height: 1.8;
}

.contact-support-box p {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.contact-support-box span {
    font-size: 1rem;
    display: block;
    margin-bottom: 20px;
}

.hotline-scrolling {
    background-color: var(--secondary-color);
    color: var(--white-color);
    padding: 8px 0;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
}/* ==========================================================================
   BOX TƯ VẤN HỖ TRỢ (THÊM MỚI)
   ========================================================================== */
.contact-support-box {
    margin-top: 40px;
    padding: 25px;
    background-color: #f0faff;
    border-left: 5px solid var(--primary-color);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.1);
    line-height: 1.8;
}

.contact-support-box p {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.contact-support-box span {
    font-size: 1rem;
    display: block;
    margin-bottom: 20px;
}

.hotline-scrolling {
    background-color: var(--secondary-color);
    color: var(--white-color);
    padding: 8px 0;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
}
/* ==========================================================================
   CSS NÂNG CẤP "LÀM ĐẸP HƠN" CHO TRANG CHI TIẾT
   ========================================================================== */

/* Cải thiện khả năng đọc của nội dung chính */
.course-main-content p, .course-main-content li {
    font-size: 1.1rem; /* Chữ to hơn một chút */
    line-height: 1.8;  /* Khoảng cách dòng thoáng hơn */
    color: #343a40;    /* Màu chữ sẫm hơn, dễ đọc hơn */
}

/* Nâng cấp danh sách lợi ích (benefit-list) */
.course-main-content .benefit-list {
    margin: 30px 0;
    padding-left: 0;
    list-style-type: none; /* Bỏ dấu chấm đầu dòng mặc định */
}

.course-main-content .benefit-list li {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color); /* Tạo điểm nhấn bên trái */
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start; /* Căn icon và text theo đầu dòng */
    gap: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 51, 102, 0.05);
}

.course-main-content .benefit-list li:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 51, 102, 0.1);
    border-color: var(--primary-color);
}

/* Cải thiện icon trong danh sách */
.course-main-content .benefit-list i {
    color: var(--primary-color); /* Màu icon đồng bộ */
    font-size: 1.5rem; /* Icon to hơn, nổi bật hơn */
    margin-top: 2px;
    width: 30px; /* Dành không gian cố định cho icon */
    text-align: center;
}

/* Cải thiện phần ghi chú cuối cùng */
.course-note {
    background-color: #fffbeb; /* Màu vàng nhạt cho ghi chú */
    border-left-color: #f59e0b;  /* Viền vàng */
    font-size: 1.05rem;
    font-weight: 500;
}/* ==========================================================================
   CSS NÂNG CẤP "LÀM ĐẸP HƠN" CHO TRANG CHI TIẾT
   ========================================================================== */

/* Cải thiện khả năng đọc của nội dung chính */
.course-main-content p, .course-main-content li {
    font-size: 1.1rem; 
    line-height: 1.8; 
    color: #343a40;
}

/* KHUNG NỔI BẬT LỊCH HỌC */
.schedule-highlight-box {
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 10px; /* Giảm padding để ảnh gần viền hơn */
    margin: 0 0 30px 0;
    text-align: center;
    border: 1px solid var(--border-color);
}

.schedule-image-link img {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Bo góc ảnh bên trong */
    transition: transform 0.3s ease;
}

.schedule-image-link:hover img {
    transform: scale(1.02);
}

/* Nâng cấp danh sách lợi ích (benefit-list) */
.course-main-content .benefit-list {
    margin: 30px 0;
    padding-left: 0;
    list-style-type: none;
}

.course-main-content .benefit-list li {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-color); /* Màu cam nhấn mạnh */
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 51, 102, 0.05);
}

.course-main-content .benefit-list li:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 51, 102, 0.1);
    border-color: var(--accent-color);
}

.course-main-content .benefit-list i {
    color: var(--accent-color); /* Màu cam đồng bộ */
    font-size: 1.5rem;
    margin-top: 2px;
    width: 30px;
    text-align: center;
}

/* Cải thiện phần ghi chú cuối cùng */
.course-note {
    background-color: #fffbeb; 
    border-left-color: #f59e0b;  
    font-size: 1.05rem;
    font-weight: 500;
}

/* KHUNG CTA TƯ VẤN */
.cta-support-box {
    text-align: center;
    margin: 60px 0 20px 0;
    padding: 30px 25px;
    background: linear-gradient(135deg, #f0faff, #e6f7ff);
    border: 2px solid var(--primary-color);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 123, 255, 0.15);
}

.cta-support-box .cta-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.cta-support-box h4 {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--secondary-color);
    border: none;
    padding: 0;
    margin-bottom: 10px;
}

.cta-support-box p {
    font-size: 1.1rem;
    color: var(--text-body-color);
    max-width: 600px;
    margin: 0 auto 25px auto;
    line-height: 1.7;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-cta-form, .btn-cta-zalo {
    border: none;
    padding: 14px 30px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-cta-form {
    background-color: var(--accent-color);
    color: var(--white-color);
    box-shadow: 0 4px 15px rgba(253, 126, 20, 0.4);
}
.btn-cta-form:hover {
    background-color: #e64a19;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(253, 126, 20, 0.5);
}

.btn-cta-zalo {
    background-color: #0068ff;
    color: var(--white-color);
    box-shadow: 0 4px 15px rgba(0, 104, 255, 0.4);
}
.btn-cta-zalo:hover {
    background-color: #0053cc;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 104, 255, 0.5);
}
.btn-cta-zalo i {
    font-size: 1.3em;
}/* ==========================================================================
   CSS CHO BỐ CỤC SLIDER CHỨNG CHỈ MỚI
   ========================================================================== */

/* --- Xóa bỏ và ghi đè style cũ --- */
.featured-courses-section {
    background-color: #f8f9fa; /* Màu nền xám nhạt */
}
/* Xóa bỏ hoàn toàn thiết kế card cũ */
.course-card-featured { 
    display: none !important;
}

/* --- Style cho bố cục slider và card mới --- */
.featured-courses-section.new-layout {
    padding: 50px 0;
}
.featured-courses-section.new-layout .featured-courses-slider {
    padding-bottom: 50px; /* Thêm không gian cho pagination */
    overflow: hidden; /* Quan trọng để card không bị tràn ra ngoài */
}
/* Bỏ nút next/prev cũ đi */
.featured-courses-section.new-layout .swiper-button-next,
.featured-courses-section.new-layout .swiper-button-prev {
    display: none;
}


.new-course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 51, 102, 0.12);
}

.new-course-image {
    position: relative;
    /* Không dùng padding-top nữa vì ảnh lịch học có tỉ lệ tự nhiên */
}

.new-course-image img {
    width: 100%;
    height: auto; /* Để ảnh giữ đúng tỉ lệ */
    display: block;
    border-bottom: 1px solid var(--border-color);
}

.new-course-price {
    position: absolute;
    top: 20px;
    right: 0;
    background-color: var(--accent-color);
    color: var(--white-color);
    padding: 8px 20px;
    border-radius: 20px 0 0 20px;
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.new-course-content {
    padding: 25px;
    flex-grow: 1; /* Đẩy footer xuống dưới */
    display: flex;
    flex-direction: column;
}

.new-course-content h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    line-height: 1.4;
    color: var(--secondary-color);
    min-height: 2.8em; /* 1.4em * 2 dòng */
}

.new-course-content p {
    font-size: 0.95rem;
    color: var(--text-body-color);
    line-height: 1.6;
    flex-grow: 1;
}

.new-course-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px 25px 25px;
    margin-top: auto; /* Đảm bảo footer luôn ở dưới cùng */
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
}

.new-course-footer i {
    transition: transform 0.3s ease;
}

.new-course-card:hover .new-course-footer i {
    transform: translateX(5px);
}


/* Tùy chỉnh Pagination mới cho phù hợp */
.featured-courses-slider .swiper-pagination {
    position: static; /* Đặt dưới slider thay vì đè lên */
    margin-top: 25px;
}
.featured-courses-slider .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #ccc;
    opacity: 1;
    transition: all 0.3s ease;
}

.featured-courses-slider .swiper-pagination-bullet-active {
    background-color: var(--primary-color);
    width: 30px;
    border-radius: 6px;
}

/* Thêm CSS cho card ở trang danh sách chung (để đồng bộ) */
.course-list-card {
    text-decoration: none;
}
.list-card-content h3 {
    color: var(--secondary-color);
}
/* ==========================================================================
   THIẾT KẾ MỚI CHO TRANG CHI TIẾT CHỨNG CHỈ
   ========================================================================== */

/* Header của trang chi tiết */
.new-page-header {
    background: var(--secondary-color);
    padding: 50px 0;
    text-align: left;
    margin-bottom: 0;
}
.new-page-header h1 {
    font-size: 2.5rem;
    line-height: 1.3;
}
.new-page-header .breadcrumbs {
    font-size: 1rem;
    font-weight: 500;
}
.new-page-header .breadcrumbs a:hover {
    text-decoration: underline;
}

/* Section chính của trang */
.new-course-detail-section {
    padding: 60px 0;
    background-color: #f8f9fa;
}
.new-course-detail-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: flex-start;
}

/* Cột nội dung chính */
.new-course-main-content {
    background-color: var(--white-color);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
}
.new-course-main-content h3 {
    font-size: 1.8rem;
    color: var(--secondary-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.new-course-main-content h3 i {
    color: var(--primary-color);
}
.schedule-image-container {
    margin-bottom: 40px;
}
.schedule-image-container img {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
    transition: transform 0.3s;
}
.schedule-image-container img:hover {
    transform: scale(1.02);
}
.course-description-content h4 {
    font-size: 1.5rem;
    margin-top: 40px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
}
.course-description-content p, .course-description-content li {
    font-size: 1.1rem;
    line-height: 1.8;
}
.course-description-content .benefit-list {
    padding-left: 0; list-style: none; margin-top: 20px;
}
.course-description-content .benefit-list li {
    display: flex; gap: 15px; align-items: flex-start;
    padding: 12px 0; border-bottom: 1px dashed var(--border-color);
}
.course-description-content .benefit-list li i {
    color: var(--accent-color); font-size: 1.4rem; margin-top: 5px;
}

/* Cột Sidebar */
.new-course-sidebar {
    position: sticky;
    top: 100px;
}
.sidebar-widget {
    background-color: var(--white-color);
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
}
.widget-title {
    font-size: 1.3rem;
    color: var(--secondary-color);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
.info-widget ul {
    list-style: none; padding: 0;
}
.info-widget li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0; font-size: 1rem;
    border-bottom: 1px dashed var(--border-color);
}
.info-widget li:last-child {
    border-bottom: none;
}
.info-widget li strong {
    display: flex; align-items: center; gap: 10px;
}
.info-widget li .price-tag {
    font-weight: 700; font-size: 1.1rem; color: var(--accent-color);
}
.btn-sidebar-register {
    border: none;
    cursor: pointer;
    display: block; width: 100%;
    background-color: var(--accent-color); color: var(--white-color);
    text-align: center; padding: 15px; border-radius: 8px;
    font-size: 1.1rem; font-weight: 700; text-decoration: none;
    margin-top: 25px; transition: all 0.3s;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-sidebar-register:hover {
    background-color: #e64a19; transform: translateY(-3px);
}
.quick-menu-widget ul {
    list-style: none; padding: 0;
}
.quick-menu-widget li a {
    display: block; text-decoration: none; color: var(--text-body-color);
    padding: 10px 15px; border-radius: 6px; transition: all 0.3s; font-weight: 500;
}
.quick-menu-widget li a:hover {
    background-color: #f0faff; color: var(--primary-color); transform: translateX(5px);
}

/* Khung Kêu gọi Hành động (CTA) */
.cta-support-box {
    text-align: center;
    margin-top: 60px;
    padding: 30px;
    background: linear-gradient(135deg, #f0faff, #e6f7ff);
    border-radius: 12px;
    border: 1px solid var(--primary-color);
}
.cta-support-box .cta-icon { font-size: 3rem; color: var(--primary-color); margin-bottom: 15px; }
.cta-support-box h4 {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--secondary-color);
    border: none;
    padding: 0;
    margin-bottom: 10px;
}
.cta-support-box p { font-size: 1.1rem; margin: 0 auto 25px auto; }
.cta-buttons {
    display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;
}
.btn-cta-form, .btn-cta-zalo {
    border: none;
    cursor: pointer;
    text-decoration: none; padding: 12px 25px; border-radius: 50px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s;
}
.btn-cta-form { background-color: var(--accent-color); color: var(--white-color); }
.btn-cta-zalo { background-color: #0068ff; color: var(--white-color); }

/* Responsive */

/* ==========================================================================
   THIẾT KẾ MỚI HOÀN TOÀN CHO TRANG CHI TIẾT CHỨNG CHỈ
   ========================================================================== */

/* 1. HERO HEADER */
.course-detail-hero {
    background: linear-gradient(120deg, var(--secondary-color), #004a8e), url('/picture/hero-bg-pattern.svg'); /* Tùy chọn: thêm ảnh pattern cho đẹp */
    background-blend-mode: multiply;
    background-size: cover;
    color: var(--white-color);
    padding: 50px 0 60px;
    text-align: left;
    border-bottom: 5px solid var(--accent-color);
    margin-bottom: 0 !important; /* Ghi đè CSS cũ */
}
.course-detail-hero .breadcrumbs { color: rgba(255, 255, 255, 0.8); margin-bottom: 15px; font-weight: 500; }
.course-detail-hero .breadcrumbs a { color: var(--white-color); text-decoration: none; transition: opacity 0.3s; }
.course-detail-hero .breadcrumbs a:hover { text-decoration: underline; opacity: 0.9; }
.course-detail-hero h1 {
    font-size: 3rem; /* Tăng kích thước title */
    font-weight: 800;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.4);
    margin: 0;
}
.course-detail-hero .course-summary-headline {
    font-size: 1.25rem;
    margin-top: 15px;
    max-width: 800px; /* Giới hạn độ dài dòng cho dễ đọc */
    opacity: 0.9;
}


/* 2. BỐ CỤC CHUNG CỦA TRANG */
.course-detail-page-layout {
    background-color: #f4f7fa; /* Nền xám nhạt hiện đại */
    padding: 60px 0;
}
.layout-grid {
    display: grid;
    grid-template-columns: 1fr 380px; /* Cột chính linh hoạt, sidebar cố định */
    gap: 40px;
    align-items: flex-start; /* Quan trọng để sidebar sticky hoạt động đúng */
}
/* ==========================================================================
   THIẾT KẾ MỚI CHO TRANG CHI TIẾT CHỨNG CHỈ (BỔ SUNG)
   ========================================================================== */

/* 1. HERO HEADER */
.course-detail-hero {
    background: linear-gradient(120deg, var(--secondary-color), #004a8e);
    background-size: cover;
    color: var(--white-color);
    padding: 50px 0 60px;
    text-align: left;
    border-bottom: 5px solid var(--accent-color);
    margin-bottom: 0 !important; 
}
.course-detail-hero .breadcrumbs { 
    color: rgba(255, 255, 255, 0.8); 
    margin-bottom: 15px; 
    font-weight: 500; 
}
.course-detail-hero .breadcrumbs a { 
    color: var(--white-color); 
    text-decoration: none; 
    transition: opacity 0.3s; 
}
.course-detail-hero .breadcrumbs a:hover { 
    text-decoration: underline; 
    opacity: 0.9; 
}
.course-detail-hero h1 {
    font-size: 3rem; 
    font-weight: 800;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.4);
    margin: 0;
}
.course-detail-hero .course-summary-headline {
    font-size: 1.25rem;
    margin-top: 15px;
    max-width: 800px;
    opacity: 0.9;
}

/* 2. BỐ CỤC CHUNG CỦA TRANG */
.course-detail-page-layout {
    background-color: #f4f7fa;
    padding: 60px 0;
}
.layout-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: flex-start;
}

/* 3. CỘT NỘI DUNG CHÍNH */
.course-detail-main {
    background-color: var(--white-color);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 51, 102, 0.07);
    padding: 30px;
}

.schedule-image-container {
    background-color: var(--background-light-color);
    border: 1px solid var(--border-color);
    padding: 25px;
    border-radius: 10px;
}
.schedule-image-container h3 {
    font-size: 1.8rem;
    color: var(--secondary-color);
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
}
.schedule-image-container h3 i { color: var(--primary-color); }
.schedule-image-container img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.schedule-image-container a:hover img {
    transform: scale(1.02);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.image-zoom-notice {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    font-size: 0.9rem;
    margin-top: 15px;
}
/* Style cho nội dung HTML cũ */
.course-html-content {
    padding: 40px 0 20px 0;
}
.course-html-content .cta-support-box {
    margin-top: 50px;
    background: #f8faff;
    border: 1px dashed var(--primary-color);
}
.course-html-content .cta-support-box h4 { font-size: 1.5rem; }
.course-note-alert {
    background-color: #fffbeb;
    border-left: 5px solid #f59e0b;
    padding: 20px;
    margin: 30px 0 0 0;
    border-radius: 8px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}
.course-note-alert i {
    font-size: 1.5rem;
    color: #f59e0b;
    margin-top: 5px;
}
.course-note-alert strong { display: block; margin-bottom: 5px; font-size: 1.1rem; color: #78350f; }
.course-note-alert p { margin: 0; color: #78350f; line-height: 1.7; }

/* 4. CỘT SIDEBAR */
.course-sidebar { position: sticky; top: 100px; }
.sidebar-widget {
    background-color: var(--white-color);
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 8px 30px rgba(0, 51, 102, 0.07);
    overflow: hidden; 
}
.widget-title {
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    color: var(--white-color);
    font-size: 1.25rem;
    font-weight: 700;
    padding: 18px 25px;
    margin: 0;
}

.info-list-widget { list-style: none; padding: 15px 25px 25px; margin: 0; }
.info-list-widget li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px dashed #e0e0e0;
    font-size: 1rem;
}
.info-list-widget li:last-child { border-bottom: none; }
.info-list-widget strong { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.info-list-widget i { color: var(--primary-color); width: 20px; text-align: center; }
.price-highlight {
    font-size: 1.1rem;
    background-color: #ffe4e6;
    color: #be123c;
    padding: 5px 14px;
    border-radius: 50px;
    font-weight: 700;
}
.price-item { padding-top: 20px !important; }

.btn-register {
    display: flex; align-items: center; justify-content: center;
    gap: 10px;
    width: calc(100% - 50px);
    margin: 0 25px 25px 25px;
    background: var(--accent-color);
    border: none; cursor: pointer;
    text-align: center;
    padding: 18px; 
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--white-color);
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(253, 126, 20, 0.4);
    border-radius: 8px;
}
.btn-register:hover {
    background: #e64a19;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(253, 126, 20, 0.5);
}
.sidebar-widget .btn-register {
    width: auto;
    margin: 0;
    border-radius: 0;
    padding: 20px;
}


.other-courses-widget { list-style: none; padding: 15px; margin: 0; }
.other-courses-widget li a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    padding: 14px; 
    border-radius: 8px;
    color: var(--text-heading-color);
    font-weight: 600;
    transition: all 0.3s;
}
.other-courses-widget li i { color: var(--accent-color); }
.other-courses-widget li a:hover {
    background-color: #f0faff;
    color: var(--primary-color);
    transform: translateX(5px);
}
.other-courses-widget li a:hover i { color: var(--primary-color); }


/* 5. RESPONSIVE *//* ==========================================================================
   CSS CHO GIAO DIỆN CHI TIẾT CHỨNG CHỈ NÂNG CẤP
   ========================================================================== */

/* 1. HERO HEADER */
.course-detail-hero {
    background: linear-gradient(120deg, var(--secondary-color), #004a8e);
    color: var(--white-color);
    padding: 50px 0 60px;
    text-align: left;
    border-bottom: 5px solid var(--accent-color);
}
.course-detail-hero .breadcrumbs { color: rgba(255, 255, 255, 0.8); margin-bottom: 15px; font-weight: 500; }
.course-detail-hero .breadcrumbs a { color: var(--white-color); text-decoration: none; }
.course-detail-hero .breadcrumbs a:hover { text-decoration: underline; }
.course-detail-hero h1 { font-size: 3rem; font-weight: 800; text-shadow: 2px 2px 8px rgba(0,0,0,0.4); margin: 0; }
.course-detail-hero .course-summary-headline { font-size: 1.25rem; margin-top: 15px; max-width: 800px; opacity: 0.9; }

/* 2. BỐ CỤC CHUNG */
.course-detail-page-layout { background-color: #f4f7fa; padding: 60px 0; }
.layout-grid { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: flex-start; }

/* 3. CỘT NỘI DUNG CHÍNH */
.course-detail-main { background-color: var(--white-color); border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 51, 102, 0.07); padding: 40px; }
.course-main-image { width: 100%; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); transition: transform 0.3s; }
.course-main-image:hover { transform: scale(1.02); }
.info-block { margin-bottom: 40px; }
.info-block h3 { font-size: 1.6rem; color: var(--secondary-color); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
.info-block h3 i { color: var(--primary-color); }
.info-block p { font-size: 1.1rem; line-height: 1.8; color: var(--text-body-color); }

.icon-list { list-style: none; padding: 0; margin: 0; }
.icon-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 1.05rem; line-height: 1.7; margin-bottom: 15px; }
.icon-list li i { color: var(--accent-color); font-size: 1.2rem; margin-top: 5px; }

.legal-requirement-box { background-color: #fffbeb; border: 1px solid #fde68a; border-left: 5px solid #f59e0b; padding: 25px; border-radius: 8px; margin-bottom: 40px; }
.legal-requirement-box h3 { border-bottom: none; margin-bottom: 10px; color: #92400e; }
.legal-requirement-box h3 i { color: #f59e0b; }
.legal-requirement-box p { font-size: 1.05rem; color: #92400e; }

/* 4. SIDEBAR */
.course-sidebar { position: sticky; top: 100px; }
.sidebar-widget { background-color: var(--white-color); border-radius: 12px; margin-bottom: 30px; box-shadow: 0 8px 30px rgba(0, 51, 102, 0.07); overflow: hidden; }
.widget-title { background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); color: var(--white-color); font-size: 1.25rem; font-weight: 700; padding: 18px 25px; margin: 0; }
.info-list-widget { list-style: none; padding: 15px 25px 25px; margin: 0; }
.info-list-widget li { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px dashed #e0e0e0; }
.info-list-widget li:last-child { border-bottom: none; }
.info-list-widget strong { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.price-highlight { font-size: 1.1rem; background-color: #ffe4e6; color: #be123c; padding: 5px 14px; border-radius: 50px; font-weight: 700; }
.price-item { padding-top: 20px !important; }

.btn-register { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: var(--accent-color); border: none; cursor: pointer; padding: 18px; font-size: 1.2rem; font-weight: 700; color: var(--white-color); transition: all 0.3s; box-shadow: 0 4px 15px rgba(253, 126, 20, 0.4); }
.btn-register:hover { background: #e64a19; transform: scale(1.03); box-shadow: 0 8px 20px rgba(253, 126, 20, 0.5); }
.audience-list { padding: 25px; }

.other-courses-widget { list-style: none; padding: 15px; margin: 0; }
.other-courses-widget li a { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 14px; border-radius: 8px; color: var(--text-heading-color); font-weight: 600; transition: all 0.3s; }
.other-courses-widget li i { color: var(--primary-color); }
.other-courses-widget li a:hover { background-color: #f0faff; color: var(--primary-color); transform: translateX(5px); }

/* 5. RESPONSIVE */

/* ==========================================================================
   KHỐI CHỨNG CHỈ NỔI BẬT (TRANG CHỦ) - PHIÊN BẢN TỐI ƯU
   ========================================================================== */

/* Phần bao bọc chung cho cả khu vực */
.featured-courses-section {
    background-color: #f8f9fa; /* Màu nền xám nhạt hiện đại */
    padding-top: 80px;
    padding-bottom: 80px;
}

/* Container của slider */
.featured-courses-slider {
    padding-bottom: 50px; /* Thêm không gian cho các nút pagination bên dưới */
}

/* 1. Thiết kế Card chính (Thẻ <a>) */
.course-card {
    display: flex; /* Bắt buộc để sử dụng flex-direction */
    flex-direction: column; /* Sắp xếp các phần tử bên trong theo chiều dọc */
    height: 100%; /* Đảm bảo các card trong slider có chiều cao bằng nhau */
    background-color: #ffffff;
    border-radius: 16px; /* Bo góc mềm mại hơn */
    overflow: hidden; /* Quan trọng để ảnh bo góc và hiệu ứng zoom không bị tràn */
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0, 51, 102, 0.08); /* Đổ bóng tinh tế */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hiệu ứng mượt mà */
}

.course-card:hover {
    transform: translateY(-8px); /* Hiệu ứng nổi lên khi di chuột */
    box-shadow: 0 12px 30px rgba(0, 51, 102, 0.12);
}

/* 2. Khung ảnh - Phần quan trọng nhất để đồng bộ giao diện */
.course-card-image {
    position: relative; /* Nền cho các phần tử con bên trong (ảnh, tag giá) */
    width: 100%;
    /* KỸ THUẬT PADDING-TOP: tạo ra một box có tỷ lệ khung hình 3:2 (cao = 2/3 rộng) */
    /* Nếu bạn muốn tỉ lệ 4:3, hãy dùng padding-top: 75%; */
    padding-top: 66.66%; 
    background-color: #eee; /* Màu nền chờ khi ảnh đang tải */
}

.course-card-image img {
    position: absolute; /* Đặt ảnh lấp đầy khung .course-card-image */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo ảnh lấp đầy khung mà không bị méo, phần thừa sẽ bị cắt */
    transition: transform 0.4s ease;
}

.course-card:hover .course-card-image img {
    transform: scale(1.05); /* Hiệu ứng zoom ảnh nhẹ khi hover */
}

/* 3. Tag Lệ phí */
.course-fee-badge {
    position: absolute;
    top: 15px;
    right: 0;
    background: linear-gradient(135deg, #fd7e14, #ff5722); /* Màu cam gradient nổi bật */
    color: #ffffff;
    padding: 6px 15px;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 20px 0 0 20px; /* Bo góc kiểu "tag" */
    box-shadow: -2px 2px 10px rgba(0,0,0,0.2);
}

/* 4. Khung nội dung text */
.course-card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Rất quan trọng: Giúp khung này co giãn và đẩy footer xuống dưới cùng */
}

.course-card-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #003366; /* var(--secondary-color) */
    line-height: 1.4;
    margin: 0 0 10px 0;
    /* Kỹ thuật giới hạn văn bản trong 2 dòng để tiêu đề không quá dài */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    min-height: 3.5em; /* Giữ chỗ cho 2 dòng, tránh layout bị giật khi JS tải */
}

.course-card-content p {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 20px;
    color: #495057; /* var(--text-body-color) */
    /* Giới hạn văn bản trong 3 dòng */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    flex-grow: 1; /* Cho phép phần mô tả co giãn, chiếm hết không gian còn lại */
}

/* 5. Footer của card (phần "Xem chi tiết") */
.course-card-footer {
    margin-top: auto; /* Quan trọng: Đẩy footer xuống đáy của khung .course-card-content */
    padding: 0 25px 25px 25px;
    display: flex;
    justify-content: flex-end; /* Đẩy nội dung sang phải */
    align-items: center;
    font-weight: 700;
    color: #0d6efd; /* var(--primary-color) */
    font-size: 1rem;
}

.course-card-footer span {
    transition: color 0.3s ease;
}

.course-card-footer i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.course-card:hover .course-card-footer i {
    transform: translateX(5px); /* Hiệu ứng mũi tên di chuyển khi hover */
}

.course-card:hover .course-card-footer span {
    color: #fd7e14; /* var(--accent-color) */
}

/* 6. Tùy chỉnh Pagination của Swiper (các dấu chấm tròn) */
.featured-courses-slider .swiper-pagination {
    position: static; /* Đưa pagination ra khỏi slider, nằm bên dưới */
    margin-top: 25px;
}

.featured-courses-slider .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #ccc;
    opacity: 1;
    transition: all 0.3s ease;
}

.featured-courses-slider .swiper-pagination-bullet-active {
    background-color: #0d6efd; /* var(--primary-color) */
    width: 28px; /* Chuyển thành thanh ngang khi được chọn */
    border-radius: 5px;
}
/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.site-footer-main {
    background-color: var(--secondary-color);
    color: rgba(255, 255, 255, 0.8);
    padding: 60px 0 30px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-about img {
    height: 80px;
    margin-bottom: 15px;
}

.footer-about h4, .footer-links h4 {
    color: var(--white-color);
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: var(--white-color);
    padding-left: 5px;
}

.footer-bottom-text {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
}

/* --- Responsive cho Footer --- */

/* ==========================================================================
   CSS CHO CÁC KHỐI MỚI TRÊN TRANG CHỦ
   ========================================================================== */

/* --- 1. KHỐI TẠI SAO CHỌN TRƯỜNG --- */
.why-choose-us-section {
    background-color: #ffffff;
}

.why-choose-us-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.why-card {
    text-align: center;
    padding: 30px;
    background: #f8faff;
    border: 1px solid #e0e8ff;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.why-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 51, 102, 0.1);
    background-color: #ffffff;
    border-color: var(--primary-color);
}

.why-card-icon {
    font-size: 2.8rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    display: inline-block;
    width: 80px;
    height: 80px;
    line-height: 80px;
    background-color: #eef8ff;
    border-radius: 50%;
}

.why-card h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.why-card p {
    font-size: 0.95rem;
    line-height: 1.7;
}

/* --- 2. KHỐI NHỮNG CON SỐ ẤN TƯỢNG --- */
.stats-section {
    background: var(--secondary-color) url('/picture/stats-bg.png'); /* Tùy chọn: thêm ảnh nền mờ */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 60px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    color: #ffffff;
    text-align: center;
}

.stat-item h3.stat-number {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.stat-item p {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.9;
}


/* --- 3. KHỐI CẢM NHẬN HỌC VIÊN --- */
.testimonials-section {
    background-color: var(--background-light-color);
}
.testimonials-slider {
    padding-bottom: 50px;
}

.testimonial-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 8px 30px rgba(0, 51, 102, 0.08);
    margin: 20px; /* Thêm margin để bóng không bị cắt */
    position: relative;
    text-align: center;
}

.testimonial-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 4px solid var(--white-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
}

.testimonial-quote-icon {
    font-size: 2rem;
    color: var(--primary-color);
    opacity: 0.2;
    margin-bottom: 15px;
}

.testimonial-quote {
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.8;
    margin-bottom: 25px;
    color: var(--text-body-color);
}

.testimonial-author h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--secondary-color);
}

.testimonial-author span {
    font-size: 0.9rem;
    color: #6c757d;
}

.testimonials-slider .swiper-pagination-bullet-active {
    background: var(--primary-color);
}
.header-main-banner {
    padding: 0; /* Xóa khoảng trống trên và dưới */
    line-height: 0;
     overflow: hidden; /* Mẹo để xóa khoảng trắng nhỏ thừa do font chữ */
}
.header-main-banner img {
    width: 100%;       /* Bắt buộc: Chiếm hết chiều rộng màn hình */
    height: auto;      /* Chiều cao tự động để không làm méo ảnh */
    display: block;    /* Quan trọng: Loại bỏ khoảng trắng thừa mặc định dưới thẻ img */
}
/* ==========================================================================
   TINH CHỈNH KÍCH THƯỚC CARD VÀ NÚT ĐĂNG KÝ (NHỎ HƠN)
   ========================================================================== */

/* 1. Thu nhỏ nút "Đăng Ký" */
.footer-btn-register {
    padding: 6px 12px;       /* Giảm padding */
    font-size: 0.8rem;       /* Giảm cỡ chữ */
    font-weight: 600;        /* Giảm độ đậm */
}

/* 2. Giảm chiều cao của ảnh (thay đổi tỷ lệ khung hình) */
.course-card-image {
    padding-top: 56.25%; /* Tỷ lệ 16:9, làm cho ảnh thấp hơn đáng kể */
}

/* 3. Giảm padding và cỡ chữ bên trong card */
.course-card-content {
    padding: 15px; /* Giảm padding tổng thể của nội dung */
}

.course-card-content h3 {
    font-size: 1rem;      /* Giảm cỡ chữ tiêu đề */
    min-height: 2.8em;    /* Cập nhật chiều cao tối thiểu cho 2 dòng */
}

.course-card-content p {
    font-size: 0.85rem;   /* Giảm cỡ chữ mô tả */
    margin-bottom: 10px;  /* Giảm khoảng cách dưới mô tả */
}

/* 4. Giảm padding của footer chứa nút */
.course-card-footer-actions {
    padding: 0 15px 15px 15px;
}
/* ==========================================================================
   THIẾT KẾ LẠI FOOTER CARD CHỨNG CHỈ (2 NÚT)
   ========================================================================== */

/* 1. Bố cục chung cho khu vực chứa 2 nút */
.course-card-footer-actions {
    margin-top: auto;
    padding: 0 20px 20px 20px;
    display: flex;
    justify-content: space-between; /* Đẩy 2 nút ra 2 góc */
    align-items: center;
    gap: 10px;
}

/* 2. Style cho text "Xem chi tiết" */
.footer-link-detail {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.9rem;
    text-decoration: none; /* Bỏ gạch chân nếu có */
    transition: color 0.3s ease;
}
.footer-link-detail i {
    margin-left: 4px;
    transition: transform 0.3s ease;
}
.course-card:hover .footer-link-detail {
    color: var(--accent-color); /* Đổi màu khi hover card */
}
.course-card:hover .footer-link-detail i {
    transform: translateX(4px); /* Hiệu ứng mũi tên di chuyển */
}

/* 3. Style cho nút "Đăng Ký" mới (nhỏ, màu nhẹ) */
.footer-btn-register {
    background-color: #eef8ff;   /* Màu xanh dương rất nhạt */
    color: var(--primary-color); /* Chữ màu xanh dương */
    border: 1px solid #ddeeff;   /* Viền xanh nhạt cho đẹp */
    padding: 6px 14px;           /* Kích thước nhỏ */
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.footer-btn-register:hover {
    background-color: #dbefff;   /* Hơi đậm hơn khi di chuột */
    color: var(--secondary-color);
    border-color: #cce7ff;
    transform: translateY(-1px);
}

/* 4. Ghi đè lên style của nút cũ để đảm bảo không bị xung đột */
button.footer-btn-register {
    box-shadow: none;
}
button.footer-btn-register:hover {
    box-shadow: none;
}
/* ==========================================================================
   TINH CHỈNH KHOẢNG TRẮNG VÀ KÍCH THƯỚC TIÊU ĐỀ
   ========================================================================== */

/* 1. Giảm khoảng cách phía trên của khối "Thông Tin Tuyển Sinh" */


/* 2. Thu nhỏ tất cả các tiêu đề và giảm khoảng trắng xung quanh chúng */
.section-title h2 {
    font-size: 2.2rem;      /* Giảm cỡ chữ (trước đây là 2.5rem) */
    margin-bottom: 40px;  /* Giảm khoảng trắng BÊN DƯỚI (trước đây là 60px) */
    padding-bottom: 15px; /* Giảm khoảng trắng cho gạch chân (trước đây là 20px) */
}

/* 3. Tinh chỉnh lại khoảng cách của các khối còn lại cho đồng bộ
.featured-courses-section, .news-section {
    padding-top: 40px; /* Giảm từ 60px xuống 40px */
 */
 /* ==========================================================================
   TINH CHỈNH LẠI KHOẢNG TRẮNG GIỮA CÁC KHỐI
   ========================================================================== */

/* Giảm khoảng trắng dưới của khối Chứng Chỉ */
/* .featured-courses-section {
    padding-top: 10px;
    padding-bottom: 10px; /* Giảm padding dưới */


/* Giảm mạnh khoảng trắng trên của khối Tin Tức */

/* Ghi đè lại để đảm bảo khoảng trắng trên khối Tuyển sinh là hợp lý */
#admission-section {
    padding-top: 0px;
    padding-bottom: 0px;
}
/* ==========================================================================
   NÂNG CẤP TRANG CHI TIẾT CHỨNG CHỈ (BẢNG PHÍ, NÚT NỔI, KHÓA HỌC KHÁC)
   ========================================================================== */

/* 1. Style cho Bảng Lệ Phí */
.fee-schedule-block .table-responsive {
    overflow-x: auto; /* Cho phép cuộn ngang trên mobile nếu bảng quá rộng */
}
.fee-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    margin-top: 15px;
}
.fee-table th, .fee-table td {
    border: 1px solid var(--border-color);
    padding: 12px 15px;
    text-align: left;
}
.fee-table th {
    background-color: var(--background-light-color);
    font-weight: 700;
    color: var(--secondary-color);
}
.fee-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}
.fee-table td:first-child {
    text-align: center;
}
.fee-table td:last-child {
    font-weight: 600;
    color: var(--accent-color);
}

/* 2. Style cho Thanh Đăng Ký Nổi (Mobile) */
.floating-register-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--white-color);
    padding: 15px;
    display: none; /* Mặc định ẩn trên desktop */
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    z-index: 999;
}
.floating-register-bar .course-info {
    display: flex;
    flex-direction: column;
}
.course-title-float {
    font-weight: 700;
    font-size: 1rem;
    color: var(--secondary-color);
}
.course-fee-float {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--accent-color);
}
.btn-register-float {
    background-color: var(--accent-color);
    color: var(--white-color);
    border: none;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(253, 126, 20, 0.3);
}

/* 3. Style cho Danh Sách Khóa Học Khác (Có Ảnh) */
.other-courses-widget li a {
    display: flex;
    align-items: center;
    gap: 15px;
}
.other-course-thumb {
    width: 60px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0; /* Ngăn ảnh bị co lại */
}
.other-course-title {
    line-height: 1.4;
}

/* 4. Responsive: Hiển thị thanh nổi trên mobile, ẩn sidebar */

/* ==========================================================================
   STYLE CHO CỤM NÚT LIÊN HỆ NỔI
   ========================================================================== */

/* 1. Khung chứa chung */
#floating-contact-buttons {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column; /* Xếp các nút theo chiều dọc */
    gap: 12px; /* Khoảng cách giữa các nút */
    z-index: 1000;
}

/* 2. Style chung cho các nút */
.floating-btn {
    width: 55px;
    height: 55px;
    color: var(--white-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative; /* Để tooltip định vị theo nút */
}

.floating-btn:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
/* ==========================================================================
   GHI ĐÈ TRIỆT ĐỂ KHOẢNG TRẮNG - GIẢI PHÁP CUỐI CÙNG
   ========================================================================== */

/* 1. Thiết lập padding chung cho TẤT CẢ các khối section */
section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

/* 2. Điều chỉnh riêng cho các khối đặc biệt */

/* Khối slider đầu trang thì không cần padding */
.hero-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Khối tuyển sinh ngay dưới slider, có thể cần thêm chút khoảng trắng ở trên */
#admission-section {
    padding-top: 10px !important;
}

/* Khối footer, có thể cần thêm chút khoảng trắng ở trên */
.site-footer-main {
    padding-top: 10px !important;
}

/* Ghi đè trực tiếp và triệt để padding của khối tin tức */
.news-section {
    padding: 10px 0 !important;
}
/* 3. Màu sắc riêng cho từng nút */
.register-btn {
    background: linear-gradient(135deg, var(--accent-color), #ff5722);
}
.zalo-btn {
    background: #0068ff;
}
.hotline-btn {
    background: #25d366; /* Màu xanh lá của WhatsApp/Line */
    animation: pulse-hotline 2s infinite; /* Hiệu ứng nhấp nháy cho hotline */
}

/* 4. Tooltip (chữ chú thích khi hover) */
.floating-btn::before {
    content: attr(data-tooltip);
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 15px;
    padding: 6px 12px;
    background-color: var(--secondary-color);
    color: var(--white-color);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.floating-btn:hover::before {
    opacity: 1;
    visibility: visible;
}

/* 5. Hiệu ứng nhấp nháy cho nút Hotline */
@keyframes pulse-hotline {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    }
}

/* 6. Responsive cho Mobile */

/* ==========================================================================
   NÂNG CẤP HIỆU ỨNG RUNG LẮC MẠNH HƠN
   ========================================================================== */

/* 1. Định nghĩa keyframe cho hiệu ứng lắc mạnh hơn */
@keyframes strong-shake-animation {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(-15deg); }
    20% { transform: rotate(15deg); }
    30% { transform: rotate(-15deg); }
    40% { transform: rotate(15deg); }
    50% { transform: rotate(0deg); }
    /* 50% còn lại là thời gian nghỉ trước khi lặp lại */
}

/* 2. Áp dụng hiệu ứng vào các nút (trừ nút hotline ra) */
.floating-btn.register-btn,
.floating-btn.zalo-btn {
    animation: strong-shake-animation 3s ease-in-out infinite; /* Lặp lại sau mỗi 3 giây */
}

/* 3. Hiệu ứng PULSE (nhấp nháy) đặc biệt cho nút Hotline */
@keyframes pulse-hotline-strong {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}
.floating-btn.hotline-btn {
    /* Sử dụng hiệu ứng pulse cho hotline để nó nổi bật nhất */
    animation: pulse-hotline-strong 2s infinite;
}

/* 4. Tạo độ trễ để các nút không lắc cùng lúc */
.floating-btn.zalo-btn {
    animation-delay: 0.5s; /* Zalo sẽ lắc sau 0.5 giây */
}
.floating-btn.register-btn {
    animation-delay: 1s; /* Đăng ký sẽ lắc sau 1 giây */
}

/* Khi người dùng di chuột vào, TẠM DỪNG animation và reset vị trí */
#floating-contact-buttons:hover .floating-btn {
    animation-play-state: paused;
    transform: translateY(0) scale(1.0) !important; /* Dừng hiệu ứng hover cũ */
}

/* Style hover mới, đơn giản hơn */
#floating-contact-buttons .floating-btn:hover {
    transform: scale(1.15) !important; /* Phóng to nhẹ khi di chuột vào từng nút */
    background-color: var(--secondary-color); /* Đổi màu nền cho đồng bộ */
}
/* ==========================================================================
   CHUẨN HÓA KHOẢNG TRẮNG GIỮA CÁC KHỐI (SECTION)
   ========================================================================== */

/* 1. Thiết lập padding chung cho TẤT CẢ các khối section */
section {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* 2. Điều chỉnh riêng cho các khối đặc biệt nếu cần */

/* Khối slider đầu trang thì không cần padding */
.hero-section {
    padding-top: 0;
    padding-bottom: 0;
}

/* Khối tuyển sinh ngay dưới slider, có thể cần thêm chút khoảng trắng ở trên */
#admission-section {
    padding-top: 10px;
}

/* Khối footer, có thể cần thêm chút khoảng trắng ở trên */
.site-footer-main {
    padding-top: 60px;
}
/* ==========================================================================
   STYLE CHO KHỐI NGÀNH HỌC (HỆ CHÍNH QUY & VĂN BẰNG 2)
   ========================================================================== */

.major-grid-section {
    background-color: var(--white-color);
}

.major-grid {
    display: grid;
    /* Hiển thị 3 cột trên desktop, 2 trên tablet, 1 trên mobile */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}






/* ==========================================================================
   NÂNG CẤP GIAO DIỆN CARD NGÀNH HỌC (DẠNG SLIDER)
   ========================================================================== */

.major-slider-section {
    padding: 40px 0;
}

.major-slider {
    padding-bottom: 50px;
      padding: 20px 0 50px 0;
       overflow: hidden;/* Thêm không gian cho pagination */
}

/* Thiết kế card mới */
.major-card-v2 {
    display: block;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 350px; /* Chiều cao cố định cho card */
    box-shadow: 0 10px 30px rgba(0, 51, 102, 0.1);
    transition: box-shadow 0.3s ease;
}

.major-card-v2:hover {
    box-shadow: 0 15px 40px rgba(0, 51, 102, 0.2);
}

/* Ảnh nền */
.major-card-v2-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.major-card-v2:hover .major-card-v2-bg {
    transform: scale(1.05);
}

/* Lớp phủ màu tối */
.major-card-v2-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 33, 66, 0.85) 20%, rgba(0, 33, 66, 0) 60%);
    transition: background 0.3s ease;
}

.major-card-v2:hover .major-card-v2-overlay {
    background: linear-gradient(to top, rgba(0, 33, 66, 0.95) 30%, rgba(0, 33, 66, 0.1) 70%);
}

/* Nội dung text */
.major-card-v2-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 25px;
    color: var(--white-color);
    transform: translateY(0);
    transition: transform 0.4s ease;
}

.major-card-v2:hover .major-card-v2-content {
    transform: translateY(-10px);
}

.major-card-v2-content h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.3;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.7);
}

/* Nút "Xem chi tiết" */
.major-card-v2-link {
    display: inline-block;
    font-weight: 700;
    margin-top: 15px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    color: var(--accent-color);
}

.major-card-v2:hover .major-card-v2-link {
    opacity: 1;
    transform: translateY(0);
}

.major-card-v2-link i {
    margin-left: 5px;
}

/* Tùy chỉnh Pagination cho slider ngành học */
.major-slider .swiper-pagination-bullet {
    background-color: var(--primary-color);
}
/* ==========================================================================
   NÂNG CẤP FOOTER
   ========================================================================== */

.site-footer-main {
    background-color: #007bff; /* Màu xanh dương sáng hơn */
    color: rgba(255, 255, 255, 0.9);
    padding: 60px 0 20px 0;
    font-size: 0.95rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-title {
    color: var(--white-color);
    font-size: 1.2rem;
    margin-bottom: 25px;
    padding-bottom: 10px;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    display: inline-block;
}

/* Cột thông tin liên hệ */
.footer-contact .school-name-footer {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white-color);
    margin-bottom: 20px;
}

.footer-contact ul {
    list-style: none;
    padding: 0;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    line-height: 1.6;
}

.footer-contact li i {
    color: var(--white-color);
    margin-top: 5px;
    width: 16px;
    text-align: center;
}

/* Cột Fanpage và Bản đồ */
.fb-page-plugin,
.map-container-footer {
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff; /* Nền trắng cho iframe */
    line-height: 0; /* Loại bỏ khoảng trắng thừa */
}

/* Dòng bản quyền */
.footer-bottom-text {
    text-align: center;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Responsive cho Footer */

/* ==========================================================================
   NÂNG CẤP GIAO DIỆN TRANG CHI TIẾT NGÀNH HỌC
   ========================================================================== */

/* 1. Hero Header mới */
.detail-hero {
    background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
    padding: 50px 0;
    color: var(--white-color);
}
.detail-hero .breadcrumbs a {
    color: var(--white-color);
    opacity: 0.8;
    text-decoration: none;
}
.detail-hero .breadcrumbs a:hover {
    opacity: 1;
}
.detail-hero h1 {
    font-size: 2.8rem;
    font-weight: 800;
    margin: 10px 0;
}
.detail-hero .hero-summary {
    font-size: 1.2rem;
    max-width: 800px;
    opacity: 0.9;
}

/* 2. Bố cục chung 2 cột */
.detail-layout {
    padding: 60px 0;
    background-color: #f8f9fa;
}
/* TRONG FILE STYLE.CSS - TÌM VÀ THAY THẾ TOÀN BỘ .detail-grid VÀ CÁC ĐOẠN LIÊN QUAN */

.detail-grid {
    display: grid;
    /* 
       Cách bố cục ổn định nhất:
       - Cột 1 (main content): 1fr -> Chiếm hết không gian còn lại.
       - Cột 2 (sidebar): 380px -> Luôn có chiều rộng cố định là 380px.
    */
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: flex-start;
}

/* 
   SỬA LỖI QUAN TRỌNG NHẤT:
   Thêm thuộc tính này để cho phép cột chính co lại, ngay cả khi nội dung bên trong
   (như bảng biểu) quá rộng. Nó sẽ ngăn cái bảng "phá vỡ" layout.
*/
.detail-main-content {
    min-width: 0;
}

/* 
   Đảm bảo bảng biểu tự động tràn và có thể cuộn ngang trên mobile
   nếu nó vẫn quá rộng.
*/
/* TRONG FILE STYLE.CSS - TÌM .detail-main-image-container img VÀ SỬA LẠI */

.detail-main-image-container img {
    width: 100%;
    height: auto; /* SỬA LẠI THÀNH auto ĐỂ GIỮ ĐÚNG TỶ LỆ ẢNH */
    display: block; 
    transition: transform 0.3s ease;
}

/* Responsive cho màn hình nhỏ hơn (ví dụ: tablet) */


/* 3. Cột nội dung chính */
.detail-main-content {
    background: var(--white-color);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
}
.main-detail-image {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 30px;
}
.content-block h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.content-block h3 i {
    color: var(--accent-color);
}
.content-block p {
    line-height: 1.8;
    margin-bottom: 20px;
}
.styled-list {
    list-style: none;
    padding-left: 0;
}
.styled-list li {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
    line-height: 1.7;
    font-size: 1.05rem;
}
.styled-list .icon-list-item {
    color: var(--accent-color);
    margin-top: 6px;
}

/* 4. Cột Sidebar mới */
.detail-sidebar .sidebar-widget-v2 {
    background: var(--white-color);
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
    border-top: 4px solid var(--primary-color);
    position: sticky;
    top: 100px;
}
.sidebar-widget-v2 h4 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 15px;
}
.sidebar-widget-v2 p {
    font-size: 0.95rem;
    margin-bottom: 20px;
}
.btn-register-sidebar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    background-color: var(--accent-color);
    color: var(--white-color);
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-register-sidebar:hover {
    background-color: #e64a19;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(253, 126, 20, 0.4);
}

/* 5. Responsive */

/* ==========================================================================
   SIDEBAR - DANH SÁCH TIN TỨC MỚI NHẤT
   ========================================================================== */

.sidebar-widget-v2 .sidebar-news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-widget-v2 .sidebar-news-list li {
    margin-bottom: 15px;
}

.sidebar-widget-v2 .sidebar-news-list li:last-child {
    margin-bottom: 0;
}

.sidebar-news-item {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}

.sidebar-news-thumb {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0; /* Ngăn ảnh bị co lại */
}

.sidebar-news-title {
    font-weight: 600;
    color: var(--text-heading-color);
    line-height: 1.5;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.sidebar-news-item:hover .sidebar-news-title {
    color: var(--primary-color);
}
/* ==========================================================================
   NÂNG CẤP HERO HEADER TRANG CHI TIẾT (VERSION 2)
   ========================================================================== */

.detail-hero-v2 {
    position: relative;
    padding: 80px 0;
    color: var(--white-color);
    text-align: center; /* Căn giữa nội dung */
    overflow: hidden;
}

.detail-hero-v2 .container {
    position: relative; /* Đảm bảo nội dung nổi lên trên lớp phủ */
    z-index: 2;
}

/* Ảnh nền */
.detail-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(5px); /* Làm mờ ảnh nền */
    transform: scale(1.1); /* Phóng to nhẹ để không thấy viền mờ */
    z-index: 0;
}

/* Lớp phủ màu tối */
.detail-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 51, 102, 0.7); /* Màu xanh đậm với độ trong suốt 70% */
    z-index: 1;
}

/* Tinh chỉnh lại text bên trong */
.detail-hero-v2 .breadcrumbs {
    margin-bottom: 20px;
    font-weight: 500;
}
.detail-hero-v2 .breadcrumbs a {
    color: var(--white-color);
    opacity: 0.8;
}
.detail-hero-v2 h1 {
    font-size: 3.5rem;
    font-weight: 800;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
    margin: 0 0 15px 0;
}
.detail-hero-v2 .hero-summary {
    font-size: 1.3rem;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0.9;
    line-height: 1.6;
}

/* Xóa style cũ để tránh xung đột */
.detail-hero {
    display: none;
}
/* ==========================================================================
   GIAO DIỆN TRANG TUYỂN SINH CAO ĐẲNG
   ========================================================================== */

.admission-page-section {
    padding: 60px 0;
}

.admission-block {
    margin-bottom: 60px;
}

.admission-block h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--secondary-color);
    text-align: center;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.admission-block h2 i {
    color: var(--accent-color);
}

/* Lưới các ngành học */
.admission-major-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.admission-major-card {
    text-decoration: none;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 25px rgba(0, 51, 102, 0.1);
    transition: all 0.3s ease;
}
.admission-major-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 51, 102, 0.15);
}

.admission-major-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.admission-major-title {
    background-color: var(--secondary-color);
    padding: 15px;
    text-align: center;
}

.admission-major-title h3 {
    color: var(--white-color);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

/* Khung thông tin */
.admission-info-box {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-left: 5px solid var(--primary-color);
    padding: 30px;
    border-radius: 8px;
    font-size: 1.1rem;
    line-height: 1.8;
}

.admission-info-box ul {
    list-style: none;
    padding-left: 0;
    margin: 20px 0;
}

.admission-info-box li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.admission-info-box i {
    color: var(--primary-color);
}
/* ==========================================================================
   NÂNG CẤP GIAO DIỆN SLIDER NGÀNH HỌC V4 (Tối ưu Responsive)
   ========================================================================== */

.major-slider-section {
    padding: 40px 0;
    background-color: #f8f9fa;
}

.major-slider {
    padding: 20px 0 50px 0;
    overflow: visible; /* Cho phép slide lòi ra ngoài */
}

/* 1. Thiết kế card chung */
.major-card-v2 {
    display: block;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 350px;
    box-shadow: 0 10px 30px rgba(0, 51, 102, 0.1);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.major-card-v2:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 51, 102, 0.15);
}

/* Ảnh nền và hiệu ứng */
.major-card-v2-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.major-card-v2:hover .major-card-v2-bg {
    transform: scale(1.05);
}

/* Lớp phủ màu */
.major-card-v2-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0, 21, 41, 0.9) 10%, rgba(0, 33, 66, 0) 60%);
}

/* Nội dung text */
.major-card-v2-content {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 25px;
    color: var(--white-color);
}
.major-card-v2-content h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.3;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.7);
}
.major-card-v2-link {
    display: inline-block;
    font-weight: 700;
    margin-top: 10px;
    color: var(--accent-color);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}
.major-card-v2:hover .major-card-v2-link {
    opacity: 1;
    transform: translateY(0);
}

/* 2. Style CHỈ DÀNH CHO MOBILE (Màn hình dưới 768px) */


/* 3. Pagination */
.major-slider .swiper-pagination {
    bottom: 10px;
}
.major-slider .swiper-pagination-bullet-active {
    background-color: var(--primary-color);
}
/* ==========================================================================
   NÂNG CẤP CUỐI CÙNG CHO TRANG CHI TIẾT
   ========================================================================== */

/* 1. Khối "Tại sao chọn học" */
.why-choose-major {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 30px;
    margin-top: 40px;
}
.highlight-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 cột */
    gap: 25px;
    margin-top: 20px;
}
.highlight-item {
    display: flex;
    align-items: center;
    gap: 15px;
}
.highlight-item i {
    font-size: 2rem;
    color: var(--primary-color);
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #e0e8ff;
    border-radius: 50%;
}
.highlight-text {
    display: flex;
    flex-direction: column;
}
.highlight-text strong {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--secondary-color);
}
.highlight-text span {
    font-size: 0.95rem;
    color: var(--text-body-color);
}

/* 2. Tinh chỉnh Sidebar */
.detail-sidebar .sidebar-widget-v2 {
    background: var(--white-color);
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 8px 30px rgba(0, 51, 102, 0.07);
    border: 1px solid #e9ecef;
    overflow: hidden;
}
.sidebar-widget-v2 h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin: 25px 25px 15px 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sidebar-widget-v2 h4 i {
    color: var(--primary-color);
}
.sidebar-widget-v2 p {
    font-size: 0.95rem;
    margin: 0 25px 20px 25px;
    line-height: 1.6;
}
.btn-register-sidebar {
    width: calc(100% - 50px);
    margin: 0 25px 25px 25px;
}

/* 3. Responsive cho khối "Tại sao" */

/* TRONG FILE STYLE.CSS - TÌM VÀ THAY THẾ TOÀN BỘ ĐOẠN @media (max-width: 768px) */


.sidebar-widget, .widget-title, .register-widget {
    /* Bạn có thể xóa các class này nếu muốn, hoặc để trống như này */
}
/* ==========================================================================
   NÂNG CẤP GIAO DIỆN TRANG CHI TIẾT CHỨNG CHỈ V2 - PHIÊN BẢN NỔI BẬT
   ========================================================================== */

/* 1. Thanh thông tin chính */
.info-bar {
    display: flex;
    justify-content: space-between; /* Đẩy các mục ra 2 bên */
    align-items: center;
    gap: 30px; /* Khoảng cách giữa cụm thông tin và nút */
    background-color: var(--white-color);
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
    border: 1px solid #e9ecef;
    margin-bottom: 30px; /* Thêm khoảng cách với phần bên dưới */
}

/* Container cho các mục thông tin bên trái */
.info-bar-grid { /* Giữ nguyên tên class nhưng đổi thành flexbox */
    display: flex;
    gap: 45px; /* Tăng khoảng cách giữa các mục */
    align-items: center;
    flex-wrap: wrap; /* Cho phép xuống hàng trên màn hình nhỏ */
}

/* Từng mục thông tin (Lệ phí, Ngày thi...) */
.info-bar-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.info-bar-item i {
    font-size: 28px; /* Icon to hơn, nổi bật hơn */
    color: var(--primary-color);
    width: 40px;
    text-align: center;
}

.info-bar-item div {
    display: flex;
    flex-direction: column;
}

/* Nhãn (Lệ phí, Ngày thi) */
.info-bar-item span {
    font-size: 13px;
    font-weight: 500;
    color: #6c757d; /* Màu xám cho nhãn */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Giá trị (2,500,000đ, Mở hàng tháng) */
.info-bar-item strong {
    font-size: 18px;
    font-weight: 700;
    color: var(--secondary-color, #212529); /* Dùng màu phụ hoặc màu đen */
}

/* 2. NÚT KÊU GỌI HÀNH ĐỘNG - THAY THẾ HOÀN TOÀN .btn-view-all */
/* **Lưu ý: Bạn cần đổi tên class trong HTML từ "btn-view-all" thành "btn-register-now" */
.btn-register-now {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 700;
    color: var(--white-color) !important; /* Ghi đè màu chữ */
    /* Hiệu ứng màu Gradient nổi bật */
    background-image: linear-gradient(45deg, #0d6efd, #0dcaf0);
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.4);
    white-space: nowrap; /* Tránh nút bị xuống dòng chữ */
}

.btn-register-now:hover {
    transform: translateY(-3px); /* Hiệu ứng nhấc lên khi hover */
    box-shadow: 0 7px 20px rgba(13, 110, 253, 0.5);
    background-image: linear-gradient(45deg, #0b5ed7, #0aa8c2); /* Đậm màu hơn khi hover */
}

.btn-register-now i {
    transition: transform 0.3s ease;
    font-size: 1em !important; /* Đảm bảo icon trong nút có kích thước phù hợp */
    color: var(--white-color) !important;
}

.btn-register-now:hover i {
    transform: translateX(5px); /* Mũi tên di chuyển khi hover */
}


/* 3. Responsive cho thanh thông tin */

/* ==========================================================================
   NÂNG CẤP GIAO DIỆN TRANG CHI TIẾT NGÀNH HỌC
   ========================================================================== */

/* --- Cấu trúc chung cho khối nội dung xen kẽ ảnh và chữ --- */
.content-image-block {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
    margin-bottom: 40px;
}

.content-image-block .text-container,
.content-image-block .image-container {
    flex: 1;
    min-width: 300px; /* Đảm bảo không bị quá hẹp trên màn hình nhỏ */
}

/* --- Bố cục xen kẽ --- */
/* Mặc định: chữ bên trái, ảnh bên phải */
.content-image-block.layout-right {
    flex-direction: row;
}

/* Đảo ngược: ảnh bên trái, chữ bên phải */
.content-image-block.layout-left {
    flex-direction: row-reverse;
}

/* --- Định dạng hình ảnh trong nội dung --- */
.content-image-block .image-container {
    text-align: center;
}

.content-image-block .image-container a {
    display: block;
    border-radius: 12px;
    overflow: hidden; /* Đảm bảo ảnh bo góc đúng */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-image-block .image-container a:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.content-image-block .image-container img {
    width: 100%;
    height: auto;
    display: block; /* Loại bỏ khoảng trắng dưới ảnh */
}

.image-caption {
    font-size: 0.9em;
    font-style: italic;
    color: #666;
    margin-top: 10px;
}

/* --- Thư viện ảnh ở cột bên (Sidebar Gallery) --- */
.sidebar-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 25px 25px; /* Giữ padding đồng nhất với các widget khác */
}

.sidebar-gallery-grid a {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    position: relative; /* Để tạo hiệu ứng overlay */
}

/* Hiệu ứng overlay khi hover */
.sidebar-gallery-grid a::after {
    content: '\f00e'; /* Icon kính lúp của FontAwesome */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-gallery-grid a:hover::after {
    opacity: 1;
}

.sidebar-gallery-grid img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.sidebar-gallery-grid a:hover img {
    transform: scale(1.1);
}

/* --- Responsive cho bố cục xen kẽ trên mobile --- */

/* ==========================================================================
   CSS CHO HIỆU ỨNG "LẤP LÓ" CỦA SLIDER CHỨNG CHỈ
   ========================================================================== */

/* CHỈ áp dụng trên màn hình nhỏ (mobile & tablet) */


/* Dấu * cho các trường bắt buộc */
.form-group label .required {
    color: #dc3545; /* Màu đỏ */
    margin-left: 4px;
}

/* Chia 2 cột cho SĐT và Ngày sinh */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Trường nhập ngày sinh */
#dateOfBirth {
    color: var(--text-body-color); /* Hiển thị chữ màu xám khi chưa chọn */
}
#dateOfBirth:focus,
#dateOfBirth:valid {
    color: var(--text-heading-color); /* Chuyển sang màu đen khi đã chọn */
}

/* Trường ghi chú */
#note {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 1rem;
    font-family: var(--font-primary);
    background-color: var(--white-color);
    transition: border-color 0.3s, box-shadow 0.3s;
    resize: vertical; /* Cho phép người dùng kéo dãn theo chiều dọc */
}
#note:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

/* Responsive cho grid trên mobile */

/* ==========================================================================
   TỐI ƯU WIDGET MẪU CHỨNG CHỈ
   ========================================================================== */

/* 1. Thiết lập chung cho widget */
.sidebar-widget-v2.certificate-widget {
    padding: 0; /* Bỏ padding mặc định để ảnh chiếm toàn bộ */
    border: none; /* Bỏ viền mặc định */
}

/* 2. Tiêu đề của widget */
.sidebar-widget-v2.certificate-widget h4 {
    margin: 25px; /* Giữ lại khoảng cách cho tiêu đề */
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

/* 3. Khung chứa ảnh (thẻ a) */
.certificate-preview-link {
    display: block;
    margin: 0 25px 25px 25px; /* Giữ khoảng cách xung quanh ảnh */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color);
}

.certificate-preview-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* 4. Thẻ ảnh bên trong */
.certificate-preview-link img {
    width: 100%;
    height: auto; /* **QUAN TRỌNG: Để ảnh tự co giãn theo chiều rộng** */
    display: block; /* Loại bỏ khoảng trắng thừa */
}
/* ==========================================================================
   7. RESPONSIVE - TỐI ƯU TOÀN DIỆN CHO MOBILE
   ========================================================================== */

/* --- Dành cho Tablet (từ 1024px trở xuống) --- */
@media (max-width: 1024px) {
    .header-super-top {
        display: none; /* Ẩn thanh hotline và tìm kiếm cho gọn */
    }
}

/* --- Dành cho Tablet & Mobile (từ 991px trở xuống) --- */
@media (max-width: 991px) {
    /* === SỬA LỖI MENU VỠ TRÊN ĐIỆN THOẠI === */
    .header-bottom .container {
        justify-content: space-between;
        padding-left: 15px; /* Giảm padding để logo và nút gần nhau hơn */
    }
    /* Thêm logo nhỏ vào thanh menu khi cuộn */
    .header-bottom .container::before {
        content: '';
        display: block;
        background-image: url('/picture/logo-3.png');
        background-size: contain;
        background-repeat: no-repeat;
        width: 45px;
        height: 45px;
    }
    .mobile-menu-button {
        display: block; /* Hiện nút 3 gạch */
    }
    .main-navigation, .header-bottom .cta-button {
        display: none; /* Ẩn menu desktop */
    }
    /* Style cho menu khi được MỞ RA */
    .header-bottom.nav-open .main-navigation {
        display: flex;
        position: absolute;
        top: 100%; /* Nằm ngay dưới thanh header */
        left: 0;
        width: 100%;
        background-color: var(--secondary-color);
        flex-direction: column; /* Xếp các mục menu theo chiều dọc */
        align-items: stretch;
        box-shadow: 0 5px 10px rgba(0,0,0,0.2);
        /* max-height: 80vh; /* Giới hạn chiều cao để không quá dài */
        /* overflow-y: auto; Cho phép cuộn nếu menu quá dài */ 
    }
    .main-navigation a {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 18px 25px; /* Tăng padding cho dễ bấm */
    }
    .sub-menu {
        display: none !important; /* Luôn ẩn menu con trên mobile */
    }
    /* Hiển thị lại nút Đăng Ký bên trong menu đã mở */
    .header-bottom.nav-open .cta-button {
        display: block;
        margin: 15px 20px;
        width: calc(100% - 40px);
        text-align: center;
    }
}
.header-main-banner {
    overflow: hidden; /* Lệnh này sẽ ẩn đi bất kỳ nội dung nào bị tràn và không tạo thanh cuộn */
}
/* --- Dành riêng cho Mobile (từ 767px trở xuống) --- */
@media (max-width: 767px) {
    /* Font size & Layout chung */
    html {
        font-size: 15px;
    }
    section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .section-title h2 {
        font-size: 1.8rem;
    }

    /* === SỬA LỖI CÁC CỘT BỊ TRÀN (FOOTER, CONTACT...) === */
    .footer-grid,
    .contact-grid,
    .about-intro-grid {
        grid-template-columns: 1fr; /* QUAN TRỌNG: Chuyển tất cả về 1 cột */
    }
    .footer-col {
        text-align: center; /* Căn giữa các tiêu đề và iframe */
    }
    /* Căn trái lại danh sách địa chỉ cho dễ đọc */
    .footer-contact ul {
        text-align: left;
        display: inline-block;
        margin: 0 auto;
    }
    .fb-page-plugin, .map-container-footer {
        margin: 0 auto;
    }

    /* Sửa lỗi các slider bị "lấp ló" khó chịu */
    .major-slider .swiper-slide,
    .featured-courses-slider .swiper-slide {
        width: 85%; /* Cho phép nhìn thấy một phần của slide kế bên */
        transition: transform 0.4s ease, opacity 0.4s ease;
    }
    .major-slider .swiper-slide:not(.swiper-slide-active),
    .featured-courses-slider .swiper-slide:not(.swiper-slide-active) {
        transform: scale(0.9); /* Thu nhỏ các slide không được chọn */
        opacity: 0.7; /* Làm mờ đi */
    }

    /* Tối ưu các nút liên hệ nổi */
    #floating-contact-buttons {
        bottom: 20px;
        right: 15px;
        gap: 10px;
    }
    .floating-btn {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }
    .floating-btn::before {
        display: none; /* Ẩn tooltip trên mobile */
    }
}

/* ==========================================================================
   SỬA LỖI SLIDER/BANNER CHÍNH (QUAN TRỌNG)
   ========================================================================== */
/* Đoạn code này đảm bảo slider luôn co giãn đúng theo tỷ lệ của ảnh */
.hero-section {
    padding: 0 !important;
    line-height: 0;
}
.hero-slider .swiper-slide img {
    width: 100%;
    height: auto; /* <-- Dòng này sẽ đảm bảo chiều cao slider đúng theo ảnh */
    display: block;
}/* ==========================================================================
   SỬA LỖI BỐ CỤC VỠ TRÊN TRANG CHI TIẾT (MOBILE)
   ========================================================================== */

/* 1. Cho phép cột nội dung chính co giãn linh hoạt */
.detail-main-content,
.course-detail-main,
.article-content {
    min-width: 0; /* QUAN TRỌNG: Sửa lỗi cột bị ép lại */
}

/* 2. Đảm bảo ảnh và bảng biểu không làm vỡ layout */
.detail-main-content img,
.course-detail-main img,
.article-content img {
    max-width: 100%;
    height: auto;
}
.detail-main-content .table-responsive,
.course-detail-main .table-responsive {
    overflow-x: auto;
}

/* 3. Quy tắc responsive cho bố cục 2 cột */
@media (max-width: 992px) {
    .detail-grid,
    .layout-grid,
    .news-detail-container {
        grid-template-columns: 1fr; /* Chuyển về 1 cột duy nhất */
    }
    
    .detail-sidebar,
    .course-sidebar {
        margin-top: 40px; /* Thêm khoảng cách khi sidebar chuyển xuống dưới */
        position: static; /* Bỏ chế độ dính (sticky) trên mobile */
    }
}
/* ==========================================================================
   SỬA LỖI HIỂN THỊ TRANG TIN TỨC TRÊN MOBILE
   ========================================================================== */

/* Áp dụng cho các màn hình có chiều rộng tối đa là 768px (máy tính bảng và điện thoại) */
@media (max-width: 768px) {

    /* Chuyển layout của mỗi tin tức từ 2 cột thành 1 cột */
    .news-list-item {
        grid-template-columns: 1fr; /* Chỉ còn 1 cột duy nhất, tự động xếp dọc */
        gap: 0; /* Bỏ khoảng trống giữa 2 cột cũ */
    }

    /* Đảm bảo ảnh có chiều cao hợp lý, không bị quá cao hoặc quá thấp */
    .news-list-item-image img {
        height: 200px; /* Chiều cao cố định cho ảnh trên mobile */
        width: 100%;
        object-fit: cover;
    }
    
    /* Điều chỉnh lại khoảng cách cho phần nội dung chữ */
    .news-list-item-content {
        padding: 20px; /* Căn lề đều 4 cạnh cho đẹp mắt */
    }

    /* Có thể thu nhỏ tiêu đề một chút để cân đối hơn trên mobile */
    .news-list-item-content h3 {
        font-size: 1.2rem;
    }
}/* ==========================================================================
   MEGA MENU - MENU ĐA CẤP
   ========================================================================== */

/* 1. Bọc ngoài của mục menu cha */
.mega-menu-parent {
    position: static; /* Quan trọng: để menu con có thể rộng 100% */
}

/* Mũi tên xổ xuống */
.mega-menu-parent > a::after {
    content: '\f078';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.7rem;
    margin-left: 8px;
    transition: transform 0.3s ease;
}

/* 2. Khung bọc ngoài của Mega Menu (ẩn mặc định) */
.mega-menu-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--white-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-top: 3px solid var(--accent-color);
    padding: 30px 0;
    
    /* Hiệu ứng */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 1000;
}

/* Hiển thị Mega Menu khi hover */
.mega-menu-parent:hover .mega-menu-wrapper {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.mega-menu-parent:hover > a::after {
    transform: rotate(180deg);
}

/* 3. Lưới chia cột bên trong Mega Menu */
.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Chia làm 4 cột */
    gap: 30px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Tiêu đề của mỗi cột */
.mega-menu-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--secondary-color);
    text-transform: uppercase;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

/* Danh sách link trong mỗi cột */
.mega-menu-list {
    list-style: none;
    padding: 0;
}

.mega-menu-list li a {
    display: block;
    padding: 8px 0;
    color: var(--text-body-color);
    font-weight: 500;
    text-transform: none; /* Không viết hoa chữ thường */
    font-size: 0.95rem;
    transition: all 0.2s ease;
}
.mega-menu-list li a:hover {
    color: var(--primary-color);
    padding-left: 8px;
}
.mega-menu-list li a::after {
    display: none; /* Bỏ gạch chân của menu cha */
}

/* 4. Responsive cho Mega Menu trên điện thoại */
@media (max-width: 991px) {
    /* Ẩn hoàn toàn mega menu trên mobile */
    .mega-menu-wrapper {
        display: none !important;
    }
}
/* ==========================================================================
   TRANG TỔNG QUAN TUYỂN SINH (PHIÊN BẢN 4 MỤC)
   ========================================================================== */
.admission-overview-section {
    background-color: #f8f9fa;
    padding: 60px 0;
}

.system-grid {
    display: grid;
    /* Hiển thị 2 cột trên màn hình lớn, 1 cột trên mobile */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    max-width: 900px; /* Giới hạn độ rộng để 2 cột không quá xa nhau */
    margin: 0 auto; /* Căn giữa lưới */
}

.system-card {
    display: flex;
    flex-direction: column;
    background-color: var(--white-color);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
    position: relative;
}

.system-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0, 51, 102, 0.12);
}

.system-card-image {
    width: 100%;
    padding-top: 56.25%; /* Tỷ lệ 16:9 */
    position: relative;
    overflow: hidden;
}

.system-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.system-card:hover .system-card-image img {
    transform: scale(1.05);
}

.system-card-content {
    padding: 25px;
    flex-grow: 1;
    padding-right: 60px;
}

.system-card-subtitle {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.system-card-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--secondary-color);
    margin: 0 0 10px 0;
}

.system-card-description {
    font-size: 0.95rem;
    color: var(--text-body-color);
    line-height: 1.6;
}

.system-card-arrow {
    position: absolute;
    top: 50%;
    right: 25px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background-color: var(--accent-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: transform 0.3s ease, background-color 0.3s ease, opacity 0.3s;
    opacity: 0;
}

.system-card:hover .system-card-arrow {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}/* ==========================================================================
   NÂNG CẤP BỐ CỤC CARD KHÓA HỌC (NÚT BÊN TRONG)
   ========================================================================== */

/* 1. Biến phần nội dung thành một flex container */
.course-card-content {
    display: flex;
    flex-direction: column; /* Xếp các mục theo chiều dọc */
    flex-grow: 1; /* Cho phép nó lấp đầy không gian còn lại trong card */
}

/* 2. Cho phép đoạn mô tả co giãn, đẩy các nút xuống dưới */
.course-card-content p {
    flex-grow: 1; /* Rất quan trọng: Nó sẽ chiếm hết không gian thừa */
}

/* 3. Style cho khu vực chứa nút ở cuối card */
.course-card-footer-actions {
    margin-top: 20px; /* Tạo khoảng cách với đoạn mô tả ở trên */
    padding-top: 15px; /* Tạo khoảng cách bên trong */
    border-top: 1px solid #f0f0f0; /* Thêm đường kẻ ngăn cách tinh tế */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 4. Style cho nút "Xem chi tiết" */
.footer-link-detail {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* 5. Style cho nút "Đăng Ký" */
.footer-btn-register {
    background-color: #eef8ff;   /* Màu xanh dương rất nhạt */
    color: var(--primary-color); /* Chữ màu xanh dương */
    border: 1px solid transparent; /* Bỏ viền cũ */
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.footer-btn-register:hover {
    background-color: var(--primary-color);   /* Đổi nền khi hover */
    color: var(--white-color); /* Đổi chữ khi hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.2);
}
/* Hoàn thiện link cho card khóa học */
.course-card-image-link,
.course-card-title-link {
    text-decoration: none;
    color: inherit;
}

.course-card-title-link h3 {
    transition: color 0.3s ease;
}

.course-card-title-link:hover h3 {
    color: var(--primary-color);
}
/* ==========================================================================
   KHỐI TIN TỨC VÀ FORM ĐĂNG KÝ (FIX CHIỀU CAO)
   ========================================================================== */


/* 1. Lưới chính chia 2 cột */
.news-layout-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: flex-start;
}

/* 2. Cột Tin tức bên trái */
.news-main-column .section-title-v2 {
    border-left: 5px solid var(--primary-color);
    padding-left: 15px;
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.news-main-column .section-title-v2 h3 {
    font-size: 1.8rem;
    color: var(--secondary-color);
    margin: 0;
}
.news-main-column .view-all-link {
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.9rem;
}

/* 3. Bố cục của cột tin tức */
.news-main-column {
    display: flex;
    flex-direction: column;
    /* QUAN TRỌNG: Đặt chiều cao bằng với form */
    height: 650px; /* Chiều cao này PHẢI bằng với chiều cao của iframe */
}

/* Bài viết nổi bật */
.featured-news-card {
    display: block;
    text-decoration: none;
    margin-bottom: 20px;
    flex-shrink: 0; /* Không cho bài viết này co lại */
}
/* QUAN TRỌNG: Giới hạn chiều cao của ảnh */
.featured-news-image {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
    height: 250px; /* Đặt chiều cao CỐ ĐỊNH cho ảnh */
}
.featured-news-image img {
    width: 100%;
    height: 100%; /* Đảm bảo ảnh lấp đầy khung */
    object-fit: cover; /* Cắt ảnh để vừa khung mà không bị méo */
    display: block;
    transition: transform 0.3s ease;
}
.featured-news-card:hover .featured-news-image img {
    transform: scale(1.03);
}
.featured-news-content h3 {
    font-size: 1.2rem; /* Giảm cỡ chữ tiêu đề cho gọn */
    line-height: 1.4;
    margin-bottom: 8px;
    transition: color 0.3s;
    /* Giới hạn 2 dòng */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.featured-news-card:hover h3 {
    color: var(--primary-color);
}
.news-date {
    font-size: 0.85rem;
    color: #dc3545;
    font-weight: 600;
}

/* Danh sách các tin khác (Cho phép cuộn) */
.other-news-list {
    flex-grow: 1; /* Lấp đầy không gian còn lại */
    overflow-y: auto; /* Tự động hiện thanh cuộn nếu cần */
    padding-right: 10px;
}
.other-news-item {
    display: flex;
    gap: 15px;
    text-decoration: none;
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--border-color);
    margin-bottom: 15px;
}
.other-news-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.other-news-thumb {
    width: 100px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.other-news-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-heading-color);
    margin-bottom: 5px;
    transition: color 0.3s;
}
.other-news-item:hover h4 {
    color: var(--primary-color);
}

/* 4. Cột Form đăng ký bên phải */
.news-sidebar-column .sidebar-form-container {
    position: sticky;
    top: 100px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.news-sidebar-column .registration-iframe {
    width: 100%;
    height: 650px; /* Chiều cao CỐ ĐỊNH cho form */
    border: none;
    display: block;
}

/* 5. Responsive cho Mobile */
@media (max-width: 991px) {
    .news-layout-grid {
        grid-template-columns: 1fr; /* Chuyển về 1 cột */
    }
    .news-main-column {
        height: auto; /* Bỏ giới hạn chiều cao trên mobile */
    }
    .other-news-list {
        overflow-y: visible; /* Tắt cuộn trong */
        height: auto;
    }
    .news-sidebar-column .sidebar-form-container {
        position: static;
        margin-top: 40px;
    }
}/* ==========================================================================
   TINH CHỈNH GIAO DIỆN KHỐI TIN TỨC
   ========================================================================== */

/* Thêm hiệu ứng nhẹ nhàng cho bài viết nổi bật */
.featured-news-card {
    background-color: #fdfdfd;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    margin-bottom: 25px;
}

/* Làm cho các tin tức nhỏ trông gọn gàng hơn */
.other-news-item {
    background-color: transparent;
    padding: 15px 0;
    border-top: 1px solid #e9ecef;
    margin-bottom: 0;
    border-bottom: 0;
}
.other-news-item:first-child {
    border-top: none;
    padding-top: 0;
}
.news-list-vertical {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 15px;
    padding-right: 5px; /* Giảm padding để thanh cuộn gần hơn */
}/* ==========================================================================
   KHỐI TIN TỨC VÀ FORM (BỐ CỤC MẪU - TỰ CUỘN)
   ========================================================================== */



/* 1. Lưới chính 2 cột */
.news-layout-grid-v3 {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: flex-start;
}

/* 2. Cột Tin tức bên trái */
.news-main-column-v3 .section-title-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 5px solid var(--primary-color);
    padding-left: 15px;
    margin-bottom: 25px;
}
.news-main-column-v3 .section-title-v2 h3 {
    font-size: 1.8rem;
    color: var(--secondary-color);
    margin: 0;
}

/* 3. Lưới nội dung tin tức (1 chính, 1 phụ) */
.news-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

/* Cột tin nổi bật */
.featured-news-card-v3 {
    display: block;
    text-decoration: none;
}
.featured-news-image-v3 {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
}
.featured-news-image-v3 img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}
.featured-news-card-v3:hover .featured-news-image-v3 img {
    transform: scale(1.05);
}
.featured-news-content-v3 h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-heading-color);
    line-height: 1.5;
    margin-bottom: 10px;
    transition: color 0.3s;
}
.featured-news-card-v3:hover h3 {
    color: var(--primary-color);
}
.news-date-v3 {
    font-size: 0.85rem;
    color: #dc3545;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
}
.featured-news-content-v3 p {
    font-size: 0.9rem;
    color: var(--text-body-color);
    line-height: 1.6;
}

/* Cột danh sách tin nhỏ (QUAN TRỌNG: HIỆU ỨNG CUỘN) */
.news-list-col {
    height: 450px; /* Chiều cao cố định cho khung cuộn */
    overflow: hidden;
    position: relative;
}
.news-list-scroll-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Hiệu ứng cuộn tự động */
    animation: scroll-news 20s linear infinite;
}
/* Dừng cuộn khi di chuột vào */
.news-list-col:hover .news-list-scroll-wrapper {
    animation-play-state: paused;
}


.other-news-item-v3 {
    display: flex;
    gap: 15px;
    text-decoration: none;
    margin-bottom: 20px;
}
.other-news-thumb-v3 {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.other-news-info-v3 h4 {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-heading-color);
    margin-bottom: 5px;
    transition: color 0.3s;
}
.other-news-item-v3:hover h4 {
    color: var(--primary-color);
}


/* 4. Cột Form đăng ký bên phải */
.news-sidebar-column-v3 .sidebar-form-container-v3 {
    position: sticky;
    top: 100px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.news-sidebar-column-v3 .registration-iframe {
    width: 100%;
    height: 780px; /* Đặt chiều cao đủ lớn để hiển thị toàn bộ form */
    border: none;
    display: block;
}

/* 5. Responsive */
@media (max-width: 991px) {
    .news-layout-grid-v3, .news-content-grid {
        grid-template-columns: 1fr;
    }
    .news-list-col {
        height: auto; /* Tắt hiệu ứng cuộn trên mobile */
        overflow: visible;
    }
    .news-list-scroll-wrapper {
        position: static;
        animation: none; /* Tắt animation */
    }
    .news-sidebar-column-v3 {
        margin-top: 40px;
    }
}/* ==========================================================================
   KHỐI TIN TỨC VÀ FORM (BỐ CỤC THEO MẪU CHUẨN)
   ========================================================================== */
/* ==========================================================================
   KHỐI TIN TỨC VÀ FORM (BỐ CỤC THEO MẪU CHUẨN)
   ========================================================================== */

.news-section-v3 {
    padding: 60px 0;
}

/* 1. Lưới chính 2 cột */
.news-layout-grid-v3 {
    display: grid;
    grid-template-columns: 1fr 400px; /* Cột tin tức linh hoạt, cột form rộng 400px */
    gap: 40px;
    align-items: flex-start;
}

/* 2. Tiêu đề khối "Tin Nhà Trường" */
.section-title-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 5px solid var(--primary-color);
    padding-left: 15px;
    margin-bottom: 25px;
}
.section-title-v2 h3 {
    font-size: 1.8rem;
    color: var(--secondary-color);
    margin: 0;
}
.view-all-link {
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

/* 3. Lưới nội dung tin tức (chia 2 cột con) */
.news-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Chia cột tin tức thành 2 cột con bằng nhau */
    gap: 30px;
}

/* Cột tin nổi bật bên trái */
.featured-news-card-v3 {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    height: 100%; /* Giúp mô tả co giãn */
}
.featured-news-image-v3 img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3; /* Giữ tỷ lệ ảnh 4:3 */
    object-fit: cover;
    border-radius: 8px;
    display: block;
    margin-bottom: 15px;
    transition: opacity 0.3s;
}
.featured-news-card-v3:hover .featured-news-image-v3 img {
    opacity: 0.85;
}
.featured-news-content-v3 {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Cho phép co giãn */
}
.featured-news-content-v3 h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-heading-color);
    line-height: 1.4;
    margin-bottom: 10px;
    transition: color 0.3s;
}
.featured-news-card-v3:hover h3 {
    color: var(--primary-color);
}
.news-date-v3 {
    font-size: 0.85rem;
    color: #dc3545;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
}
.featured-news-content-v3 p {
    font-size: 0.9rem;
    color: var(--text-body-color);
    line-height: 1.6;
    flex-grow: 1; /* Đẩy ngày tháng xuống dưới nếu cần */
}

/* Cột danh sách tin nhỏ bên phải */
.news-list-col {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Khoảng cách giữa các tin nhỏ */
}
.other-news-item-v3 {
    display: flex;
    gap: 15px;
    text-decoration: none;
    align-items: center;
}
.other-news-thumb-v3 {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.other-news-info-v3 h4 {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-heading-color);
    margin-bottom: 5px;
    transition: color 0.3s;
}
.other-news-item-v3:hover h4 {
    color: var(--primary-color);
}

/* 4. Cột Form đăng ký */
.news-sidebar-column-v3 .sidebar-form-container-v3 {
    position: sticky;
    top: 100px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.news-sidebar-column-v3 .registration-iframe {
    width: 100%;
    height: 920px; /* Chiều cao đủ để hiển thị TOÀN BỘ form */
    border: none;
    display: block;
}

/* 5. Responsive */
@media (max-width: 991px) {
    .news-layout-grid-v3, .news-content-grid {
        grid-template-columns: 1fr; /* Chuyển tất cả về 1 cột */
    }
    .news-sidebar-column-v3 {
        margin-top: 40px;
    }
}

/* 1. Lưới chính chia 2 cột */
.news-layout-grid-v3 {
    display: grid;
    grid-template-columns: 1fr 400px; /* Cột tin tức linh hoạt, cột form rộng 400px */
    gap: 40px;
    align-items: flex-start;
}

/* 2. Tiêu đề khối "Tin Nhà Trường" */
.section-title-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 5px solid var(--primary-color);
    padding-left: 15px;
    margin-bottom: 25px;
}
.section-title-v2 h3 {
    font-size: 1.8rem;
    color: var(--secondary-color);
    margin: 0;
}
.view-all-link {
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

/* 3. Lưới nội dung tin tức (chia 2 cột con) */
.news-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Chia cột tin tức thành 2 cột con bằng nhau */
    gap: 30px;
}

/* Cột tin nổi bật bên trái */
.featured-news-card-v3 {
    display: block;
    text-decoration: none;
}
.featured-news-image-v3 img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    margin-bottom: 15px;
    transition: opacity 0.3s;
}
.featured-news-card-v3:hover .featured-news-image-v3 img {
    opacity: 0.85;
}
.featured-news-content-v3 h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-heading-color);
    line-height: 1.4;
    margin-bottom: 10px;
    transition: color 0.3s;
}
.featured-news-card-v3:hover h3 {
    color: var(--primary-color);
}
.news-date-v3 {
    font-size: 0.85rem;
    color: #dc3545;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
}
.featured-news-content-v3 p {
    font-size: 0.9rem;
    color: var(--text-body-color);
    line-height: 1.6;
}

/* Cột danh sách tin nhỏ bên phải */
.news-list-col {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Khoảng cách giữa các tin nhỏ */
}
.other-news-item-v3 {
    display: flex;
    gap: 15px;
    text-decoration: none;
    align-items: center;
}
.other-news-thumb-v3 {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.other-news-info-v3 h4 {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-heading-color);
    margin-bottom: 5px;
    transition: color 0.3s;
}
.other-news-item-v3:hover h4 {
    color: var(--primary-color);
}

/* 4. Cột Form đăng ký */
.news-sidebar-column-v3 .sidebar-form-container-v3 {
    position: sticky;
    top: 100px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.news-sidebar-column-v3 .registration-iframe {
    width: 100%;
    height: 730px; /* Chiều cao đủ để hiển thị TOÀN BỘ form */
    border: none;
    display: block;
}

/* 5. Responsive */
@media (max-width: 991px) {
    .news-layout-grid-v3, .news-content-grid {
        grid-template-columns: 1fr; /* Chuyển tất cả về 1 cột */
    }
    .news-sidebar-column-v3 {
        margin-top: 40px;
    }
}