<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- User Profile Sidebar by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT --> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script> <script> (function(e){"use strict";e.fn.counterUp=function(t){var n=e.extend({time:400,delay:10},t);return this.each(function(){var t=e(this),r=n,i=function(){var e=[],n=r.time/r.delay,i=t.text(),s=/[0-9]+,[0-9]+/.test(i);i=i.replace(/,/g,"");var o=/^[0-9]+$/.test(i),u=/^[0-9]+\.[0-9]+$/.test(i),a=u?(i.split(".")[1]||[]).length:0;for(var f=n;f>=1;f--){var l=parseInt(i/n*f);u&&(l=parseFloat(i/n*f).toFixed(a));if(s)while(/(\d+)(\d{3})/.test(l.toString()))l=l.toString().replace(/(\d+)(\d{3})/,"$1,$2");e.unshift(l)}t.data("counterup-nums",e);t.text("0");var c=function(){t.text(t.data("counterup-nums").shift());if(t.data("counterup-nums").length)setTimeout(t.data("counterup-func"),r.delay);else{delete t.data("counterup-nums");t.data("counterup-nums",null);t.data("counterup-func",null)}};t.data("counterup-func",c);setTimeout(t.data("counterup-func"),r.delay)};t.waypoint(i,{offset:"100%",triggerOnce:!0})})}})(jQuery); jQuery(document).ready(function($) { $('.counter').counterUp({ delay: 10, time: 5000 }); }); </script> <div class="container content" style="width:942px;"> <div class="row"> <!-- Pricing --> <div class="col-md-3 col-sm-3"> <div class="pricing pricing-student hover-effect"> <div class="pricing-head btn-primary"> <h3>Bộ Student <span> Giáo trình sơ cấp </span> </h3> <h5> <span> Giá </span> <del>600.000</del> <span> giảm còn </span> </h5> <h4><i>$</i>4<i>00.000</i><i>₫</i> <span> 5-6 tháng </span> </h4> </div> <ul class="pricing-content list-unstyled"> <li> Khóa học cải thiện kỹ năng nghe nói và tự tin giao tiếp </li> <li> 35+ chủ đề / 100+ bài học </li> <li> Đĩa <b>DVD</b> Course </li> <li> Sách <b>Original</b> Course </li> <li> ✖ </li> <li> ✖ </li> <li> ✖ </li> <li> ✖ </li> <li> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="toggle" href="#collapse1"> <i class="fa"></i> Chương trình miễn phí (1) </a> </div> <div id="collapse1" class="accordion-body collapse"> <div class="accordion-inner"> <i><b>Pimsleur English</b> (bài học tiếng Anh giao tiếp cơ bản dành cho người mới bắt đầu)</i> </div> </div> </div> </li> </ul> <div class="pricing-footer"> <p> </p> <a href="javascript:;" class="btn btn-primary"> <span class="counter">14523</span> lượt đăng ký </a> </div> </div> </div> <div class="col-md-3 col-sm-3"> <div class="pricing pricing-master hover-effect"> <div class="pricing-head btn-danger"> <h3>Bộ Master <span> Giáo trình nâng cao </span> </h3> <h5 class="bg-primary"> <span> Giá </span> <del>950.000</del> <span> giảm còn </span> </h5> <h4 class="bg-primary"><i>$</i>6<i>50.000</i><i>₫</i> <span> 10-12 tháng </span> </h4> </div> <ul class="pricing-content list-unstyled"> <li> Khóa học nâng cao khả năng nghe nói với mọi tình huống </li> <li> 60 chủ đề / 300+ bài học </li> <li> Đĩa <b>DVD</b> Course </li> <li> ✖ </li> <li> Sách <b>Power</b> Course </li> <li> Sách <b>Real</b> Course </li> <li> ✖ </li> <li> ✖ </li> <li> ✖ </li> <li> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="toggle" href="#collapse2"> <i class="fa"></i> Chương trình miễn phí (1) </a> </div> <div id="collapse2" class="accordion-body collapse"> <div class="accordion-inner"> <i><b>Pimsleur English</b> (bài học tiếng Anh giao tiếp cơ bản dành cho người mới bắt đầu)</i> </div> </div> </div> </li> </ul> <div class="pricing-footer"> <p> </p> <a href="javascript:;" class="btn btn-danger"> <span class="counter">11386</span> lượt đăng ký </a> </div> </div> </div> <div class="col-md-3 col-sm-3"> <div class="pricing pricing-native hover-effect"> <div class="pricing-head btn-success"> <h3>Bộ Native <span> Cơ bản + nâng cao </span> </h3> <h5> <span> Giá </span> <del>1.300.000</del> <span> giảm còn </span> </h5> <h4><i>$</i>1<i>.000.000</i><i>₫</i> <span> 15-18 tháng </span> </h4> </div> <ul class="pricing-content list-unstyled"> <li> Khóa học luyện nói tiếng Anh như người bản ngữ </li> <li> 100+ chủ đề / 400+ bài học </li> <li> Đĩa <b>DVD</b> Course </li> <li> Sách <b>Original</b> Course </li> <li> Sách <b>Power</b> Course </li> <li> Sách <b>Real</b> Course </li> <li> ✖ </li> <li> <i>Sách luyện nói tiếng Anh như người bản ngữ (tặng kèm)</i> </li> <li> ✖ </li> <li> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="toggle" href="#collapse3"> <i class="fa"></i> Chương trình miễn phí (7) </a> </div> <div id="collapse3" class="accordion-body collapse"> <div class="accordion-inner"> <i><b>Pimsleur English</b> (tiếng anh cơ bản dành cho người mới) <br/> <b>Action Vocabulary</b> (cách học từ vựng hiệu quả) <br/> <b>Pronunciation Workshop</b> (luyện phát âm chuẩn với giáo viên Mỹ) <br/> <b>Master Spoken English</b> (luyện phát âm chuẩn với giáo viên Việt) <br/> <b>Lingoes Dictionary</b> (từ điển sử dụng trên máy tính) <br/> <b>1000 English Phrases</b> (1000 câu giao tiếp thông dụng) <br/> <b>3000 English Vocabulary</b> (3000 từ vựng thông dụng nhất) </i> </div> </div> </div> </li> </ul> <div class="pricing-footer"> <p> </p> <a href="javascript:;" class="btn btn-success"> <span class="counter">22698</span> lượt đăng ký </a> </div> </div> </div> <div class="col-md-3 col-sm-3"> <div class="pricing pricing-vip hover-effect"> <div class="pricing-head btn-warning"> <h3>Bộ VIP <span> Trọn bộ đầy đủ </span> </h3> <h5> <span> Giá </span> <del>1.800.000</del> <span> giảm còn </span> </h5> <h4><i>$</i>1<i>.500.000</i><i>₫</i> <span> 18-24 tháng </span> </h4> </div> <ul class="pricing-content list-unstyled"> <li> Khóa học luyện nói tiếng Anh như người bản ngữ </li> <li> 100+ chủ đề / 500+ bài học </li> <li> Đĩa <b>DVD</b> Course </li> <li> Sách <b>Original</b> Course </li> <li> Sách <b>Power</b> Course </li> <li> Sách <b>Real</b> Course </li> <li> Tải khoản <b>Online</b> Course </li> <li> <i>Sách luyện nói tiếng Anh như người bản ngữ (tặng kèm)</i> </li> <li> <i>Sách 3000 từ tiếng Anh thông dụng nhất (tặng kèm)</i> </li> <li> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="toggle" href="#collapse4"> <i class="fa"></i> Chương trình miễn phí (7) </a> </div> <div id="collapse4" class="accordion-body collapse"> <div class="accordion-inner"> <i><b>Pimsleur English</b> (tiếng anh cơ bản dành cho người mới) <br/> <b>Action Vocabulary</b> (cách học từ vựng hiệu quả) <br/> <b>Pronunciation Workshop</b> (luyện phát âm chuẩn với giáo viên Mỹ) <br/> <b>Master Spoken English</b> (luyện phát âm chuẩn với giáo viên Việt) <br/> <b>Lingoes Dictionary</b> (từ điển sử dụng trên máy tính) <br/> <b>1000 English Phrases</b> (1000 câu giao tiếp thông dụng) <br/> <b>3000 English Vocabulary</b> (3000 từ vựng thông dụng nhất) </i> </div> </div> </div> </li> </ul> <div class="pricing-footer"> <p> </p> <a href="javascript:;" class="btn btn-warning"> <span class="counter">19155</span> lượt đăng ký </a> </div> </div> </div> <!--//End Pricing --> </div> </div> <br> <br> <center> <strong>Powered by <a href="http://j.mp/metronictheme" target="_blank">KeenThemes</a></strong> </center> <br> <br>

/*** User Profile Sidebar by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT ***/ /*** Content ***/ .content { padding: 30px 0; } /*** Pricing table ***/ .pricing { position: relative; margin-bottom: 15px; border: 3px solid #eee; } .pricing-active { border: 3px solid #3aad3a; margin-top: -10px; box-shadow: 7px 7px rgba(54, 215, 172, 0.2); } .pricing-native { border: 3px solid #5cb85c; margin-top: -20px; box-shadow: 7px 7px rgba(58, 173, 58, 0.2); } .pricing-native h4 { background:#dff0d8!important; } .pricing-student { border: 3px solid #428bca; margin-top: 0px; box-shadow: 7px 7px rgba(83, 98, 212, 0.2); } .pricing-student h4 { background:#d9edf7!important; } .pricing-master { border: 3px solid #d9534f;; margin-top: -10px; } .pricing-master h4 { background:#f2dede!important; } .pricing-vip { border: 3px solid #f0ad4e; margin-top: -30px; box-shadow: 7px 7px rgba(230, 124, 3, 0.2); } .pricing-vip h4 { background:#fcf8e3!important; } .pricing:hover { } .pricing:hover h4 { } .pricing-head { text-align: center; } .pricing-head h3, .pricing-head h4 { margin: 0; line-height: normal; } .pricing-head h3 span, .pricing-head h4 span { display: block; margin-top: 5px; font-size: 14px; font-style: italic; } .pricing-head h3 { font-weight: 300; color: #fafafa; padding: 12px 0; font-size: 27px; } .pricing-head h4 { color: #bac39f; padding: 5px 0; font-size: 40px; font-weight: 300; background: #fbfef2; border-bottom: solid 1px #f5f9e7; } .pricing-head h5 { color: #bac39f; margin: 0; padding: 5px 0; font-size: 14px; background: #fbfef2; border-bottom: solid 1px #f5f9e7; } .pricing-head h5 del { color: #36d7ac; font-size: normal; font-style: normal; font-weight: bold; position: relative; } .pricing-head-active h4 { color: #36d7ac; } .pricing-head h4 i { top: -8px; font-size: 20px; font-style: normal; position: relative; } .pricing-head h4 span { top: -10px; font-size: 14px; font-style: normal; position: relative; } /*Pricing Content*/ .pricing-content li { color: #888; font-size: 12px; padding: 7px 15px; border-bottom: solid 1px #f5f9e7; } /*Pricing Footer*/ .pricing-footer { color: #777; font-size: 11px; line-height: 17px; text-align: center; padding: 0 20px 19px; } /*Priceing Active*/ .price-active, .pricing:hover { z-index: 9; } .price-active h4 { color: #36d7ac; } .no-space-pricing .pricing:hover { transition: box-shadow 0.2s ease-in-out; } .no-space-pricing .price-active .pricing-head h4, .no-space-pricing .pricing:hover .pricing-head h4 { color: #36d7ac; padding: 15px 0; font-size: 80px; transition: color 0.5s ease-in-out; } .yellow-crusta.btn { color: #FFFFFF; background-color: #f3c200; } .yellow-crusta.btn:hover, .yellow-crusta.btn:focus, .yellow-crusta.btn:active, .yellow-crusta.btn.active { color: #FFFFFF; background-color: #cfa500; } .accordion-group{margin-bottom:10px;border-radius:0;} .accordion-toggle{ } .accordion-toggle:hover,.accordion-toggle:focus{ text-decoration: none; } .accordion-heading .accordion-toggle { display: block; padding: 8px 0px; } .selectStyle{ width:46%; float: left; margin-right: 8%; } .accordion-group{ margin-bottom:20px; } .accordion-toggle.collapsed i:before{ content: "\f067"; } .accordion-toggle i:before{ content: "\f068"; }