@{
    ViewBag.Title = "Home Page";
}

<link rel="stylesheet" href="~/Content/assets/css/animate.css" />
<link rel="stylesheet" href="~/Content/assets/css/home-listening.css" />
@*<link rel="stylesheet" href="~/Content/assets/css/main-listening.css" />*@
<script src="~/Content/assets/js/wow.min.js" type="text/javascript"></script>
<script src="~/Content/assets/js/home-listening.js" type="text/javascript"></script>

@section navMenu{

    <a href="/Listening/" class="nav-link link-home">Home</a>
    <a href="/Common/Course" class="nav-link link-libary">Course</a>
    <a href="/Listening/Method" class="nav-link link-help">Method</a>
    <a href="/Listening/Help" class="nav-link link-help">Help</a>
}

@section menu{
    <a href="/Home/instruction/news/phuong-phap-hoc-tu-vung-tieng-anh-cung-voca-698" class="header-menu-link ">Method</a>
    <a href="/Home/library" class="header-menu-link ">Library</a>
    <a href="javascript:void(0)" class="header-menu-link menu-link-course">Course</a>
    <p class="link-course-group">
        <a href="/Voca/" class="header-menu-link ">VOCABULARY</a>
        <a href="/Grammar/" class="header-menu-link ">GRAMMAR</a>
        <a href="/Listening/" class="header-menu-link ">LISTENING</a>
        <a href="/Music/" class="header-menu-link ">MUSIC</a>
    </p>
    <a href="/Home/support" class="header-menu-link ">Help</a>
}

<!-- Top -->
<div class="home-top" id="top-wide">
    <div class="home-top-bg"></div>
    <div class="home-cover">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <div class="top-left-logo"></div>
                <p class="top-left-text">Avec vous, supprimez la barrière anglaise</p>
                <img class="top-left-image wow  bounceInLeft" data-wow-duration="3s" src="~/Content/assets/imgs/home_travel.png" alt="Avec vous, supprimez la barrière anglaise" />
            </div>

            <div class="col-xs-12 col-sm-6">
                <h1 class="top-right-title">Natural English</h1>
                <h2 class="top-right-des">
                    @NEducation.Content.Texts.Lang.GrammarIsAProductOfUstudyToHelpOvercomingAnObstacle
                @*Natural English là phương pháp học tiếng Anh giao tiếp theo cách tiếp cận tự nhiên, sản phẩm thuộc hệ sinh thái của dự án ngôn ngữ VOCA, được xây dựng nhằm giúp học sinh, sinh viên Việt Nam xoá bỏ rào cản Anh ngữ.*@
                </h2>
                <a href="/Common/course" class="top-right-button">REJOINGNEZ- NOUS!</a>

                <a href="/Common/course" class="top-right-button-free">
                    @NEducation.Content.Texts.Lang.TryForFree
                @*Trải nghiệm miễn phí!*@
                </a>
            </div>
        </div>

    </div>
</div>

<!-- Home teacher -->
<div class="home-teacher-container-top" id="top-m">
    <div class="home-teacher-cover-top">
        <div class="row">
            <div class="col-xs-12">
                <div class="home-teacher-left">
                    <div class="home-teacher-img">
                        <img class="teacher-image" alt="aj hoge" src="https://natural.voca.vn/assets/imgs/voca-man.svg" />
                    </div>
                    <h3 class="home-intro-detail">Học tiếng Anh theo phương pháp Tự nhiên</h3>
                    <a class="home-intro-button" href="/Common/Course">REJOINGNEZ- NOUS!</a>
                    <a class="home-intro-try-free btn-login-system" href="javascript:void(0)">J'ai déjà un compte?</a>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- Sad -->
<div class="home-sad">
    <div class="home-cover">
        <div class="row">
            <div class="col-xs-12 col-sm-7">
                <h3 class="sad-title">Có Phải Bạn Đã Học Tiếng Anh Nhiều Năm Nhưng Vẫn Không Thể Nghe Hay Nói Được Tiếng Anh?</h3>
                <div class="sad-line"></div>
                <p class="sad-text sad-icon">
                    Không chỉ mình bạn đâu, hơn 80% người học tiếng Anh thường mắc phải tình trạng này. Đó là: Có thể đọc hiểu tốt, nhưng không thể nghe hay nói được. Nhiều bạn sinh viên, và cả người đi làm đã dành nhiều thời gian và cả tài chính để theo đuổi các khóa học tiếng Anh tại trung tâm, hay mua các khóa tiếng Anh từ các chương trình nước ngoài nhưng vẫn không thể cải thiện khả năng Nghe tiếng Anh của mình. Và thực trạng phổ biến là nhiều bạn học sinh, sinh viên đã bỏ cuộc giữa chừng vì thiếu động lực học. Thậm chí một số bạn cảm thấy tồi tệ, thất vọng, tự ti về bản thân vì đã không thể theo đuổi tiếp việc học tiếng Anh của mình.

                </p>
                <p class="sad-text sad-icon">
                    Trải qua 5 năm tiếp xúc và dạy tiếng Anh cho học sinh, sinh viên Việt Nam, <span class="text-bold">English ME</span> (tổ chức ngôn ngữ uy tín tại Thành phố Hồ Chí Minh, tiền thân của VOCA ngày nay) đã chỉ ra 2 nguyên nhân chính dẫn tới việc người học tiếng Anh tại Việt Nam không thể nghe hay nói tốt đó là: Lí do thứ nhất là vì các chương trinh tiếng Anh tại Việt Nam quá tập trung vào việc dạy và học ngữ pháp, đọc hiểu. Lí do thứ 2 là vì nội dung giáo trình học rập khuôn, khô khan, dễ gây nhàm chán.

                </p>
                <p class="sad-text sad-icon">
                    Để khắc phục được tình trạng trên, VOCA đã phát triển một phương pháp học tiếng Anh giao tiếp HOÀN TOÀN MỚI - Phương pháp này dựa trên quá trình tiếp cận ngôn ngữ tự nhiên (Natural Language Approach), giúp người học có thể nói tiếng Anh tự tin, tự nhiên và trôi chảy chỉ sau 6 tháng. Hệ thống này có tên gọi là Natural English - Học tiếng Anh giao tiếp theo phương pháp tự nhiên

                </p>



                <p class="sad-text">
                    <span class="text-bold">Bây giờ hãy cùng VOCA khám phá thêm thông tin về phương pháp học tuyệt vời này, và để biết được làm thế nào Natural English có thể giúp bạn cải thiện khả năng Nghe và Nói tiếng Anh của mình chỉ trong 6 tháng thôi nhé.  </span>
                </p>
            </div>
            <div class="col-xs-12 col-sm-5">
                <img class="sad-image  wow  bounceInRight" data-wow-duration="3s" src="~/Content/assets/imgs/voca_sad.png" alt="Có Phải Bạn Đang Gặp Vấn Đề Khi Học Ngữ Pháp Tiếng Anh ?" />
            </div>
        </div>

    </div>
    <div class="sad-bottom">
    </div>
</div>

<!-- Method -->
<div class="home-method">
    <img class="home-method-bg" src="~/Content/assets/imgs/home_content_bg.svg" />
    <div class="home-cover">
        <p class="method-text-top">Natural English là hệ thống học tiếng Anh theo phương pháp tiếp cận tự nhiên, giúp bạn cải thiện khả năng nghe và nói tiếng Anh một cách dễ dàng và nhanh chóng chỉ sau 6 tháng.</p>
        <div class="method-video">
            <div id="video-player"></div>
            <div class="video-layout">
                <div class="layout-cover">
                    <div class="layout-logo"></div>
                    <p class="layout-text">Hệ thống Apprendre l'anglais Vocabulaire thông minh</p>
                </div>
                <span class="layout-button"></span>
            </div>
        </div>
        <h3 class="method-title">Phương pháp học tự nhiên</h3>
        <p class="method-text">Natural English áp dụng phương pháp học ngôn ngữ theo quy trình tiếp cận tự nhiên có tên quốc tế là Natural Approach, phương pháp này được phát triển bởi 2 nhà ngôn ngữ học nổi tiếng là Stephen Krashen và Tracy Terrell, lấy kỹ năng NGHE, NÓI làm chủ đạo, giúp bạn tiếp cận tiếng Anh một cách dễ dàng. Đó là một cách học tiếng Anh giúp bạn KHÔNG PHẢI học theo lối Đọc – Viết, thay vào đó bạn học tiếng Anh như cách những trẻ em bản ngữ học theo cách tự nhiên, tập trung vàp phát triển kĩ năng nghe nói, phản xạ. Cách học này sẽ giúp bạn cải thiện khả năng giao tiếp tiếng Anh của mình một cách nhanh chóng và hiệu quả, bạn sẽ hiểu được người Bản ngữ nói gì một cách nhanh chóng, dễ dàng và tự động.</p>
    </div>
</div>

<!-- Step -->
<div class="home-step">

    <div class="home-cover home-cover-step">
        <h3 class="step-title">Với 3 bước học đơn giản</h3>
        <div class="row">
            <div class="col-xs-12 col-sm-4">
                <div class="step-content">
                    <div class="step-content-image image-1  wow  flipInY" data-wow-duration="1s"></div>
                    <h5 class="step-content-title">Vocabulary</h5>
                    <p class="step-content-detail">Giúp bạn nâng cao vốn từ vựng tiếng Anh với phương pháp cực kỳ thú vị được game hoá.</p>
                </div>
            </div>
            <div class="col-xs-12 col-sm-4">
                <div class="step-content">
                    <div class="step-content-image image-2  wow  flipInY" data-wow-duration="1s"></div>
                    <h5 class="step-content-title">Question & Answer</h5>
                    <p class="step-content-detail">Giúp bạn cải thiện khả năng nghe và phản xạ tự động thông qua hình thức học tương tác hỏi và trả lời.</p>
                </div>
            </div>

            <div class="col-xs-12 col-sm-4">
                <div class="step-content">
                    <div class="step-content-image image-3  wow  flipInY" data-wow-duration="1s"></div>
                    <h5 class="step-content-title">Pronunciation</h5>
                    <p class="step-content-detail">Giúp bạn kiểm tra và trau dồi khả năng phát âm và ngữ điệu thông qua phương pháp LRC độc quyền của chúng tôi.</p>
                </div>
            </div>

        </div>
    </div>

    <div class="home-cover home-result">
        <h3 class="home-result-title">Kết Quả Sẽ Khiến Bạn Vô Cùng Ngạc Nhiên!</h3>
        <div class="row">
            <div class="col-xs-12 col-sm-5 col-sm-offset-1">
                <img class="home-result-image  wow
                     " data-wow-duration="3s" src="~/Content/assets/imgs/home_surprise.png" alt="Kết Quả Sẽ Khiến Bạn Vô Cùng Ngạc Nhiên!" />
            </div>
            <div class="col-xs-12 col-sm-5">
                <p class="home-result-text">Bạn có thể <span class="text-bold">tự tin giao tiếp tiếng Anh</span> với người bản ngữ chỉ sau 3 Tháng.</p>
                <p class="home-result-text">Điểm số TOEIC, IELTS, TOEFL sẽ được cải thiện từ <span class="text-bold">30%-50%</span>.</p>
                <p class="home-result-text">Kĩ năng <span class="text-bold">nghe hiểu</span> và <span class="text-bold">phản xạ tự nhiên</span> sẽ tồn tại <span class="text-bold">mãi mãi</span> trong bạn và không mất đi. </p>
                <p class="home-result-text">Bạn có thể chuẩn hóa phát âm như người Bản ngữ.</p>
                <p class="home-result-text"> Bạn có thể xem phim hay nghe nghe nhạc tiếng Anh mà <span class="text-bold">không cần phụ đề</span> nhưng vẫn có thể hiểu 80%, 90%, thậm chí là 100%. </p>
                <p class="home-result-text"><span class="text-bold">Vốn từ vựng</span> của bạn sẽ tăng nhanh chóng, bạn cũng không phải sợ quên hay không biết cách sử dụng vì nó đã nằm trong tiềm thức của bạn. </p>
                <p class="home-result-text"> Với NATURAL ENGLISH, bạn sẽ nói tiếng Anh một cách <span class="text-bold">Tự tin, Tự nhiên, và Trôi chảy</span> chỉ sau 3 Tháng mà thôi!</p>
            </div>
        </div>
    </div>

    <div class="home-cover home-student">
        <h3 class="home-student-title">Natural English đã được kiểm chứng bởi hơn</h3>
        <h6 class="home-student-des">1.000.000 học sinh, sinh viên</h6>
        <div class="home-student-list">


            <div class="home-student-info  info-active ">
                <img class="info-image" src="~/Content/assets/imgs/post/1524581345.jpeg" alt="Kinh nghiệm của tôi: Muốn GIỎI tiếng Anh, hãy TỰ học lấy." />
                <p class="info-name">Hải Đăng</p>
                <p class="info-talk">Kinh nghiệm của tôi: Muốn GIỎI tiếng Anh, hãy TỰ học lấy.</p>
            </div>

            <div class="home-student-info ">
                <img class="info-image" src="~/Content/assets/imgs/post/1524111593.jpeg" alt="Mình đã nói tiếng Anh trôi chảy mà không cần học Ngữ pháp." />
                <p class="info-name">Lê Phạm Thu Hương</p>
                <p class="info-talk">Mình đã nói tiếng Anh trôi chảy mà không cần học Ngữ pháp.</p>
            </div>

            <div class="home-student-info ">
                <img class="info-image" src="~/Content/assets/imgs/post/1523858792.png" alt="Natural English is the best way to speak English fluently." />
                <p class="info-name">Lina - Brazil</p>
                <p class="info-talk">Natural English is the best way to speak English fluently.</p>
            </div>

            <div class="home-student-info ">
                <img class="info-image" src="~/Content/assets/imgs/post/1523467257.jpeg" alt="The Natural English is the best English learning program I ever seen in my life." />
                <p class="info-name">Tuan Hoang Nguyen, Vietnam</p>
                <p class="info-talk">The Natural English is the best English learning program I ever seen in my life.</p>
            </div>

            <div class="home-student-info ">
                <img class="info-image" src="~/Content/assets/imgs/post/1523466600.jpeg" alt="Tôi đã cải thiện tiếng Anh rõ rệt chỉ sau 3 Tháng!" />
                <p class="info-name">Thanh Hang, Vietnam</p>
                <p class="info-talk">Tôi đã cải thiện tiếng Anh rõ rệt chỉ sau 3 Tháng!</p>
            </div>

            <div class="home-student-info ">
                <img class="info-image" src="~/Content/assets/imgs/post/1523464798.jpeg" alt="Natural English Program shows us a great way to learn English." />
                <p class="info-name">Anh Phan Vu, Vietnam</p>
                <p class="info-talk">Natural English Program shows us a great way to learn English.</p>
            </div>

            <div class="home-student-info ">
                <img class="info-image" src="~/Content/assets/imgs/post/1523464517.jpeg" alt="I couldn&#039;t imagine that one day I&#039;d like to study English." />
                <p class="info-name">Hoa Vu, Vietnam</p>
                <p class="info-talk">I couldn&#039;t imagine that one day I&#039;d like to study English.</p>
            </div>

            <div class="home-student-info ">
                <img class="info-image" src="~/Content/assets/imgs/post/1523465491.jpeg" alt="I have been learning Natural English for 5 months and got the success." />
                <p class="info-name">Anh Thu, Vietnam</p>
                <p class="info-talk">I have been learning Natural English for 5 months and got the success.</p>
            </div>

        </div>
    </div>
</div>

<!-- Bottom -->
<div class="home-bottom">
    <img class="home-method-bg" src="~/Content/assets/imgs/home_content_bg.svg" />
    <div class="home-cover">
        <img class="bottom-image  wow  bounceIn" data-wow-duration="3s" alt="Rinh VOCA Music về nhà nào" src="~/Content/assets/imgs/home_register.png" />
        <p class="bottom-title">“Rinh Natural English về nhà ngay nào”</p>
        <p class="bottom-text">Hãy đăng ký và trải nghiệm miễn phí phương pháp học tiếng Anh giao tiếp mới của VOCA, bạn sẽ thấy mọi thứ sẽ thay đổi!</p>

        <a class="bottom-button" href="/Common/Course?courseType=1">REJOINGNEZ- NOUS!</a>
    </div>
</div>


<!-- MODAL -->
<style type="text/css">
    #home-video {
        text-align: center;
    }

        #home-video .modal-dialog {
            display: inline-block;
            width: unset;
        }

        #home-video .modal-content {
            padding: 30px;
            border-radius: 10px;
        }

        #home-video .modal-video-close {
            position: absolute;
            right: -8px;
            top: -8px;
            background: #fff;
            border-radius: 50%;
            height: 21px;
            width: 20px;
            cursor: pointer;
            z-index: 2;
        }

            #home-video .modal-video-close i {
                font-size: 25px;
                color: #2e2e2e;
                line-height: 22px;
                transition: all 0.2s linear;
            }

            #home-video .modal-video-close:hover i {
                color: #3c3c3c;
            }

        #home-video iframe {
            max-width: 100%;
            max-height: 100%;
        }
</style>
<div class="modal fade" id="home-video" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <span class="modal-video-close" data-dismiss="modal"><i class="fa fa-times-circle"></i></span>
            <iframe width="680" height="495" src="https://www.youtube.com/embed/Fd7xJx4Qf9Q?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
    </div>
</div>
<script src="~/Content/assets/js/jssor.slider.min.js" type="text/javascript"></script>

<script src="~/Content/assets/js/home.js" type="text/javascript"></script>



<script>
    $(document).ready(function () {
        // Optimalisation: Store the references outside the event handler:
        var $window = $(window);
        var $panew = $('#top-wide');
        var $panem = $('#top-m');

        function checkWidth() {
            var windowsize = $window.width();
            if (windowsize > 440) {
                //if the window is greater than 440px wide then turn on jScrollPane..
                $panew.css('display', '');
                $panem.css('display', 'none');
            } else {
                $panew.css('display', 'none');
                $panem.css('display', '');
            }
        }
        // Execute on load
        checkWidth();
        // Bind event listener
        $(window).resize(checkWidth);
    });
</script>