@font-face {
    font-family: 'font2';
    src: url('/static/fonts/font2.ttf');
}

@font-face {
    font-family: 'font6';
    src: url('/static/fonts/font6.ttf');
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

:root {
--primary-color: #002147; /* Màu xanh đậm */
--secondary-color: #ee232b; /* Màu đỏ nổi bật */
--accent-orange: #ff9933; /* Màu cam cho nút đăng ký */
--text-color: #333;
--light-bg-color: #f9f9f9;
--dark-text-color: #fff;
--border-color: #e0e0e0;
}



/* Base Styles */


.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}

a {
text-decoration: none;
color: inherit;
}

/* Header - Global */

/* Hero Section (Top Banner) */
.hero-banner {
width: 100%;
height: 350px; /* Chiều cao banner */
background: url('/static/images/nganh/kt-tc/pexels-pixabay-53621.jpg') no-repeat center center/cover; /* Ảnh nền */
display: flex;
justify-content: center;
align-items: center;
color: var(--dark-text-color);
text-align: center;
position: relative;
overflow: hidden;
}

.hero-banner::before { /* Lớp phủ đen nhẹ */
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
}

#tourForm {
text-align: left;
}

.hero-banner-content {
position: relative;
z-index: 2;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-banner-content h2 {
font-size: 3.5em;
margin-bottom: 10px;
font-weight: 700;
font-family: 'font2';
}

.hero-banner-content p {
font-size: 1.5em;
font-weight: 300;
font-family: 'font6';
}


/* Section - Title Card (Tiêu đề bài viết) */
.title-card {
background-color: #f0f0f0; /* Màu xám nhạt */
padding: 30px 0;
text-align: center;
position: relative;
margin-bottom: 30px;
overflow: hidden;
font-family: 'font2';
}

.title-card-content {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}

.title-card h3 {
font-size: 2.2em;
color: var(--primary-color);
margin-bottom: 10px;
}

.title-card p {
font-size: 1.3em;
color: var(--text-color);
margin-bottom: 20px;
}

.play-button {
display: inline-block;
width: 60px;
height: 60px;
background-color: var(--secondary-color);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}

.play-button:hover {
background-color: darken(var(--secondary-color), 10%); /* Làm tối màu đỏ */
transform: scale(1.05);
}

.play-button::before {
content: '';
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 25px solid var(--dark-text-color);
margin-left: 5px; /* Điều chỉnh vị trí mũi tên */
}

/* Section - KINH NGHIỆM HỌC TẬP (Content Block with Image) */
.content-block-with-image {
background-color: var(--primary-color);
color: var(--dark-text-color);
padding: 60px 0;
display: flex;
align-items: center;
gap: 40px;
position: relative;
overflow: hidden;
}

.content-block-with-image .container {
display: flex;
align-items: center;
gap: 40px;
flex-wrap: wrap;
}

.content-block-text {
flex: 2;
min-width: 300px;
}

.content-block-text h3 {
font-size: 2.2em;
margin-bottom: 20px;
color: var(--secondary-color); /* Tiêu đề màu đỏ */

}

.content-block-text p {
font-size: 1.1em;
line-height: 1.8;
font-family: 'font6';
}

.content-block-image {
flex: 1;
min-width: 250px;
text-align: center;
}

.content-block-image img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transition: transform 0.5s ease;
}

.content-block-image img:hover {
transform: scale(1.03);
}

/* Section - KINH NGHIỆM NHÀ TRƯỜNG (Grid of text blocks) */
.text-grid-section {
padding: 60px 0;
background-color: var(--light-bg-color);
}

.text-grid-section h2.section-heading {
text-align: center;
font-size: 2.5em;
color: var(--primary-color);
margin-bottom: 50px;
position: relative;
}

.text-grid-section h2.section-heading::after {
content: '';
position: absolute;
left: 50%;
bottom: -10px;
transform: translateX(-50%);
width: 100px;
height: 4px;
background-color: var(--secondary-color);
border-radius: 2px;
}

.text-grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}

.text-grid-item {
background-color: #fff;
padding: 25px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.text-grid-item:hover {
transform: translateY(-8px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.text-grid-item h4 {
font-size: 1.5em;
color: var(--secondary-color);
margin-bottom: 15px;
border-left: 5px solid var(--secondary-color);
padding-left: 15px;
}

.text-grid-item p {
font-size: 1em;
line-height: 1.7;
}

/* Section - Hình ảnh trường và logo (Two-column layout) */
.school-showcase {
background-color: var(--primary-color); /* Màu xanh đậm */
color: var(--dark-text-color);
padding: 60px 0;
display: flex;
align-items: center;
gap: 40px;
flex-wrap: wrap; /* Cho phép xuống dòng */
justify-content: center;
}

.school-showcase .image-half {
flex: 1;
min-width: 400px; /* Đảm bảo đủ rộng trên màn hình lớn */
text-align: center;
}

.school-showcase .image-half img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
transition: transform 0.5s ease;
}
.school-showcase .image-half img:hover {
transform: scale(1.02);
}

.school-showcase .logo-half {
flex: 1;
min-width: 300px;
text-align: center;
background-color: var(--secondary-color); /* Nền màu đỏ */
padding: 40px;
border-radius: 8px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

.school-showcase .logo-half h2 {
font-size: 2.8em;
margin-bottom: 10px;
color: var(--dark-text-color);
font-weight: 700;
}

.school-showcase .logo-half p {
font-size: 1.5em;
font-weight: 300;
color: var(--dark-text-color);
}

/* Section - MÔ TẢ NGÀNH HỌC (Main content blocks) */
.major-description-section {
padding: 60px 0;
background-color: #fff;
}

.major-description-section .container {
display: flex;
gap: 40px;
}

.sidebar-left {
flex: 0 0 200px; /* Sidebar cố định */
background-color: var(--primary-color);
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
color: var(--dark-text-color);
height: fit-content; /* Chiều cao tự co giãn theo nội dung */
position: sticky;
top: 90px; /* Cách header một khoảng */
}

.sidebar-left h4 {
font-size: 1.3em;
margin-bottom: 20px;
border-bottom: 2px solid var(--secondary-color);
padding-bottom: 10px;
font-weight: 700;
font-family: 'font2';
}

.sidebar-left ul {
list-style: none;
}

.sidebar-left ul li {
margin-bottom: 15px;
font-family: 'font6';
}

.sidebar-left ul li a {
color: var(--dark-text-color);
transition: color 0.3s ease, padding-left 0.3s ease;
display: block;
padding: 5px 0;
}

.sidebar-left ul li a:hover,
.sidebar-left ul li a.active { /* Class active cho link hiện tại */
color: var(--secondary-color);
padding-left: 10px;
}

.main-content-blocks {
flex: 1;
}

.content-block {
background-color: #fff;
padding: 30px;
margin-bottom: 40px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
border-left: 8px solid var(--secondary-color); /* Đường viền đỏ bên trái */
font-family: 'font2';
}

.content-block h3 {
font-size: 1.8em;
color: var(--primary-color);
margin-bottom: 20px;
}

.content-block p {
margin-bottom: 15px;
font-size: 1.05em;
line-height: 1.7;
font-family: 'font6';
}

.content-block ul {
list-style: none;
padding-left: 20px;
}
.content-block ul li {
margin-bottom: 10px;
position: relative;
font-family: 'font6';
}
.content-block ul li::before {
content: '•'; /* Dấu chấm trước mỗi mục */
color: var(--secondary-color);
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}

/* Phần "HỢP TÁC DOANH NGHIỆP" và "HỌC BỔNG" */
.partnership-scholarship-section {
background-color: var(--light-bg-color);
padding: 60px 0;
}

.partnership-scholarship-section .container {
display: flex;
gap: 40px;
flex-wrap: wrap;
justify-content: center;
}

.info-card {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
flex: 1;
min-width: 350px;
text-align: center;
transition: transform 0.3s ease;
}

.info-card:hover {
transform: translateY(-5px);
}

.info-card h3 {
font-size: 1.8em;
color: var(--primary-color);
margin-bottom: 20px;
}

.info-card p {
font-size: 1.05em;
line-height: 1.7;
margin-bottom: 15px;
}

.info-card img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin-top: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Registration Section */
.registration-section {
background-color: var(--accent-orange); /* Màu cam */
padding: 80px 0;
text-align: center;
color: var(--dark-text-color);
}

.registration-section h2 {
font-size: 3em;
margin-bottom: 30px;
font-weight: 700;
}

.registration-button {
display: inline-block;
background-color: var(--primary-color); /* Nút màu xanh đậm */
color: var(--dark-text-color);
padding: 18px 40px;
font-size: 1.5em;
border-radius: 5px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
transition: background-color 0.3s ease, transform 0.3s ease;
}

.registration-button:hover {
background-color: darken(var(--primary-color), 10%); /* Làm tối màu xanh */
transform: translateY(-3px);
}

/* Other Majors Section */
.other-majors-section {
padding: 60px 0;
text-align: center;
background-color: var(--light-bg-color);
}

.other-majors-section h2 {
font-size: 2.5em;
color: var(--primary-color);
margin-bottom: 40px;
position: relative;
}
.other-majors-section h2::after {
content: '';
position: absolute;
left: 50%;
bottom: -10px;
transform: translateX(-50%);
width: 80px;
height: 4px;
background-color: var(--secondary-color);
border-radius: 2px;
}

.major-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}

.major-item {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.major-item:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.major-item a {
display: block;
font-size: 1.1em;
color: var(--primary-color);
font-weight: 600;
}

.major-item a:hover {
color: var(--secondary-color);
}


/* Footer */

/* Responsive */
@media (max-width: 992px) {
.container {
width: 95%;
}

.major-description-section .container {
flex-direction: column;
}

.sidebar-left {
position: static; /* Không dính nữa trên mobile */
width: 100%;
margin-bottom: 30px;
}

.content-block-with-image .container {
flex-direction: column;
text-align: center;
}
.content-block-image, .content-block-text {
min-width: unset;
width: 100%;
}

.school-showcase .image-half,
.school-showcase .logo-half {
min-width: unset;
width: 100%;
}
}

@media (max-width: 768px) {
.header .container {
flex-direction: column;
}
.header .main-nav ul {
flex-wrap: wrap;
justify-content: center;
margin-top: 15px;
}
.header .main-nav ul li {
margin: 5px 15px;
}

.hero-banner-content h2 {
font-size: 2.5em;
}
.hero-banner-content p {
font-size: 1.2em;
}

.title-card h3 {
font-size: 1.8em;
}
.title-card p {
font-size: 1em;
}

/* Đảm bảo các hiệu ứng hover bị tắt trên mobile */
.play-button:hover {
background-color: var(--secondary-color); /* Giữ nguyên màu khi hover */
transform: scale(1); /* Loại bỏ hiệu ứng scale */
}

.content-block-image img:hover {
transform: scale(1); /* Loại bỏ hiệu ứng scale */
}

.text-grid-item:hover {
transform: translateY(0); /* Loại bỏ hiệu ứng trượt lên */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Giữ nguyên đổ bóng ban đầu */
}

.school-showcase .image-half img:hover {
transform: scale(1); /* Loại bỏ hiệu ứng scale */
}

.info-card:hover {
transform: translateY(0); /* Loại bỏ hiệu ứng trượt lên */
}

.registration-section h2 {
font-size: 2.2em;
}
.registration-button {
font-size: 1.2em;
padding: 15px 30px;
transform: translateY(0); /* Loại bỏ hiệu ứng trượt lên */
}
.registration-button:hover {
background-color: var(--primary-color); /* Giữ nguyên màu khi hover */
}
.other-majors-section h2 {
font-size: 2em;
}
.major-item:hover {
transform: translateY(0); /* Loại bỏ hiệu ứng trượt lên */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Giữ nguyên đổ bóng ban đầu */
}

/* Loại bỏ tất cả hiệu ứng cuộn (scroll animation) trên mobile */
.hero-banner .hero-banner-content,
.title-card-content,
.container6 .right-section6,
.sidebar-left,
.major-description-section .content-block,
.registration-section .container,
.hero-banner,
.container6,
.registration-section,
.animate-fade-up,
.animate-fade-left,
.animate-fade-right,
.animate-fade-in,
.animate-zoom-in {
    opacity: 1 !important;
    transform: translateY(0) translateX(0) scale(1) !important;
    transition: none !important;
}
}

@media (max-width: 480px) {
.hero-banner {
height: 250px;
}
.hero-banner-content h2 {
font-size: 2em;
}
.hero-banner-content p {
font-size: 1em;
}
.content-block-text h3 {
font-size: 1.8em;
}
.text-grid-item h4 {
font-size: 1.3em;
}
.school-showcase .logo-half h2 {
font-size: 2.2em;
}
.school-showcase .logo-half p {
font-size: 1.2em;
}
}



.container6 {
position: relative; /* Quan trọng: Đặt container làm gốc định vị cho phần tử absolute */
width: 100%;
max-width: 1400px;
/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
min-height: 500px; /* Đặt chiều cao tối thiểu cho container */
display: flex; /* Giữ flex để left-section vẫn chiếm chỗ */
padding-bottom: 30px;
}

.left-section6 {
flex: 1; /* Chiếm toàn bộ không gian ngang còn lại */
background-image: url('/static/images/gioithieu/pexels-petra-nesti-1766376-32335901.jpg'); /* Đảm bảo tên file CHÍNH XÁC */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 500px; /* Đảm bảo chiều cao đủ cho ảnh, tương đương container */
width: 1000px;
}

.right-section6 {
position: absolute; /* Quan trọng: Đặt vị trí tuyệt đối */
top: 50%; /* Bắt đầu từ 50% chiều cao của container */
right: 0; /* Cách lề phải 0px */
transform: translateY(-50%); /* Dịch chuyển lên trên 50% chiều cao của chính nó để căn giữa theo chiều dọc */
width: 55%; /* Điều chỉnh chiều rộng của khối đỏ (ví dụ 45% so với container) */
min-height: 350px; /* Điều chỉnh chiều cao tối thiểu của khối đỏ */
background-color: #e60000; /* Màu đỏ */
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
color: white;
padding: 40px;
z-index: 10; /* Đặt z-index cao hơn để nó nằm trên ảnh */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Thêm đổ bóng nổi bật hơn */
}

.quote-icon6 {
font-size: 150px;
font-weight: bold;
color: rgba(255, 255, 255, 0.3);
position: absolute;
top: -50px;
left: -20px;
line-height: 1;
z-index: 1; /* Nằm dưới chữ */
}

.text6 {
font-size: 30px;
font-weight: bold;
line-height: 1.2;
font-family: 'font6' !important;
position: relative; /* Để chữ nằm trên dấu ngoặc kép */
z-index: 2; /* Nằm trên dấu ngoặc kép */
}

.text6 .highlight6 {
font-family: 'font2' ;
font-size: 45px;
}