/*!
 * Landing Page CSS - Main Styles
 * Chứa các CSS cơ bản, layout chính và desktop styles cho trang LandingPage
 * Version: 1.0
 */

/* ==========================================================================
   Global Base Styles
   ========================================================================== */

html,
body {
    height: auto; /* Thay đổi từ 100% thành auto để cho phép nội dung mở rộng */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto; /* Cho phép scroll dọc */
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Đảm bảo chiều cao tối thiểu là 100vh */
}

/* Đảm bảo không có thanh cuộn ngang */
.row {
    margin-left: 0;
    margin-right: 0;
}

.col-12,
.col-md-12,
.col-lg-6 {
    padding-left: 15px;
    padding-right: 15px;
}

/* ==========================================================================
   Hero Section Layout - Landing Page Specific
   ========================================================================== */

.hero.landing-page {
    min-height: 80vh; /* Giảm từ 100vh xuống 80vh để đảm bảo có scroll */
    display: flex;
    align-items: center;
    padding: 2rem 0;
    flex: 1;
}

.hero.landing-page .container {
    height: 100%;
}

/* ==========================================================================
   Recruitment Section - Đảm bảo có đủ nội dung để scroll
   ========================================================================== */

.recruitment-section {
    min-height: 30vh; /* Tăng chiều cao để đảm bảo có scroll */
    background-color: #f8f9fa;
}

.recruitment-content {
    width: 100%;
}

.recruitment-image img {
    height: auto;
    object-fit: cover;
    max-height: none; /* Bỏ giới hạn chiều cao để hiển thị full ảnh */
    width: 100%; /* Đảm bảo ảnh full width */
}

/* ==========================================================================
   Hide Scroll to Top Button on Landing Page
   ========================================================================== */

.progress-wrap {
    display: none !important; /* Ẩn hoàn toàn button scroll to top trên landing page */
}

/* ==========================================================================
   Logo & Branding
   ========================================================================== */

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    z-index: 10;
    position: relative;
    width: 100%;
}

.logo-everwin {
    max-height: 83px;
    width: auto;
}

.title-everwin {
    color: #2b4577;
    font-size: 2.11rem;
    font-weight: bold;
    margin-left: 0.5rem;
}

/* ==========================================================================
   Section Title & Content
   ========================================================================== */

.section-title {
    text-align: center;
    margin-bottom: 2rem; /* Thêm margin để tạo khoảng cách */
}

.title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.title-site {
    line-height: 1.4;
    margin: 0;
    padding: 0;
}

.title-line {
    display: block;
    white-space: nowrap;
    width: 68%;
    text-align: center;
}

.title-line:first-child {
    margin-bottom: 0.2rem;
}

.title-line:last-child {
    font-weight: 600;
}

.desciption-site {
    margin-top: 1rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* ==========================================================================
   Search Box & Button
   ========================================================================== */

.search-box {
    margin-top: 0.5rem;
    padding: 1rem 0;
    display: flex;
    justify-content: center;
}

.separator {
    display: none;
}

.block-button-search {
    display: flex;
    justify-content: center;
}

.btn-search-location {
    font-size: 1rem;
    padding: 1rem 2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-search-location:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Recruitment Button - Match với btn-default styling
   ========================================================================== */

.recruitment-button {
    margin-top: 1rem;
}

.btn-recruitment {
    position: relative;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1em;
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: 50px; /* Match với btn-default corner radius */
    padding: 17px 30px; /* Match với btn-default padding */
    text-decoration: none;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-recruitment:hover {
    background: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
    text-decoration: none;
}

.btn-recruitment::after,
.btn-recruitment::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: var(--primary-color);
    transform: skew(15deg);
    transition: all 0.4s ease-in-out;
    z-index: -1;
}

.btn-recruitment::before {
    left: -10px;
}

.btn-recruitment::after {
    right: -10px;
}

.btn-recruitment:hover::after,
.btn-recruitment:hover::before {
    width: 60%;
}

.btn-recruitment i {
    margin-right: 8px;
}

/* ==========================================================================
   Hero Content
   ========================================================================== */

.hero-content {
    text-align: center;
    padding: 1rem;
}

/* Desktop specific alignment */
@media (min-width: 992px) {
    .hero-content {
        text-align: left;
    }
}

/* ==========================================================================
   Images - Cải thiện hiển thị hình ảnh
   ========================================================================== */

.mobile-hide {
    display: block;
}

/* Đảm bảo hình ảnh hiển thị đầy đủ và responsive */
.img-fluid {
    max-width: 100% !important; /* Thay đổi từ 133% về 100% để hiển thị bình thường */
    height: auto !important;
    object-fit: contain; /* Đảm bảo hình ảnh không bị cắt */
}

/* Đặc biệt cho ảnh trong recruitment section */
.recruitment-image .img-fluid {
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover; /* Cho ảnh recruitment có thể cover để đẹp hơn */
    border-radius: 8px; /* Thêm border radius cho đẹp */
}

/* ==========================================================================
   VNPT Credit
   ========================================================================== */

.vnpt-credit {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 8px 15px;
    z-index: 1000;
    backdrop-filter: blur(5px);

}

.vnpt-credit span {
    font-size: 14px;
    color: #2b4577;
    font-weight: 500;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.nowrap {
    white-space: nowrap;
}

/* Animation class for title - can be extended later */
.text-anime-style-3 {
    transition: all 0.3s ease;
}

/* ==========================================================================
   Animation Support
   ========================================================================== */

.wow {
    visibility: hidden;
}

.wow.fadeInUp {
    animation: fadeInUp 1s ease-in-out;
    animation-fill-mode: both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* ==========================================================================
   Performance Optimizations
   ========================================================================== */

/* GPU acceleration cho animations */
.hero-content,
.btn-search-location,
.vnpt-credit {
    transform: translateZ(0);
    will-change: transform;
}

/* Tối ưu hóa rendering cho hero section */
.hero-section-optimized {
    contain: layout style paint;
}

/* ==========================================================================
   Desktop Large Screen Specific Fixes
   ========================================================================== */

@media (min-width: 1441px) {
    .hero.landing-page {
        min-height: 75vh; /* Đảm bảo không chiếm hết màn hình */
        padding: 4rem 0; /* Tăng padding */
    }
    
    /*.recruitment-section {
        min-height: 70vh;*/ /* Đảm bảo có đủ chiều cao để scroll */
    /*}*/
    
    /* Đảm bảo có đủ nội dung để scroll */
    body {
        min-height: 150vh; /* Force minimum height to enable scrolling */
    }
}

/* ==========================================================================
   Force Scrolling for All Large Screens
   ========================================================================== */

@media (min-width: 1200px) {
    /* Đảm bảo luôn có thanh scroll */
    html {
        overflow-y: scroll; /* Force scrollbar to always appear */
    }
    
    /* Đảm bảo có đủ nội dung */
    .hero.landing-page + .recruitment-section {
        margin-top: 2rem;
    }
}