/* Footer */
/* Footer */

/* ============================================================
   FOOTER HIỆN ĐẠI - HOVER DANH MỤC MÀU #84150E
   ============================================================ */


/* 2. Mã số thuế */
.company-tax {
    font-size: 14px;
    margin-bottom: 30px !important; /* Tăng khoảng cách trước khi vào list liên hệ */
    padding: 8px 15px;
    display: inline-block;
    border-radius: 4px;
    border-left: 3px solid #84150E; /* Nhấn màu đỏ chủ đạo */
    color: #000;
}

.company-tax strong {
    color: #000;
    margin-left: 5px;
}

/* 3. Danh sách thông tin liên hệ (Tăng khoảng cách các thẻ) */
.company-info {
    list-style: none;
    padding: 0;
    margin: 0;
}

.company-info li {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 25px !important; /* Tăng mạnh khoảng cách giữa các dòng */
    font-size: 15px;
    line-height: 1.7;
    color: #000;
    transition: all 0.3s ease;
}

/* Hiệu ứng khi hover vào từng dòng thông tin */
.company-info li:hover {
    color: #000;
    transform: translateX(5px);
}

/* Tùy chỉnh Icon */
.company-info .icon {
    color: #84150E !important; /* Màu đỏ đô chủ đạo */
    margin-right: 18px !important; /* Tăng khoảng cách giữa icon và chữ */
    font-size: 20px;
    min-width: 24px;
    display: flex;
    justify-content: center;
    margin-top: 3px; /* Căn chỉnh icon khớp với dòng chữ đầu tiên */
}

/* Style riêng cho link trong thông tin */
.company-info a {
    color: inherit !important;
    text-decoration: none;
    font-weight: 500;
}

.company-info a:hover {
    color: #84150E !important;
    text-decoration: underline !important;
}

/* Tăng khoảng cách cho cột 1 so với các cột bên cạnh */
.footer-widgets .col:nth-child(1) {
    padding-right: 50px !important;
}

/* 1. Nền và cấu hình chung */
.footer-widgets.footer-1 {
    background:linear-gradient(135deg, rgb(248, 249, 250) 0%, rgb(227, 242, 253) 100%) !important; 
    padding: 70px 0 50px 0 !important;
    color: #000 !important;
}

/* 2. Chia Layout 3 cột */
.footer-widgets .row {
    display: flex;
    flex-wrap: wrap;
}
.footer-widgets .col:nth-child(1) { flex: 0 0 29%; max-width: 29%; }
.footer-widgets .col:nth-child(2) { flex: 0 0 42%; max-width: 42%; }
.footer-widgets .col:nth-child(3) { flex: 0 0 29%; max-width: 29%; }

/* 3. Tiêu đề các cột có gạch chân đỏ */
.footer-widgets .wp-block-heading, 
.footer-title,
.links-title {
    color: #000 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 30px !important;
    position: relative;
    padding-bottom: 12px;
}

.footer-widgets .wp-block-heading::after,
.footer-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 45px;
    height: 3px;
    background-color: #84150E;
}

/* 4. Danh mục chia 2 cột & Hiệu ứng Hover màu #84150E */
ul.wp-block-categories {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 15px !important;
    padding: 0 !important;
    list-style: none !important;
}

ul.wp-block-categories li {
    position: relative;
    padding-left: 22px !important;
    margin: 0 !important;
    transition: all 0.3s ease;
}

/* Mũi tên mặc định */
ul.wp-block-categories li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #84150E;
    font-weight: bold;
    transition: all 0.3s ease;
}

/* Khi Hover: Chữ chuyển sang màu #84150E và mũi tên trượt nhẹ */
ul.wp-block-categories li:hover::before {
    transform: translateX(5px);
}

ul.wp-block-categories li a {
    color: #000 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.3s ease; /* Tạo hiệu ứng đổi màu mượt mà */
}

ul.wp-block-categories li:hover a {
    color: #84150E !important; /* Đổi màu chữ khi hover */
}

/* 5. Cột Thông tin công ty */

.company-logo {
    margin-bottom: 30px; /* Tăng khoảng cách dưới logo */
}

.company-logo img {
    max-width: 240px;
    height: auto;
}

.company-name {
    font-size: 17px !important;
    line-height: 1.6;
    margin-bottom: 20px !important; /* Tăng khoảng cách dưới tên công ty */
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

.company-info li {
    display: flex;
    margin-bottom: 15px;
    font-size: 14.5px;
    color: #000;
}

.company-info .icon {
    color: #000;
    margin-right: 12px;
    font-size: 18px;
}

/* 6. Nút đăng ký & QR Code */
.btn-registration {
    display: inline-flex;
    align-items: center;
    background-color: #84150E !important;
    color: #ffffff !important;
    padding: 14px 25px;
    border-radius: 50px;
    font-weight: 700;
    margin-bottom: 30px;
    transition: all 0.3s;
}

.btn-registration:hover {
    transform: translateY(-3px);
    filter: brightness(1.2);
}

.qr-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.qr-grid .qr-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.qr-box {
    background: rgba(255, 255, 255, 0.05);
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s;
}

.qr-box:hover {
    border-color: #84150E;
}

.qr-box img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* 7. Liên kết nhanh (Cuối cột 3) */
.quick-links { margin-top: 30px; }
div.quick-links h4.links-title {
	margin: 0px !important;
}
.quick-links ul { list-style: none; padding: 0; }
.quick-links a {
    color: #000 !important;
    font-size: 14px;
    display: block;
    margin-bottom: 8px;
}

.quick-links a:hover { color: #84150E !important; }


/* ============================================================
   HEADER BANNER - CHUẨN MÀU ĐỎ ĐÔ #84150E (LUCKY STAR)
   ============================================================ */

/* 1. Nền tổng thể dải Banner - Sử dụng tông đỏ đô cực nhạt */
.news-hero-section {
    background-color: #83150e !important; /* Tông đỏ đô pha trắng cực nhẹ */
    padding: 60px 0 0 0 !important; 
    position: relative;
    overflow: hidden;
}

/* 2. Tiêu đề danh mục - Màu đỏ đô #84150E */
.hero-title {
    font-size: 45px !important;
    font-weight: 850 !important;
    color: #84150E !important; /* Màu đỏ đô chuẩn */
    margin-bottom: 15px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

/* 3. Breadcrumbs */
.hero-breadcrumbs ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #666;
}

.hero-breadcrumbs a:hover {
    color: #84150E;
}

.hero-breadcrumbs .current {
    color: #84150E !important;
    font-weight: 700;
}

/* 4. Mô tả chuyên mục */
.hero-description {
    font-size: 16.5px;
    line-height: 1.7;
    color: #4a4a4a;
    max-width: 90%;
}

/* 5. Cột ảnh và khối trang trí */
.image-column {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

/* Khối trang trí bo góc phía sau - Đỏ đô nhạt 15% */
.image-bg-shape {
    position: absolute;
    right: 0;
    bottom: 30px;
    width: 90%;
    height: 85%;
    background: rgba(132, 21, 14, 0.15) !important; /* Đỏ đô #84150E mờ */
    border-radius: 40px;
    z-index: 1;
}

.hero-image-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
}

.hero-image-wrapper img {
    max-width: 115% !important;
    width: auto;
    height: auto;
    margin-left: -15%;
    vertical-align: bottom;
    /* Đổ bóng tông đỏ đô nhẹ để tạo chiều sâu */
    filter: drop-shadow(0 15px 30px rgba(132, 21, 14, 0.2));
}


/* 1. Nền tổng thể - Dùng màu hồng kem cực nhẹ để tôn màu đỏ đô */
.news-hero-section {
    background: linear-gradient(135deg, #fffafa 0%, #fdf2f1 100%) !important;
    padding: 80px 0 0 0 !important; /* Tăng padding top để thoáng hơn */
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(132, 21, 14, 0.05);
}

/* 2. Tiêu đề - Làm đậm và uy lực hơn */
.hero-title {
    font-size: 50px !important; /* Tăng size chữ */
    font-weight: 900 !important;
    color: #84150E !important; 
    margin-bottom: 20px !important;
    line-height: 1.1 !important;
    letter-spacing: -1px; /* Sát chữ lại một chút cho hiện đại */
}

/* 3. Breadcrumbs - Đơn giản và thanh lịch */
.hero-breadcrumbs {
    margin-bottom: 30px;
    font-size: 15px;
    color: #888;
    font-weight: 500;
}

/* 4. Mô tả - Tối ưu trải nghiệm đọc */
.hero-description {
    font-size: 18px;
    line-height: 1.8;
    color: #555;
    max-width: 85%;
    font-weight: 400;
    position: relative;
    padding-left: 20px;
    border-left: 3px solid rgba(132, 21, 14, 0.2); /* Thêm gạch dọc nhẹ bên trái */
}

/* 5. Cấu trúc ảnh - Đây là phần tạo nên sự khác biệt */
.image-column {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

/* Khối màu trang trí phía sau - Làm mờ và rộng hơn */
.image-bg-shape {
    position: absolute;
    right: -10%;
    bottom: 40px;
    width: 100%;
    height: 80%;
    background: rgba(132, 21, 14, 0.08) !important; /* Đỏ đô siêu nhạt */
    border-radius: 60px 20px 60px 20px; /* Bo góc kiểu nghệ thuật */
    z-index: 1;
    transform: rotate(-2deg); /* Hơi nghiêng nhẹ cho sinh động */
}

/* Wrapper cho ảnh người */
.hero-image-wrapper {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    transition: all 0.5s ease;
}

.hero-image-wrapper img {
    max-width: 120% !important; /* Để ảnh tràn nhẹ ra ngoài cột */
    width: auto;
    height: auto;
    margin-left: -20%;
    vertical-align: bottom;
    /* Hiệu ứng bóng đổ mềm mại tông đỏ đô */
    filter: drop-shadow(20px 10px 40px rgba(132, 21, 14, 0.2));
}

/* Hiệu ứng khi lướt chuột vào banner */
.news-hero-section:hover .hero-image-wrapper {
    transform: scale(1.02); /* Phóng to nhẹ ảnh người */
}

/* Container chính: Đảm bảo mọi thứ căn giữa tuyệt đối */
.featured-posts-header {
    padding: 80px 20px 40px;
    text-align: center;
}

.header-content {
    max-width: 850px;
    margin: 0 auto;
}

/* Tiêu đề: Không dùng background đen/xám nữa cho đỡ nặng nề */
.featured-title {
    font-size: 40px;
    font-weight: 800;
    color: #222;
    margin: 0 0 15px 0;
    text-transform: capitalize;
    letter-spacing: 1px;
    line-height: 1.2;
    background-color: transparent !important;
}

/* Chữ NỔI BẬT: Tạo điểm nhấn bằng màu sắc và gạch chân thanh mảnh */
.featured-title .highlight {
    color: #84150e; /* Màu san hô hiện đại */
    position: relative;
    padding-bottom: 5px;
}

.featured-title .highlight::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 3px;
    background: #84150e;
    border-radius: 10px;
}

/* Phụ đề: Font chữ mỏng, thoáng, dễ đọc */
.featured-subtitle {
    font-size: 18px;
    color: #666;
    line-height: 1.8;
    margin: 0;
    font-weight: 400;
}

/* Thêm một icon nhỏ phía trên tiêu đề để trang trí (Tùy chọn) */
.header-content::before {
    content: "★";
    display: block;
    color: #84150e;
    font-size: 24px;
    margin-bottom: 10px;
}
/* ============================================================
   DANH MỤC GRID LAYOUT
   ============================================================ */

.study-abroad-wrapper {
    margin-top: 60px;
    margin-bottom: 40px;
    text-align: center;
}

.study-abroad-title {
    font-size: 36px;
    font-weight: 800;
    color: #001f3f;
    margin-bottom: 40px;
    text-transform: capitalize;
    letter-spacing: 2px;
}

.study-abroad-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    background: #f8f9fa;
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
    min-height: 320px;
    position: relative;
    overflow: hidden;
}

.category-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
    border-color: #84150E;
}

.category-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    border-radius: 12px 12px 0 0;
    display: block;
}

.category-name {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: #333;
    line-height: 1.4;
    padding: 15px 10px;
    background: #fff;
    width: 100%;
    position: relative;
    z-index: 2;
}

.study-abroad-title {
    text-align: center;
    font-size: 42px;
    font-weight: 800;
    position: relative;
    padding-top: 40px; /* Tạo khoảng trống cho ngôi sao */
    margin-bottom: 30px;
    color: #222; /* Màu đen cho chữ "Cuộc Sống" */
}

/* Tạo ngôi sao phía trên */
.study-abroad-title::before {
    content: "★";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    color: #84150E; /* Màu hồng nhạt của ngôi sao */
    font-size: 24px;
}

/* Style cho chữ "Du Học" (phần tử thứ 2) */
.study-abroad-title span:last-child {
    color: #84150E; /* Màu hồng cam */
    position: relative;
    margin-left: 10px;
}

/* Tạo đường gạch chân dưới chữ "Du Học" */
.study-abroad-title span:last-child::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #84150e;
    border-radius: 2px;
}

/* Đổ bóng chữ nhẹ giống trong ảnh */
.study-abroad-title span {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}


/* Responsive */
@media (max-width: 768px) {
    .study-abroad-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .category-card {
        padding: 20px 15px;
        min-height: 150px;
    }
    
    .category-icon {
        font-size: 36px;
    }
    
    .category-name {
        font-size: 14px;
    }
    
    .study-abroad-title {
        font-size: 28px;
        margin-bottom: 30px;
    }
}

@media (max-width: 480px) {
    .study-abroad-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ============================================================
   LS SIDEBAR CATEGORIES - HOVER BACKGROUND STYLE
   ============================================================ */

/* 1. Khung Widget tổng thể */
/* .widget_categories {
    background: #ffffff;
    padding: 15px !important;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
} */

/* 2. Tiêu đề Widget */
.widget_categories .widget-title {
    font-size: 18px !important;
    color: #000 !important;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: block;
}

.widget_categories .is-divider {
    background-color: #84150E !important;
    height: 3px !important;
    width: 35px !important;
    margin-bottom: 20px !important;
}

/* 3. Danh sách item */
.widget_categories ul {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
}

.widget_categories ul li {
    padding: 0 !important;
    margin: 4px 0 !important; /* Tạo khoảng cách nhỏ giữa các dòng */
    border: none !important; /* Bỏ gạch chân mặc định */
}

/* 4. Link và Hiệu ứng Hover Background */
.widget_categories ul li a {
    display: block;
    padding: 10px 15px; /* Tạo không gian bên trong để thấy rõ nền khi hover */
    font-size: 15px;
    color: #444 !important;
    font-weight: 500;
    border-radius: 8px; /* Bo góc cho cái nền khi hover */
    transition: all 0.25s ease-in-out;
    text-decoration: none !important;
}

/* Khi Hover vào: Đổi màu chữ trắng và nền đỏ đô #84150E */
.widget_categories ul li a:hover {
    color: var(--fs-color-secondary) !important;
    padding-left: 20px; /* Dịch nhẹ chữ cho tinh tế */
}

/* 5. Highlight mục đang được chọn (Active) */
.widget_categories ul li.current-cat a {
    background-color: rgba(132, 21, 14, 0.1); /* Nền đỏ rất nhạt */
    color: #84150E !important;
    font-weight: 700;
}

/* 6. Số lượng bài viết (Nếu có hiện count) */
.widget_categories ul li a .post_count {
    float: right;
    font-size: 12px;
    opacity: 0.7;
}

.widget_categories ul li a:hover .post_count {
    opacity: 1;
}

/* ============================================================
   LS RECENT POSTS WIDGET - PREMIUM LIST STYLE
   ============================================================ */

/* 1. Khung Widget tổng thể */
/* .widget.flatsome_recent_posts {
    background: #ffffff;
    padding: 15px !important;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
    margin-bottom: 30px;
} */

/* 2. Tiêu đề Widget */
.flatsome_recent_posts .widget-title {
    font-size: 18px !important;
    color: #000 !important;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
}

.flatsome_recent_posts .is-divider {
    background-color: #84150E !important;
    height: 3px !important;
    width: 28px !important;
    margin-bottom: 20px !important;
}

/* 3. Danh sách bài viết */
.flatsome_recent_posts ul {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
}

.recent-blog-posts-li {
    border-bottom: 1px solid #f7f7f7;
    transition: all 0.3s ease;
    border-radius: 10px;
    padding-left: 10px;
}

.recent-blog-posts-li:last-child {
    border-bottom: none;
}

/* 4. Hình ảnh Thumbnail (Badge) */
.recent-blog-posts .badge {
    width: 65px !important; /* Tăng kích thước ảnh một chút */
    height: 65px !important;
    border-radius: 10px !important;
    overflow: hidden;
    border: none !important;
}

.recent-blog-posts .badge-inner {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    transition: transform 0.5s ease;
}

.recent-blog-posts-li:hover .badge-inner {
    transform: scale(1.1); /* Phóng to ảnh nhẹ khi hover */
}

/* 5. Tiêu đề bài viết */
.recent-blog-posts .flex-col.flex-grow {
    padding-left: 10px;
}

.recent-blog-posts a {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #333 !important;
    line-height: 1.4 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Giới hạn 2 dòng để không bị quá dài */
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.recent-blog-posts-li:hover a {
    color: #84150E !important; /* Đổi sang màu đỏ đô khi hover */
}

/* 6. Loại bỏ khoảng cách mặc định của Flatsome */
.recent-blog-posts.pt-half, 
.recent-blog-posts.pb-half {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* Loại bỏ gạch chân mặc định của link */
.recent-blog-posts a:hover {
    text-decoration: none !important;
}
.flex-row.recent-blog-posts.align-top.pt-half.pb-half {
    display: flex;
    align-items: center !important;
}

/* ============================================================
   LS SIDEBAR SEARCH - SEAMLESS RED STYLE
   ============================================================ */

/* 1. Tổng thể Widget */
.widget_search {
    margin-top: 35px;
}

/* 2. Tiêu đề Tìm kiếm - Nhỏ gọn & Thanh lịch */
.wp-block-search__label {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin-bottom: 12px !important;
    display: flex;
    align-items: center;
}

/* 3. Wrapper chứa cả Input và Button - Kiểu lồng nhau */
.wp-block-search__inside-wrapper {
    display: flex !important;
    flex-direction: column;
}

.wp-block-search__input {
    /* 1. Hình khối & Màu sắc cơ bản */
    background-color: #f9f9f9 !important;
    border: 1.5px solid #ececec !important;
    border-radius: 8px !important;
    
    /* 2. Khoảng cách & Font chữ */
    padding: 12px 18px !important; 
    font-size: 15px !important;
    color: #333 !important;
    font-family: inherit;
    
    /* 3. Hiệu ứng chuyển cảnh */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    outline: none !important;
}

/* 4. Hiệu ứng khi Click vào ô nhập (Focus) */
.wp-block-search__input:focus {
    background-color: #ffffff !important;
    border-color: #84150E !important;
    box-shadow: 0 0 0 4px rgba(132, 21, 14, 0.1) !important;
    transform: translateY(-1px);
}

/* 5. Tùy chỉnh Placeholder (Chữ gợi ý) */
.wp-block-search__input::placeholder {
    color: #aaa !important;
    font-size: 14px;
    font-style: italic;
    opacity: 0.8;
}

/* 6. Hiệu ứng khi di chuột qua (Hover) */
.wp-block-search__input:hover {
    border-color: #d1d1d1 !important;
}

/* 5. Nút tìm kiếm (Button) - Nằm gọn bên phải */
.wp-block-search__button {
    background-color: #84150E;
    color: #fff ;
    border: none;
    border-radius: 25px !important; /* Bo tròn để hợp với khung */
    padding: 8px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    transition: all 0.3s ease !important;
    cursor: pointer;
}

.wp-block-search__button:hover {
    background-color: #fff !important; /* Đổi sang màu đen khi hover cho sang */
    transform: scale(1.02);
    color : #84150E;
    border: 1px solid ;

}

/* ============================================================
   LS NOT FOUND PAGE - PREMIUM STYLE
   ============================================================ */

/* 1. Khung tổng thể của thông báo */
.no-results.not-found {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    background: #ffffff;
    padding: 24px !important;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f1f1;
}

/* 2. Tiêu đề "Không tìm thấy gì" */
h1.page-title {
    font-size: 42px !important;
    font-weight: 900 !important;
    color: #1a1a1a !important;
    text-transform: capitalize;
    letter-spacing: -1px;
    margin-bottom: 20px !important;
}

/* Thêm điểm nhấn đỏ đô dưới tiêu đề */
h1.page-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background: #84150E;
    margin: 15px auto;
    border-radius: 2px;
}

/* 3. Đoạn văn bản mô tả */
.page-content p {
    font-size: 18px;
    color: #666;
    margin-bottom: 40px;
    line-height: 1.6;
}

/* 4. Style lại Form Tìm kiếm */
.not-found .searchform {
    max-width: 500px;
    margin: 0 auto;
    background: #fdf2f1; /* Nền đỏ đô cực nhạt */
    padding: 10px;
    border-radius: 50px; /* Bo tròn kiểu viên thuốc */
    border: 1px solid rgba(132, 21, 14, 0.1);
}

/* Ô input nhập liệu */
.not-found .search-field {
    background: transparent !important;
    border: none !important;
    padding: 10px 20px !important;
    font-size: 16px !important;
    height: 45px !important;
    box-shadow: none !important;
}

/* Nút bấm (Button) */
.not-found .ux-search-submit {
    background-color: #84150E !important; /* Đỏ đô */
    border: none !important;
    border-radius: 40px !important;
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease !important;
}

.not-found .ux-search-submit:hover {
    background-color: #1a1a1a !important; /* Chuyển sang đen khi hover */
    transform: scale(1.05);
}

.not-found .icon-search {
    color: #ffffff !important;
    font-size: 18px;
}

/* 5. Hiệu ứng Parallax cho phần này (Nếu bạn đã cài JS ở bước trước) */
.no-results {
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   GLOBAL SINGLE POST STYLE - LUCKY STAR THEME
   Áp dụng cho mọi bài viết trên website
   ============================================================ */


/* 1. Bố cục chung của bài viết */
.page-wrapper{
		padding-top :0 !important;
}
.blog-wrapper.blog-single.page-wrapper{
		padding-top : 30px;
}
:root :where(.wp-element-button, .wp-block-button__link){
		background-color : var(--fs-color-secondary) !important;
		border-radius : 10px ;
}

.blog-wrapper.blog-single.page-wrapper .entry-title{
		color : #000;
}
.blog-wrapper.blog-single.page-wrapper .entry-category a{
		color : var(--fs-color-secondary) !important;
}
.entry-content.single-page strong {
		font-weight: 600;
}
#comments .comment-respond{
		display : none;
}
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

/* Đường kẻ đầy đủ */
.entry-content table,
.entry-content table th,
.entry-content table td {
  border: 1px solid #dcdcdc;
}

/* Padding ô */
.entry-content table th,
.entry-content table td {
  padding: 10px 14px;
}

/* Zebra rows */
.entry-content table tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

.entry-content table tbody tr:nth-child(even) {
  background-color: #f7f7f7;
}
.entry-content{
    text-align: justify;
    padding-top: 0 !important;
}
.single-post article {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
}

h6.entry-category {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

h6.entry-category:hover {
    transform: scale(1.05);
    transition: all 0.3s ease;
}

h6.entry-category.is-xsmall > a {
    padding: 8px;
    font-size: 14px !important;
}

.blog-wrapper.blog-single.page-wrapper .entry-category a {
    color: #ffffff !important;
    text-transform: capitalize;
}
.entry-image img{
    border-radius: 30px;
    padding-bottom: 10px;
}
/* 2. Tiêu đề bài viết (Tự động nhận diện H1 của Flatsome) */
.single-post .entry-title {
    margin-top:35px;
    font-size: 35px !important;
    font-weight: 600 !important;
    color: #000 !important;
    line-height: 1.2 !important;
    letter-spacing: -1px !important;
}

/* 3. Phân cấp nội dung (Heading H2, H3 trong nội dung) */
.single-post .entry-content h2, 
.single-post .entry-content h3,
.single-post .entry-content p strong u {
    display: block;
    font-size: 24px !important;
    color: #84150E !important;
    text-decoration: none !important;
    padding-left: 20px;
    border-left: 6px solid #84150E;
    line-height: 1.3;
}

/* 4. Tối ưu hình ảnh trong bài viết */
.single-post .entry-content img {
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    margin: 30px 0 !important;
}

/* 5. Style cho danh sách (Bullet points) */
.single-post .entry-content ul {
    list-style: none !important;
    padding-left: 0 !important;
}

.single-post .entry-content ul li {
    position: relative;
    padding-left: 30px !important;
    margin-bottom: 15px !important;
    line-height: 1.7;
}

.single-post .entry-content ul li::before {
    content: "●"; /* Dấu chấm tròn màu đỏ đô */
    position: absolute;
    left: 0;
    color: #84150E;
    font-size: 18px;
    line-height: 1;
}

/* 6. Thẻ Table (Bảng biểu tự động ăn theo) */
.single-post table {
    width: 100% !important;
    border-collapse: collapse;
    margin: 30px 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eee;
}

.single-post table tr:first-child td,
.single-post table th {
    background-color: #84150E !important;
    color: #ffffff !important;
    font-weight: bold;
    text-transform: uppercase;
    padding: 15px !important;
}

.single-post table td {
    padding: 12px 15px !important;
    border-bottom: 1px solid #eee;
}

/* 7. Đoạn trích dẫn (Blockquote / Lưu ý) */
.single-post blockquote,
.single-post .entry-content em {
    background: #fdf2f1 !important;
    border-left: 5px solid #84150E !important;
    padding: 25px !important;
    border-radius: 0 15px 15px 0;
    font-style: normal !important;
    display: block;
    margin: 30px 0;
    color: #444;
}

/* ============================================================
   LS CONTACT SECTION - PREMIUM ICON BOX STYLE
   ============================================================ */

.ls-contact-section {
    padding: 80px 15px;
    background-color: #fff;
    text-align: center;
}

/* Thêm một icon nhỏ phía trên tiêu đề để trang trí (Tùy chọn) */
.ls-contact-header::before {
    content: "★";
    display: block;
    color: #84150e;
    font-size: 24px;
    margin-bottom: 10px;
}

.ls-contact-title {
    font-size: 36px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.ls-contact-subtitle {
    color: #666;
    margin-bottom: 50px;
}

.ls-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px;
}

.ls-icon-box-top {
    width: 80px;
    height: 80px;
    background-color: #84150E; /* Đổi sang đỏ đô Lucky Star */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 30px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(132, 21, 14, 0.2);
}

.ls-contact-item:hover .ls-icon-box-top {
    transform: translateY(-10px);
    background-color: #fab1a0;
}

.ls-contact-item h3 {
    color: #84150E;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.ls-contact-item p {
    color: #444;
    margin: 5px 0;
    font-weight: 500;
}

/* Responsive cho điện thoại */
@media (max-width: 768px) {
    .ls-contact-grid {
        grid-template-columns: 1fr;
    }
    .ls-hero-container {
        flex-direction: column;
    }
    .ls-bg-text {
        font-size: 40px;
    }
}

/* --- TỔNG THỂ KHUNG FORM --- */
.ls-outer-form {
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 45px rgba(0,0,0,0.07);
}

/* --- BỐ CỤC ICON BÊN NGOÀI --- */
.ls-input-wrapper {
    display: flex;
    align-items: center; 
    margin-bottom: 25px;
    gap: 15px;
}

.ls-input-wrapper.textarea-align {
    align-items: flex-start;
}

/* --- HỘP CHỨA ICON --- */
.ls-icon-box {
    width: 40px !important;
    height: 40px !important;
		margin: 0 !important;
    min-width: 40px !important;
    background: #fdf2f1; 
    color: #84150E;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px !important;
    transition: all 0.3s ease;
    border: 1px solid rgba(132, 21, 14, 0.1);
}

/* --- Ô NHẬP LIỆU --- */
.ls-field-box {
    flex-grow: 1;
}

.ls-outer-form input:not([type="submit"]),
.ls-outer-form select,
.ls-outer-form textarea {
    width: 100% !important;
    border: 1px solid #e1e1e1 !important;
    background: #fff !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
}

/* --- HIỆU ỨNG KHI ACTIVE --- */
.ls-input-wrapper:focus-within .ls-icon-box {
    background: #84150E;
    color: #fff;
    transform: scale(1.1);
}

.ls-outer-form input:focus,
.ls-outer-form select:focus,
.ls-outer-form textarea:focus {
    border-color: #84150E !important;
    box-shadow: 0 5px 15px rgba(132, 21, 14, 0.05) !important;
    outline: none !important;
}

/* --- NÚT GỬI (BUTTON) --- */
.ls-submit-center {
    text-align: center;
    margin-top: 10px;
}

.ls-submit-center input[type="submit"] {
    background: #84150E !important;
    color: #fff !important;
    padding: 16px 50px;
    font-weight: 700 !important;
    text-transform: uppercase;
    border-radius: 50px !important;
    border: none !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
    box-shadow: 0 10px 20px rgba(132, 21, 14, 0.2) !important;
}

.ls-submit-center input[type="submit"]:hover {
    background: #1a1a1a !important;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15) !important;
}

/* ============================================================
   STYLE THÔNG BÁO LỖI (WPCF7 NOT VALID TIP)
   ============================================================ */

/* 1. Căn chỉnh vị trí thông báo */
.wpcf7-not-valid-tip {
    color: #84150E !important; /* Màu đỏ đô chủ đạo */
    font-size: 13px !important;
    font-weight: 600 !important;
    display: block !important;
    margin-top: 8px !important;
    padding-left: 2px;
    position: relative;
    animation: ls-shake 0.4s ease-in-out; /* Hiệu ứng rung nhẹ khi hiện lỗi */
}

/* 2. Thêm một icon cảnh báo nhỏ trước dòng chữ */
.wpcf7-not-valid-tip::before {
    content: "\f06a"; /* Icon exclamation-circle từ FontAwesome */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 6px;
    font-size: 14px;
}

/* 3. Hiệu ứng rung (Shake) để thu hút sự chú ý */
@keyframes ls-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* 4. Highlight ô nhập liệu khi có lỗi */
.wpcf7-not-valid {
    border-color: #84150E !important;
    background-color: #fff5f4 !important; /* Nền hồng cực nhạt khi lỗi */
    transition: all 0.3s ease;
}

/* 5. Tùy chỉnh hộp icon bên ngoài khi ô đó bị lỗi */
.ls-input-wrapper:has(.wpcf7-not-valid) .ls-icon-box {
    background-color: #84150E !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(132, 21, 14, 0.3);
}

/* --- TỔNG THỂ --- */
.ls-contact-page-wrapper {
    padding: 50px 0;
    max-width: 1250px;
    margin: 0 auto;
}

/* --- STYLE CHO BẢN ĐỒ --- */
.ls-contact-map-container {
    height: 100%;
    min-height: 500px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    border: 1px solid #eee;
}

.ls-map-info-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: #84150E;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 5px 15px rgba(132, 21, 14, 0.4);
    z-index: 10;
}

/* --- STYLE CHO PHẦN FORM --- */
.ls-form-side {
    height: 100%;
}

/* Đảm bảo form cũng có độ cao tương đương map */
.ls-outer-form { /* Đây là class từ bước trước tôi đã gửi */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Hiệu ứng di động */
@media (max-width: 849px) {
    .ls-contact-map-container {
        min-height: 350px;
        margin-bottom: 30px;
    }
}
/* Search */
.search-bar {
	max-width : 800px;
	margin : 0 auto 40px auto;
    padding: 5px;
    height: 60px;
    display: flex;
    align-items: center;
    border-radius: 999px;
}

.search-bar input {
    flex: 1;
    height: 100%;
    border: 1px solid;
    outline: none;
    padding: 0 25px;
    font-size: 18px;
    border-radius: 999px;
}

.search-bar input::placeholder {
    color: #aaa;
}

.search-bar button {
    height: 48px;
    margin-left: 6px;
    border: none;
    cursor: pointer;
    background: var(--fs-color-secondary);
		border-radius : 15px;
    display: flex;
    align-items: center;
    justify-content: center;
		color : #fff;
}
.search-bar button:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

.search-bar button:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.search-bar button span {
    color: #fff;
    font-size: 22px;
}

/* Bộ lọc */

.filter-checkbox span{
    font-weight: 600;
}
.filter-checkbox input{
    margin-bottom: 0 !important;
}
.posts-filter-layout {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 30px;
}

.posts-left {
    min-width: 0;
}

.filter-right {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    position: sticky;
    top: 20px;
}

.filter-group {
    margin-bottom: 30px;
    text-align: left;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

.filter-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #fff;
    border-bottom: 2px solid #84150E;
    cursor: pointer;
    user-select: none;
}


.filter-group h4 {
    font-size: 16px;
    margin: 0;
    padding: 0;
    font-weight: 700;
    color: #84150E;
    text-transform: uppercase;
    border: none;
    line-height: 1;
}

.filter-toggle-arrow {
    font-size: 20px;
    color: #84150E;
    font-weight: bold;
    transition: transform 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    line-height: 1;
    flex-shrink: 0;
}

.filter-group.collapsed .filter-toggle-arrow {
    transform: rotate(-90deg);
}

.filter-group-content {
    padding: 15px 20px;
    background: #fafafa;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}

.filter-checkbox input {
    width: 16px;
    height: 16px;
}

.posts-loading-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #666;
    justify-content: center;
}

.posts-loading-inline .spinner {
    width: 14px;
    height: 14px;
    border: 2px solid #ddd;
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.school-card .school-body div.tags > span {
    color: #84150e !important;
}
/* Bài viết ở trang chủ */

/* Ép Tiêu đề đúng 2 dòng */
.blog-post-inner .post-title, 
.blog-post-inner .post-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
    height: 3em !important; /* Độ cao cố định cho 2 dòng */
    line-height: 1.5em !important;
}

/* Ép Nội dung đúng 4 dòng */
.blog-post-inner .from_the_blog_excerpt {
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    height: 6em !important; /* 1.5em (line-height) x 4 dòng = 6em */
    line-height: 1.5em !important;
    margin-bottom: 0 !important;
}

/* Xử lý khoảng cách Divider */
.blog-post-inner .is-divider {
    margin: 10px 0 !important;
    max-width: 30px !important; /* Làm divider ngắn lại cho sang */
    height: 2px !important;
}


/* ============================================================
   Custom CSS Web
   ============================================================ */
  /* 1. ĐỊNH DẠNG TITLE CHÍNH (MENU CẤP 1) */
.header-nav-main > li > a {
    position: relative;
    font-size: 14px !important;
    color: #000;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    padding: 15px 14px !important;
    transition: color 0.3s ease;
	font-weight : 600 !important;
}


/* STYLE KHU VỰC TRƯỜNG HỌC */
/* ================================
   PARTNER SECTION
================================ */
.partner-section {
  background: linear-gradient(135deg, rgb(230, 249, 250) 0%, rgb(227, 242, 253) 100%) !important;
  padding: 35px 0 55px;
  position: relative;
}

/* title */
.partner-section h2 {
	color: var(--fs-color-secondary) !important;
    line-height: 2.2;
    font-size: 40px;
    text-align: center;
    color: #fff;
    margin-bottom: 12px;
}

.partner-section .line-text {
  width: 160px;
  height: 3px;
  background: #ff6a00;
  margin: 0 auto 40px;
}

/* ================================
   SLIDER WRAPPER (KHÔNG CẮT)
================================ */
.partner-slider {
  width: calc(6 * 150px + 5 * 24px); /* 6 slide */
  margin: 0 auto;
  position: relative;
}

/* ================================
   SWIPER – CHỈ CẮT SLIDE Ở ĐÂY
================================ */
.partner-slider.swiper {
  overflow: hidden;
}

/* ================================
   SLIDES
================================ */
.partner-slider .swiper-wrapper {
  align-items: center;
}

.partner-slider .swiper-slide {
  width: 150px !important;
  display: flex;
  justify-content: center;
}

/* card */
.partner-slider .img-hover {
  width: 150px;
  height: 75px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .25s ease;
}

.partner-slider .img-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}

/* logo */
.partner-slider img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  pointer-events: none;
}

/* ================================
   NAVIGATION BUTTONS (ĐẸP + KHÔNG BỊ MẤT)
================================ */
.partner-slider .swiper-button-prev,
.partner-slider .swiper-button-next {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
}

.partner-slider .swiper-button-prev::after,
.partner-slider .swiper-button-next::after {
  font-size: 18px;
  color: #fff;
  font-weight: bold;
}

/* vị trí */
.partner-slider .swiper-button-prev {
  left: -70px;
}

.partner-slider .swiper-button-next {
  right: -70px;
}

/* ================================
   DRAG FIX
================================ */
.partner-slider .swiper-wrapper {
  cursor: grab;
}

.partner-slider .swiper-slide {
  user-select: none;
}

/* ================================
   RESPONSIVE
================================ */
@media (max-width: 1024px) {
  .partner-slider {
    width: calc(3 * 150px + 2 * 24px);
  }
}

@media (max-width: 768px) {
  .partner-slider {
    width: calc(2 * 150px + 1 * 24px);
  }
}


/* STYLE KHU VỰC NỔI TIẾNG */
/* =========================
   REGION PEEK - CLEAN CSS
   ========================= */

.search-wrapper.region-peek{
  background: transparent;
  padding-bottom: 30px ;
	
}

/* Title + Tabs */
.search-wrapper.region-peek .wrapper h2{
  text-align: center;
  margin: 0 0 14px;
  color: #fff;
}
.search-wrapper.region-peek .tabs-nav{
  display: flex;
  justify-content: center;
  gap: 34px;
  margin: 0 0 18px;
  padding: 0 0 10px;
  list-style: none;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.search-wrapper.region-peek .tab-item{
  cursor: pointer;
  font-size: 17px;
  position: relative;
  opacity: .8;
  user-select: none;
}
.search-wrapper.region-peek .tab-item:hover{opacity: 1;}
.search-wrapper.region-peek .tab-item.active{
  opacity: 1;
  font-weight: 700;
}
.search-wrapper.region-peek .tab-item.active:after{
  content: "";
  width: 100%;
  height: 3px;
  background: #ff6a00;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 99px;
}

/* ===== SLIDER WRAP ===== */
.search-wrapper.region-peek .region-slider-wrap{
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  padding-top: 30px; 
  overflow: visible;
}
.search-wrapper.region-peek .region-swiper{
  overflow: visible;
  padding: 0 140px; /* để lộ 2 bên */
}

/* Slide peek states */
.search-wrapper.region-peek .swiper-slide{
  width: 78%;
  transition: transform .35s ease, opacity .35s ease, filter .35s ease;
  opacity: .55;
  filter: saturate(.85);
  cursor: pointer;
}
.search-wrapper.region-peek .swiper-slide-active{
  opacity: 1;
  filter: saturate(1);
}
.search-wrapper.region-peek .swiper-slide-prev,
.search-wrapper.region-peek .swiper-slide-next{
  opacity: .75;
}

/* ===== CARD IMAGE ===== */
.search-wrapper.region-peek .region-slide{
  position: relative !important;
  height: 460px;                 /* QUAN TRỌNG: bạn thiếu height nên text dễ “lạc” */
  border-radius: 26px;
  overflow: hidden !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  background: #000;              /* fallback */
}

/* đảm bảo theme không chèn lớp pseudo khác */
.search-wrapper.region-peek .region-slide::after{
  content: none !important;
}

/* overlay gradient (CHỈ 1 LẦN) */
.search-wrapper.region-peek .region-slide::before{
  content:"" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.18) 58%, rgba(0,0,0,0)) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* IMG */
.search-wrapper.region-peek .region-slide > img.region-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  opacity: 1 !important;
  filter: none !important;
  position: relative !important;
  z-index: 1 !important;
  transform: translateZ(0) !important;
}

/* ===== CAPTION (TEXT) ===== */
.search-wrapper.region-peek .region-slide > .region-caption{
  position: absolute !important;
  left: 50% !important;
  bottom: 26px !important;              /* nằm dưới */
  transform: translateX(-50%) !important;
  width: min(900px, 88%) !important;

  text-align: center !important;
  color: #fff !important;
  z-index: 3 !important;                 /* trên overlay */
  pointer-events: none !important;

  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;

  text-shadow: 0 6px 22px rgba(0,0,0,.65) !important;
}

.search-wrapper.region-peek .region-slide > .region-caption h3{
  margin: 0 0 8px !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: #fff !important;
  text-transform: none !important;
}

.search-wrapper.region-peek .region-slide > .region-caption p{
  margin: 0 !important;
  font-size: 15.5px !important;
  line-height: 1.5 !important;
  opacity: .95 !important;
  color: #fff !important;
}

/* ===== NAV BUTTONS ===== */
.search-wrapper.region-peek .region-btn{
  width: 56px;
  height: 56px;
  border: none;
  background: transparent;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999999 !important;
  cursor: pointer;
  pointer-events: auto;
}
.search-wrapper.region-peek .region-prev{left: 60px;}
.search-wrapper.region-peek .region-next{right: 60px;}

.search-wrapper.region-peek .region-btn:before{
  content:"";
  display:block;
  width: 18px;
  height: 18px;
  border-top: 4px solid #ff3b30;
  border-right: 4px solid #ff3b30;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%) rotate(225deg);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
.search-wrapper.region-peek .region-next:before{
  transform: translate(-50%,-50%) rotate(45deg);
}

/* Pagination */
.search-wrapper.region-peek .region-pagination{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top: 14px;
}
.search-wrapper.region-peek .region-pagination .swiper-pagination-bullet{
  width: 8px;
  height: 8px;
  opacity: .35;
}
.search-wrapper.region-peek .region-pagination .swiper-pagination-bullet-active{
  opacity: 1;
}

/* Responsive */
@media (max-width: 1024px){
  .search-wrapper.region-peek .region-swiper{
		padding: 0 70px;
	}
  .search-wrapper.region-peek .swiper-slide{
		width: 86%;
	}
  .search-wrapper.region-peek .region-slide{
		height: 380px; 
		border-radius: 20px;
	}
  .search-wrapper.region-peek .region-prev{
		left: 20px;
	}
  .search-wrapper.region-peek .region-next{
		right: 20px;
	}
  .search-wrapper.region-peek .region-slide > .region-caption h3{
		font-size: 26px !important;
	}
}

@media (max-width: 768px){
  .search-wrapper.region-peek .tabs-nav{
		gap: 16px; 
		flex-wrap: wrap;
	}
.search-wrapper.region-peek.region-swiper{
	padding: 0 20px;
	}
 .search-wrapper.region-peek .swiper-slide{
		width: 94%;
	}
  .search-wrapper.region-peek .region-slide{
		height: 300px; 
		border-radius: 14px;
	}
.search-wrapper.region-peek .region-slide > .region-caption{
    bottom: 16px !important;
    width: 92% !important;
  }
  .search-wrapper.region-peek .region-slide > .region-caption h3{
		font-size: 22px !important;
	}
  .search-wrapper.region-peek .region-slide > .region-caption p{
		font-size: 14px !important;
	}
.search-wrapper.region-peek .region-btn{
		display:none;
	}
}










/* 2. HIỆU ỨNG HOVER ĐƯỜNG GẠCH CHÂN (UNDERLINE ANIMATION) */
.header-nav-main > li > a::before {
    content: "";
    position: absolute;
    bottom: 5px; /* Vị trí của đường gạch chân */
    left: 12px;
    right: 12px;
    height: 2px;
    background-color: var(--fs-color-secondary);
    transform: scaleX(0); /* Ban đầu ẩn */
    transform-origin: right;
    transition: transform 0.4s ease-out;
}

.header-nav-main > li:hover > a::before {
    transform: scaleX(1); /* Hiện ra khi hover */
    transform-origin: left;
}

.header-nav-main > li:hover > a {
    color: var(--fs-color-secondary) !important;
}

/* 3. STYLE CHO CÁC TITLE TRONG DROP-DOWN (Cấp 2 - Nếu có) */
/* Dành cho các tiêu đề cột trong Mega Menu */
li.nav-dropdown-col {
    width: max-content !important;
}

.nav-dropdown-col > a {
    color: var(--fs-color-secondary) !important; /* Màu cam nổi bật cho tiêu đề nhóm */
    font-weight: 800 !important;
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
    display: block;
    text-transform: uppercase;
    font-size: 13px !important;
}

li#menu-item-121 > a {
    color: var(--fs-color-secondary) !important; /* Màu cam nổi bật cho tiêu đề nhóm */
    font-weight: 800 !important;
    border-bottom: 1px solid #eee !important; 
    margin-bottom: 8px;
    display: block;
    text-transform: uppercase;
    font-size: 13px !important;
    width: max-content;
}


li#menu-item-121 > a:hover {
    color: white !important;
}

/* 4. HIỆU ỨNG HOVER CHO CÁC ITEM CON (SUB-MENU) */
.nav-dropdown li a {
    position: relative;
    transition: all 0.3s ease !important;
}

ul.sub-menu.nav-dropdown.nav-dropdown-bold {
    border: 1px solid var(--fs-color-secondary);
}
.nav-dropdown.nav-dropdown-bold>li>a:hover{
	color: var(--fs-color-secondary) !important;
	background : #fafafa !important;
}
.nav-dropdown-bold .nav-column li>a:hover{
	color: var(--fs-color-secondary) !important;
	background : #fafafa !important;
}

.nav-dropdown li a:hover::before {
    opacity: 1;
    left: 8px;
}

/* 5. STYLE RIÊNG CHO NÚT LIÊN HỆ (ID 137) */
ul.sub-menu.nav-dropdown.nav-dropdown-bold {
    padding: 5px 0;
}

ul.sub-menu.nav-column.nav-dropdown-bold > li > a {
    padding: 8px;
}

/* Loại bỏ gạch chân cho nút Liên hệ */
#menu-item-137 a {
   color: var(--fs-color-secondary) !important;
}

/* 6. LÀM ĐẸP THANH TÌM KIẾM KHI HOVER */
.header-search:hover i {
    color: #e67e22;
    transform: scale(1.1);
}
.header-nav.header-nav-main.nav.nav-right.nav-uppercase li{
	margin : 0;
}
.nav-dropdown li.active>a{
    color: var(--fs-color-secondary) !important;
}
/* Search button */

.nav-dropdown.nav-dropdown-bold {
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: none;
    min-width: 350px;
}

/* Tùy chỉnh thanh Input bao ngoài */
.searchform-wrapper .flex-row {
    background-color: #f4f7f6; 
    border-radius: 50px; 
    padding: 5px 5px 5px 20px;
    transition: all 0.3s ease;
    border: 1px solid #eee; 
}

/* Hiệu ứng khi click vào ô search - đồng bộ màu secondary */
.searchform-wrapper .flex-row:focus-within {
    background-color: #fff;
    border-color: var(--fs-color-secondary) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05); /* Đổ bóng nhẹ trung tính */
}

.search-field.mb-0, 
.search-field.mb-0:focus {
    border: none !important;
    background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 15px;
  color: #333;
  padding: 10px 0;
	color: var(--fs-color-secondary) !important;
}
.search-field.mb-0::placeholder {
    color: var(--fs-color-secondary);
    opacity: 0.6;
}
/* Tùy chỉnh nút Search (Icon) */
.ux-search-submit.submit-button {
    background-color: var(--fs-color-secondary) !important;
    border-radius: 50% !important;
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border: none !important;
}


.ux-search-submit.submit-button:hover {
    transform: scale(1.05);
    filter: brightness(90%);
}

.ux-search-submit i.icon-search {
    font-size: 18px;
    color: #fff !important;
    margin: 0;
}

/* Style cho kết quả gợi ý (Live Search) */
.autocomplete-suggestions {
    border-radius: 8px;
    margin-top: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border: 1px solid #eee;
    overflow: hidden;
}

/* Search button */


/* TRANG TIN TUC */


/* 1. Tạo khoảng cách (Gap) giữa các thẻ mà không phá vỡ Layout Masonry */
.col.post-item {
    padding: 15px !important; /* Đây là cách an toàn nhất để tạo Gap trong Flatsome */
}

/* 2. Cấu trúc thẻ bài viết */
.post-item .col-inner {
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid #efefef;
    transition: all 0.3s ease;
    height: 100% !important; /* Đảm bảo col-inner luôn cao hết mức */
    overflow: hidden;
    display: flex;
}

.box-blog-post {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100%;
    min-height: 400px; /* Chiều cao tối thiểu cho toàn bộ thẻ */
    margin-bottom: 0 !important;
}

/* 3. Cố định phần ảnh (Để không bị mất ảnh) */
.box-image {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.image-cover {
    position: relative !important;
    width: 100% !important;
    padding-top: 56.25% !important; /* Giữ tỷ lệ 16:9 cho ảnh */
}

.image-cover img {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Ảnh luôn đầy khung không bị méo */
}

/* 4. Căn chỉnh phần nội dung chữ */
.box-text {
    flex-grow: 1 !important; /* Đẩy phần text rộng ra để các thẻ cao bằng nhau */
    display: flex !important;
    flex-direction: column !important;
    padding: 20px !important;
    background: #fff !important;
}

.box-text-inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Tiêu đề bài viết */
.post-title {
    font-size: 18px !important;
    line-height: 1.4;
    min-height: 50px; /* Đồng nhất chiều cao tiêu đề */
    margin-bottom: 10px;
}

.post-title a {
    color: #111 !important;
    font-weight: 700 !important;
}

/* Đoạn trích bài viết */
.from_the_blog_excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    flex-grow: 1; /* Chiếm diện tích còn lại */
}

/* ÉP DIVIDER DÀI RA TUYỆT ĐỐI */
.is-divider {
    background-color: var(--fs-color-secondary) !important;
}

/* HIỆU ỨNG KHI HOVER VÀO THẺ BÀI VIẾT */
.col-inner:hover .is-divider {
    width: 300px !important;
    min-width: 250px !important;
    opacity: 1 !important;
    background-color: var(--fs-color-secondary) !important;
}
/* TRANG TIN TUC */

.partner-slider.swiper.swiper-initialized.swiper-horizontal {
    padding: 20px;
}

/* Làm hiệu ứng trượt trơn tru (Linear timing) */
.partner-slider .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* Style cho logo đối tác đẹp hơn */
.img-swiper {
    filter: none; 
    opacity: 1;
    transition: 0.3s all;
    object-fit: contain;
}

.img-swiper:hover {
    filter: grayscale(0%); 
    opacity: 1;
}

/* Ẩn nút nếu bạn muốn slider chỉ tự trôi */
.partner-slider .swiper-button-next, 
.partner-slider .swiper-button-prev {
    color: #84150E; /* Màu đỏ đô của bạn */
    transform: scale(0.7);
}

/* FIX TRANG LIÊN HỆ */
.input_fix{
	padding-bottom: 0 !important;
}
.wpcf7-submit{

	margin-left: 15% !important;
}

.ls-icon-box-top {
	background-color: #fff !important;
	border: 1px solid #84150E;
}
.ls-icon-box-top i{
	color: #84150E; 
}
.ls-icon-box-top:hover {
  background-color: #84150E !important;
}

.ls-icon-box-top:hover i {
  color: #fff;
}


/* Container bao ngoài: CHUYỂN SANG GRID ĐỂ CHIA 2 CỘT */
.ls-staff-container-page {
    max-width: 1140px; /* Tăng chiều rộng để đủ chỗ cho 2 thẻ */
    margin: 40px auto;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Chia 2 cột bằng nhau */
    gap: 25px; /* Khoảng cách giữa các thẻ */
}

/* Thẻ nhân sự: NỀN TRẮNG, VIỀN ĐỎ */
.ls-staff-card-page {
    display: flex;
    align-items: center;
    background: #ffffff !important;
    border: 2px solid #84150E !important;
    border-radius: 25px;
    padding: 20px;
    /* SHADOW MÀU ĐEN #000 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); 
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}

.ls-staff-card-page:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); /* Shadow đậm hơn khi hover */
    background: #fffafa !important; /* Đổi màu nền nhẹ khi hover */
}

/* Khung ảnh chân dung */
.ls-staff-image-page {
    flex: 0 0 130px; /* Chỉnh lại kích thước ảnh để cân đối 2 cột */
    height: 170px;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
}

.ls-staff-image-page img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.ls-staff-card-page:hover .ls-staff-image-page img {
    transform: scale(1.1);
}

/* THÔNG TIN CHỮ: TẤT CẢ SANG MÀU ĐỎ ĐÔ */
.ls-staff-info-page {
    padding-left: 20px;
    flex: 1;
}

.ls-staff-info-page h3 {
    color: #84150E !important;
    font-size: 20px !important; /* Giảm nhẹ size chữ để phù hợp 2 cột */
    margin: 0 0 5px 0 !important;
    font-weight: 800 !important;
}

.ls-role-page {
    color: #84150E !important;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px !important;
    opacity: 0.9;
}

.ls-details-page {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ls-details-page li {
    color: #84150E !important;
    font-size: 13.5px;
    line-height: 1.4;
    margin-bottom: 5px;
    padding-left: 18px;
    position: relative;
    opacity: 0.85;
}

.ls-details-page li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #84150E;
    font-weight: bold;
    font-size: 12px;
}

/* Mobile Responsive: Quay về 1 cột trên điện thoại */
@media (max-width: 992px) {
    .ls-staff-container-page {
        grid-template-columns: 1fr;
        max-width: 600px;
    }
}

@media (max-width: 480px) {
    .ls-staff-card-page {
        flex-direction: column;
        text-align: center;
    }
    .ls-staff-info-page {
        padding-left: 0;
        padding-top: 15px;
    }
    .ls-details-page li {
        text-align: left;
    }
}

/* Cộng tác viên */
/* Tiêu đề phần cộng tác viên */
.ls-section-title-page {
    color: #84150E !important;
    text-align: center;
    font-weight: 800;
    margin: 40px 0 20px 0 !important;
    text-transform: uppercase;
    font-size: 24px;
}

/* Lưới hiển thị 5 cột trên PC */
.ls-collaborator-grid-page {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px;
}

/* Thẻ cộng tác viên nhỏ gọn */
.ls-collab-card-page {
    background: #fff;
    border: 1.5px solid #84150E;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.ls-collab-card-page:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Ảnh cộng tác viên */
.ls-collab-image-page {
    width: 100%;
    aspect-ratio: 3/4; /* Giữ ảnh luôn cùng tỷ lệ */
    overflow: hidden;
    border-bottom: 1px solid #84150E;
}

.ls-collab-image-page img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.ls-collab-card-page:hover .ls-collab-image-page img {
    transform: scale(1.1);
}

/* Tên cộng tác viên phía dưới */
.ls-collab-info-page {
    padding: 10px 5px;
    background: #fdfdfd;
}

.ls-collab-info-page h4 {
    color: #84150E !important;
    font-size: 15px !important;
    margin: 0 !important;
    font-weight: 700;
}

/* Responsive: 2 cột trên Mobile, 3 cột trên Tablet */
@media (max-width: 768px) {
    .ls-collaborator-grid-page {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .ls-collaborator-grid-page {
        grid-template-columns: repeat(2, 1fr);
    }
    .ls-section-title-page {
        font-size: 20px;
    }
}

/* Cấu hình Font chữ và Container */
.ls-teacher-container-page {
    max-width: 1140px;
    margin: 40px auto;
    /* Sử dụng font chữ hiện đại, nét mảnh dễ đọc */
    font-family: "Montserrat", Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
}

.ls-table-title-page {
    color: #84150E;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 28px !important; /* Tăng size tiêu đề */
    letter-spacing: 1px;
    margin-bottom: 30px !important;
}

/* Hiệu ứng Bảng và Shadow #000 */
.ls-teacher-table-page {
    display: flex;
    flex-direction: column;
    border: 1px solid #e1e1e1;
    border-radius: 12px;
    overflow: hidden;
    /* Đổ bóng đen #000 rõ nét hơn */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.ls-teacher-row-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #eee;
}

.ls-teacher-card-page {
    display: flex;
    align-items: center;
    padding: 25px 20px;
    background: #fff;
    transition: background 0.3s;
    border-right: 1px solid #eee;
}

.ls-teacher-card-page:nth-child(even) { border-right: none; }
.ls-teacher-card-page:hover { background: #fcfcfc; }

/* Kích thước ảnh */
.ls-teacher-img-page {
    flex: 0 0 110px;
    height: 140px;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.ls-teacher-img-page img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* CHỈNH SIZE CHỮ CHI TIẾT */
.ls-teacher-info-page h4 {
    color: #84150E !important;
    font-size: 16px !important; /* Size tên giảng viên */
    font-weight: 700 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.2;
}

.ls-teacher-info-page p {
    font-size: 13.5px !important; /* Size thông tin bằng cấp */
    color: #444 !important;
    line-height: 1.5 !important;
    margin: 4px 0 !important;
    font-weight: 400;
}

.ls-teacher-email-page {
    display: block;
    margin-top: 10px;
    font-size: 12px !important; /* Size email nhỏ hơn */
    color: #0066cc !important;
    font-weight: 500;
    text-transform: lowercase;
}

/* Responsive cho Mobile */
@media (max-width: 768px) {
    .ls-teacher-row-page { grid-template-columns: 1fr; }
    .ls-teacher-card-page { border-right: none; border-bottom: 1px solid #eee; }
    .ls-teacher-info-page h4 { font-size: 15px !important; }
}

#aquavn-header{
  position: fixed !important;
  top: 0 !important;
  left : 0 !important;
  right: 0 !important; 
}

.header-main {
  position: fixed !important;
  top: 0 !important;
  left : 0 !important;
  right: 0 !important; 
  z-index: 999 !important;
  background-color: #fff !important;
}

/* Nút bật bộ lọc */
/* NÚT FILTER MOBILE */
.mobile-filter-toggle {
    display: none;
    width: 70px;
    border: none;
    margin-bottom: 15px;
}

/* MOBILE */
@media (max-width: 768px) {
    #edu-results{
		grid-template-columns : repeat(1,1fr) !important;
    }
    .tabs-nav{
		gap : 15px !important;
    }
    .tab-content{
		margin-top : 50px !important;
    }
    .posts-filter-layout{
		grid-template-columns : 1fr !important;
        gap : 5px;
    }
    /* Hiện nút */
    .mobile-filter-toggle {
        display: block;
        width: 70px;
        padding: 12px;
        margin-bottom: 15px;
    }

    /* Ẩn filter ban đầu */
    .edu-filter{
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        height: 100vh;
        background: #fff;
        z-index: 9999;
        overflow-y: auto;
        padding: 20px;
        transition: 0.3s ease;
        box-shadow: 2px 0 10px rgba(0,0,0,0.15);
    }

    /* Khi active */
    .edu-filter.active {
        left: 0;
    }
    .posts-filter-layout {
        position: relative;
    }
    .filter-right{
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        height: 100vh;
        background: #fff;
        z-index: 9999;
        overflow-y: auto;
        padding: 20px;
        transition: 0.3s ease;
        box-shadow: 2px 0 10px rgba(0,0,0,0.15);
    }

    /* Khi active */
    .filter-right.active {
        left: 0;
    }
    /* Overlay */
    .filter-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 9998;
        display: none;
    }

    .filter-overlay.active {
        display: block;
    }
    
}
.filter-overlay{
    display:  none;
}