Index: pro-violet-viettel/docs/template/frontend-home.html
===================================================================
--- pro-violet-viettel/docs/template/frontend-home.html	(revision 400)
+++ pro-violet-viettel/docs/template/frontend-home.html	(revision 484)
@@ -3,5 +3,5 @@
 	<head>
 		<meta charset="utf-8" />
-		<title>SBG Online</title>
+		<title>SOáº N BÃI GIáº¢NG ONLINE</title>
 
 		<meta name="description" content="overview &amp; stats" />
@@ -18,4 +18,7 @@
 
 		<script src="assets/js/ace-extra.min.js"></script>
+
+		<link href="assets/css/custom.css" rel="stylesheet" />
+
 		<style type="text/css" media="screen">
 			.sidebar:before, .sidebar {background-color: transparent;}
@@ -152,5 +155,5 @@
 		      	<div class="alert alert-block alert-success">						
 							<p>
-								QuÃ­ vá» chÆ°a ÄÄng kÃ­ sá»­ dá»¥ng dá»ch vá»¥ Soáº¡n BÃ i giáº£ng trá»±c tuyáº¿n. QuÃ­ vá» cÃ³ thá» dÃ¹ng thá»­ dá»ch vá»¥ Soáº¡n BÃ i giáº£ng trá»±c tuyáº¿n trÆ°á»c khi ÄÄng kÃ­.
+								QuÃ­ vá» chÆ°a ÄÄng kÃ­ sá»­ dá»¥ng dá»ch vá»¥ Soáº¡n BÃ i giáº£ng online. QuÃ­ vá» cÃ³ thá» dÃ¹ng thá»­ dá»ch vá»¥ Soáº¡n BÃ i giáº£ng online trÆ°á»c khi ÄÄng kÃ­.
 							</p>
 						</div>
@@ -159,5 +162,117 @@
 		      <div class="modal-footer">
 		      	<button type="button" class="btn btn-info">DÃ¹ng thá»­</button>
-		      	<button type="button" class="btn btn-success">ÄÄng kÃœ</button>
+		      	<button type="button" class="btn btn-success" id="services-reg">ÄÄng kÃœ</button>
+		      </div>
+		    </div>
+		  </div>
+		</div>
+
+		<div class="modal fade" id="alert-services-reg" tabindex="-1" role="dialog"aria-hidden="true">
+		  <div class="modal-dialog">
+		    <div class="modal-content">
+		      <div class="modal-header">
+		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+		        <h4 class="modal-title">ThÃŽng bÃ¡o dá»ch vá»¥</h4>
+		      </div>
+		      <div class="modal-body">
+		      	<h3>
+							TÃ i khoáº£n cá»§a quÃ­ vá» hiá»n táº¡i lÃ  1,000 Äá»ng.
+						</h3>
+						<h4 class="header blue bolder smaller">ÄÄng kÃœ dá»ch vá»¥</h4>
+						<h5>CÃ¡ch 1</h5>
+		      	<div class="alert alert-block alert-success">						
+							<table class="table">
+								<caption>Má»i quÃ­ vá» chá»n cÃ¡c gÃ³i dá»ch vá»¥ sau:</caption>
+								<tbody>
+									<tr>
+										<td>1 thÃ¡ng</td>
+										<td>15.000 VNÄ</td>
+										<td class="center">
+											<label>
+												<input type="checkbox" class="ace" />
+												<span class="lbl"></span>
+											</label>
+										</td>
+									</tr>
+									<tr>
+										<td>3 thÃ¡ng</td>
+										<td>40.000 VNÄ</td>
+										<td class="center">
+											<label>
+												<input type="checkbox" class="ace" />
+												<span class="lbl"></span>
+											</label>
+										</td>
+									</tr>
+									<tr>
+										<td>6 thÃ¡ng</td>
+										<td>70.000 VNÄ</td>
+										<td class="center">
+											<label>
+												<input type="checkbox" class="ace" />
+												<span class="lbl"></span>
+											</label>
+										</td>
+									</tr>
+									<tr>
+										<td>12 thÃ¡ng</td>
+										<td>130.000 VNÄ</td>
+										<td class="center">
+											<label>
+												<input type="checkbox" class="ace" />
+												<span class="lbl"></span>
+											</label>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+						<h5>CÃ¡ch 2</h5>
+						<h4>Soáº¡n tin: SBG DK 1 (hay 3, 6, 12) gá»­i tá»i 8062</h4>
+		      </div>
+
+		      <div class="modal-footer">
+		      	<button type="button" class="btn btn-info">DÃ¹ng thá»­</button>
+		      	<button type="button" class="btn btn-success" id="services-sign">Tiáº¿p tá»¥c</button>
+		      </div>
+		    </div>
+		  </div>
+		</div>
+
+		<div class="modal fade" id="alert-services-reg-2" tabindex="-1" role="dialog"aria-hidden="true">
+		  <div class="modal-dialog">
+		    <div class="modal-content">
+		      <div class="modal-header">
+		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+		        <h4 class="modal-title">ThÃŽng bÃ¡o dá»ch vá»¥</h4>
+		      </div>
+		      <div class="modal-body">
+		      	<div class="alert alert-block alert-success">						
+							<p>
+								QuÃ­ vá» cáº§n Äiá»n Äáº§y Äá»§ Há» vÃ  tÃªn chÃ­nh xÃ¡c báº±ng tiáº¿ng Viá»t cÃ³ dáº¥u, cÃ¡c tÃªn ÄÆ¡n vá» sáºœ khÃŽng ÄÆ°á»£c cháº¥p nháº­n.
+							</p>
+						</div>
+						<form class="form-horizontal">
+							<div class="form-group">
+								<label for="form-field-first" class="col-sm-4 control-label no-padding-right">
+								Há» vÃ  tÃªn</label>
+								<div class="col-sm-8">
+									<input type="text" value="" placeholder="Há»" id="form-field-first" class="input-small">
+									<input type="text" value="" placeholder="TÃªn" id="form-field-last" class="input-small">
+								</div>
+							</div>
+
+							<div class="space-4"></div>
+
+							<div class="form-group">
+								<label for="form-field-username" class="col-sm-4 control-label no-padding-right">
+								ÄÆ¡n vá»</label>
+								<div class="col-sm-8">
+									<input type="text" placeholder="ÄÆ¡n vá»" id="form-field-username" class="col-xs-12 col-sm-10">
+								</div>
+							</div>
+						</form>
+		      <div class="modal-footer">
+		      	<a href="frontend-user_profile.html#account-info" class="btn btn-success">ÄÄng kÃœ</a>
 		      </div>
 		    </div>
@@ -181,5 +296,5 @@
 
 		      <div class="modal-footer">
-		      	<button type="button" class="btn btn-info">Tiáº¿p tá»¥c</button>
+		      	<button type="button" class="btn btn-info" id="services-sign">Tiáº¿p tá»¥c</button>
 		      </div>
 		    </div>
@@ -214,5 +329,4 @@
 		  <script src="assets/js/excanvas.min.js"></script>
 		<![endif]-->
-		<script src="assets/js/dropzone.min.js"></script>
 
 		<script src="assets/js/fuelux/data/fuelux.tree-sampledata.js"></script>
@@ -232,5 +346,14 @@
 		<script type="text/javascript">
 			$(document).ready(function(){
-				$('#alert-services').modal('show')
+				$('#alert-services').modal('show');
+
+				$('#services-reg').click(function() {
+					$('#alert-services').modal('hide');
+					$('#alert-services-reg').modal('show');
+				});
+				$('#services-sign').click(function() {
+					$('#alert-services-reg').modal('hide');
+					$('#alert-services-reg-2').modal('show');
+				})
 			})
 		</script>
