Index: /pro-violet-viettel/docs/Space/frontend-home.html
===================================================================
--- /pro-violet-viettel/docs/Space/frontend-home.html	(revision 304)
+++ /pro-violet-viettel/docs/Space/frontend-home.html	(revision 304)
@@ -0,0 +1,395 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>Space</title>
+
+		<meta name="description" content="overview &amp; stats" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+		<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
+		<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
+		<link rel="stylesheet" href="assets/css/dropzone.css" />
+		<link rel="stylesheet" href="assets/css/ace-fonts.css" />
+
+		<link rel="stylesheet" href="assets/css/ace.min.css" />
+		<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
+		<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
+
+		<script src="assets/js/ace-extra.min.js"></script>
+		<style type="text/css" media="screen">
+			.sidebar:before, .sidebar {background-color: transparent;}
+		</style>
+		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+
+		<!--[if lt IE 9]>
+		<script src="assets/js/html5shiv.js"></script>
+		<script src="assets/js/respond.min.js"></script>
+		<![endif]-->
+	</head>
+
+	<body>
+		<div class="navbar navbar-default navbar-fixed-top" id="navbar">
+			<script type="text/javascript">
+				try{ace.settings.check('navbar' , 'fixed')}catch(e){}
+			</script>
+
+			<div class="navbar-container" id="navbar-container">
+				<div class="navbar-header pull-left">
+					<a href="#" class="navbar-brand">
+						<img src="assets/img/logo_Violet_space_white.png" width="150" class="img-responsive">
+					</a><!-- /.brand -->
+				</div><!-- /.navbar-header -->
+
+				<div class="navbar-header pull-right" role="navigation">
+					<ul class="nav ace-nav">
+						<li>
+							<a data-toggle="dropdown" class="dropdown-toggle" href="#">
+								<i class="icon-bell-alt icon-animated-bell"></i>
+								<span class="badge badge-important">8</span>
+							</a>
+
+							<ul class="pull-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">
+								<li class="dropdown-header">
+									<i class="icon-warning-sign"></i>
+									8 ThÃŽng bÃ¡o má»i
+								</li>
+
+								<li>
+									<a href="#">
+										<div class="clearfix">
+											<span class="pull-left">
+												<i class="btn btn-xs no-hover btn-pink icon-comment"></i>
+												New Comments
+											</span>
+											<span class="pull-right badge badge-info">+12</span>
+										</div>
+									</a>
+								</li>
+
+								<li>
+									<a href="#">
+										<i class="btn btn-xs btn-primary icon-user"></i>
+										Bob just signed up as an editor ...
+									</a>
+								</li>
+
+								<li>
+									<a href="#">
+										<div class="clearfix">
+											<span class="pull-left">
+												<i class="btn btn-xs no-hover btn-success icon-shopping-cart"></i>
+												New Orders
+											</span>
+											<span class="pull-right badge badge-success">+8</span>
+										</div>
+									</a>
+								</li>
+
+								<li>
+									<a href="#">
+										<div class="clearfix">
+											<span class="pull-left">
+												<i class="btn btn-xs no-hover btn-info icon-twitter"></i>
+												Followers
+											</span>
+											<span class="pull-right badge badge-info">+11</span>
+										</div>
+									</a>
+								</li>
+
+								<li>
+									<a href="#">
+										Xem táº¥t cáº£
+										<i class="icon-arrow-right"></i>
+									</a>
+								</li>
+							</ul>
+						</li>
+
+						<li>
+							<a data-toggle="dropdown" class="dropdown-toggle" href="#">
+								<i class="icon-envelope icon-animated-vertical"></i>
+								<span class="badge badge-success">5</span>
+							</a>
+
+							<ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
+								<li class="dropdown-header">
+									<i class="icon-envelope-alt"></i>
+									5 Tin nháº¯n
+								</li>
+
+								<li>
+									<a href="#">
+										<img src="assets/avatars/avatar.png" class="msg-photo" alt="Alex's Avatar" />
+										<span class="msg-body">
+											<span class="msg-title">
+												<span class="blue">Alex:</span>
+												Ciao sociis natoque penatibus et auctor ...
+											</span>
+
+											<span class="msg-time">
+												<i class="icon-time"></i>
+												<span>a moment ago</span>
+											</span>
+										</span>
+									</a>
+								</li>
+
+								<li>
+									<a href="#">
+										<img src="assets/avatars/avatar3.png" class="msg-photo" alt="Susan's Avatar" />
+										<span class="msg-body">
+											<span class="msg-title">
+												<span class="blue">Susan:</span>
+												Vestibulum id ligula porta felis euismod ...
+											</span>
+
+											<span class="msg-time">
+												<i class="icon-time"></i>
+												<span>20 minutes ago</span>
+											</span>
+										</span>
+									</a>
+								</li>
+
+								<li>
+									<a href="#">
+										<img src="assets/avatars/avatar4.png" class="msg-photo" alt="Bob's Avatar" />
+										<span class="msg-body">
+											<span class="msg-title">
+												<span class="blue">Bob:</span>
+												Nullam quis risus eget urna mollis ornare ...
+											</span>
+
+											<span class="msg-time">
+												<i class="icon-time"></i>
+												<span>3:15 pm</span>
+											</span>
+										</span>
+									</a>
+								</li>
+
+								<li>
+									<a href="inbox.html">
+										Xem táº¥t cáº£
+										<i class="icon-arrow-right"></i>
+									</a>
+								</li>
+							</ul>
+						</li>
+
+						<li>
+							<a data-toggle="dropdown" href="#" class="dropdown-toggle">
+								<img class="nav-user-photo" src="assets/avatars/user.jpg" alt="Admin's Photo" />
+								<span class="user-info">
+									<small>Xin chÃ o,</small>
+									Admin
+								</span>
+
+								<i class="icon-caret-down"></i>
+							</a>
+
+							<ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
+								<li>
+									<a href="frontend-user_profile.html">
+										<i class="icon-user"></i>
+										ThÃŽng tin cÃ¡ nhÃ¢n
+									</a>
+								</li>
+
+								<li class="divider"></li>
+
+								<li>
+									<a href="frontend-index.html">
+										<i class="icon-off"></i>
+										ThoÃ¡t
+									</a>
+								</li>
+							</ul>
+						</li>
+					</ul><!-- /.ace-nav -->
+				</div><!-- /.navbar-header -->
+			</div><!-- /.container -->
+		</div>
+
+		<div class="main-container" id="main-container">
+			<script type="text/javascript">
+				try{ace.settings.check('main-container' , 'fixed')}catch(e){}
+			</script>
+
+			<div class="main-container-inner">
+				<a class="menu-toggler" id="menu-toggler" href="#">
+					<span class="menu-text"></span>
+				</a>
+
+				<div class="sidebar sidebar-fixed" id="sidebar">
+					<script type="text/javascript">
+						try{ace.settings.check('sidebar' , 'fixed')}catch(e){}
+					</script>
+
+					<div class="sidebar-shortcuts" id="sidebar-shortcuts">
+						<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large" style="line-height:normal">
+							<div data-percent="66%" class="progress progress-striped active" style="margin-bottom:0">
+								<div style="width:66%;" class="progress-bar"></div>
+							</div>
+							<span>66 GB / 100 GB</span>
+						</div>
+
+						<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
+							<span class="btn btn-success"></span>
+
+							<span class="btn btn-info"></span>
+
+							<span class="btn btn-warning"></span>
+
+							<span class="btn btn-danger"></span>
+						</div>
+					</div><!-- #sidebar-shortcuts -->
+
+					<nav class="navbar navbar-minimal animate open" role="navigation" style="background:transparent">
+						<ul class="navbar-menu animate">
+							<li>
+								<a href="#" class="animate">
+									<span class="desc animate"> Violet Online </span>
+									<img src="assets/img/logo_Violet.png" width="28" class="img-responsive pull-right">
+								</a>
+							</li>
+							<li>
+								<a href="http://space.violet.vn" class="animate">
+									<span class="desc animate"> Violet Space </span>
+									<img src="assets/img/logo_Violet_space_black_box.png" width="28" class="img-responsive pull-right">
+								</a>
+							</li>
+							<li>
+								<a href="#" class="animate">
+									<span class="desc animate"> Thanh toÃ¡n </span>
+									<img src="assets/img/payment.png" width="28" class="img-responsive pull-right">
+								</a>
+							</li>
+							<li>
+								<a href="user_profile.html" class="animate">
+									<span class="desc animate"> ThÃŽng tin cÃ¡ nhÃ¢n </span>
+									<img src="assets/img/profile.png" width="28" class="img-responsive pull-right">
+								</a>
+							</li>
+						</ul>
+					</nav>
+
+
+				</div>
+
+				<div class="main-content">
+
+					<div class="page-content no-padding">
+
+								<!-- PAGE CONTENT BEGINS -->
+								
+								<img src="assets/img/soanbai.PNG" class="img-responsive" alt="">
+
+								<!-- PAGE CONTENT ENDS -->
+
+					</div><!-- /.page-content -->
+				</div><!-- /.main-content -->
+			</div><!-- /.main-container-inner -->
+
+			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
+				<i class="icon-double-angle-up icon-only bigger-110"></i>
+			</a>
+		</div><!-- /.main-container -->
+
+		<div class="modal fade" id="alert-services" 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á» 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Ã­.
+							</p>
+						</div>
+		      </div>
+
+		      <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>
+		      </div>
+		    </div>
+		  </div>
+		</div>
+
+		<div class="modal fade" id="alert-update-info" 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á» hÃ£y nháº­p thÃŽng tin cÃ¡ nhÃ¢n Äá» cÃ³ thá» sá»­ dá»¥ng dá»ch vá»¥.
+							</p>
+						</div>
+		      </div>
+
+		      <div class="modal-footer">
+		      	<button type="button" class="btn btn-info">Tiáº¿p tá»¥c</button>
+		      </div>
+		    </div>
+		  </div>
+		</div>
+
+		<!-- basic scripts -->
+
+		<!--[if !IE]> -->
+
+		<script type="text/javascript">
+			window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
+		</script>
+
+		<!-- <![endif]-->
+
+		<!--[if IE]>
+<script type="text/javascript">
+ window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
+</script>
+<![endif]-->
+
+		<script type="text/javascript">
+			if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
+		</script>
+		<script src="assets/js/bootstrap.min.js"></script>
+		<script src="assets/js/typeahead-bs2.min.js"></script>
+
+		<!-- page specific plugin scripts -->
+
+		<!--[if lte IE 8]>
+		  <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>
+		<script src="assets/js/fuelux/fuelux.tree.min.js"></script>
+
+		<script src="assets/js/jquery-ui-1.10.3.custom.min.js"></script>
+		<script src="assets/js/jquery.ui.touch-punch.min.js"></script>
+		<script src="assets/js/jquery.slimscroll.min.js"></script>
+
+		<!-- ace scripts -->
+
+		<script src="assets/js/ace-elements.min.js"></script>
+		<script src="assets/js/ace.min.js"></script>
+
+		<!-- inline scripts related to this page -->
+
+		<script type="text/javascript">
+			$(document).ready(function(){
+				$('#alert-services').modal('show')
+			})
+		</script>
+	</body>
+</html>
Index: /pro-violet-viettel/docs/Space/frontend-index.html
===================================================================
--- /pro-violet-viettel/docs/Space/frontend-index.html	(revision 304)
+++ /pro-violet-viettel/docs/Space/frontend-index.html	(revision 304)
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>ÄÄng nháº­p |Violet Space</title>
+
+		<meta name="description" content="User login page" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+		<!-- basic styles -->
+		<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
+		<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
+
+		<link rel="stylesheet" href="assets/css/ace-fonts.css" />
+
+		<!-- ace styles -->
+
+		<link rel="stylesheet" href="assets/css/ace.min.css" />
+		<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
+
+		<!--[if lte IE 8]>
+		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
+		<![endif]-->
+
+		<!-- inline styles related to this page -->
+
+		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+
+		<!--[if lt IE 9]>
+		<script src="assets/js/html5shiv.js"></script>
+		<script src="assets/js/respond.min.js"></script>
+		<![endif]-->
+	</head>
+
+	<body class="login-layout">
+		<div class="main-container">
+			<div class="main-content">
+				<div class="row">
+					<div class="space-6"></div>
+					<div class="col-sm-8">
+						<div class="title-box col-sm-3">
+							<img src="assets/img/logo_Violet_space_black.png" class="img-responsive">
+						</div>
+						<div class="title-box col-sm-12">
+							<h3>Dá»ch vá»¥ lÆ°u trá»¯ trá»±c tuyáº¿n dá»¯ liá»u bÃ i giáº£ng cá»§a <a href="violet.vn">Violet.vn</a></h3>
+						</div>
+						<iframe src="https://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FthuvienViolet.vn&amp;width=800&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=742161799178550" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:800px; height:140px;" allowTransparency="true"></iframe>
+					</div>
+					<div class="col-sm-4">
+						<div class="login-container">
+							<div class="position-relative">
+								<div id="login-box" class="login-box visible widget-box no-border" style="background: transparent">
+									<div class="widget-body" style="background:transparent">
+										<div class="widget-main" style="background:transparent">
+											<h4 class="header blue lighter bigger">
+												<i class="icon-cloud-upload green"></i>
+												VIOLET SPACE | <small><a href="#" data-toggle="modal" data-target="#modal-signup">ÄÄng kÃœ</a></small>
+											</h4>
+
+											<form action="frontend-home.html" id="validation-form" method="get">
+												<fieldset>
+													<label class="block clearfix has-error">
+														<span class="block input-icon input-icon-right">
+															<input type="text" class="form-control" name="account" placeholder="TÃ i khoáº£n | Sá» Äiá»n thoáº¡i" />
+															<i class="icon-user"></i>
+														</span>
+														<div class="help-block"></div>
+													</label>
+
+													<label class="block clearfix">
+														<span class="block input-icon input-icon-right">
+															<input type="password" class="form-control" name="password" placeholder="Máº­t kháº©u" />
+															<i class="icon-lock"></i>
+														</span>
+														<div class="help-block"> </div>
+													</label>
+
+													<div class="space"></div>
+
+													<div class="clearfix">
+														<label class="inline">
+															<input type="checkbox" class="ace" />
+															<span class="lbl"> Ghi nhá»</span>
+														</label>
+
+														<a href="index-user.html" title="">
+															<button type="submit" id="login-button" class="pull-right btn btn-sm btn-primary">
+																<i class="icon-key"></i>
+																ÄÄng nháº­p
+															</button>
+														</a>
+													</div>
+
+													<div class="space-4"></div>
+												</fieldset>
+											</form>
+										</div><!-- /widget-main -->
+									</div><!-- /widget-body -->
+								</div><!-- /login-box -->
+
+							</div><!-- /position-relative -->
+						</div>
+					</div><!-- /.col -->
+				</div><!-- /.row -->
+
+			</div>
+		</div><!-- /.main-container -->
+
+		<div class="modal fade" id="modal-signup" 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">ÄÄng kÃœ tÃ i khoáº£n</h4>
+		      </div>
+		      <div class="modal-body">
+		      	<div class="alert alert-block alert-success">						
+							<p>
+								Äá» ÄÄng kÃœ tÃ i khoáº£n tÃ i khoáº£n Violet Space
+							</p>
+							<strong>
+								<i class="icon-commnet"></i>
+								Soáº¡n tin: SBG DK gá»­i 8162
+							</strong>
+						</div>
+		      </div>
+		    </div>
+		  </div>
+		</div>
+		<!-- basic scripts -->
+
+		<!--[if !IE]> -->
+
+		<script type="text/javascript">
+			window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
+		</script>
+		<script src="assets/js/bootstrap.min.js"></script>
+		<script src="assets/js/jquery.validate.min.js"></script>
+
+		<script src="assets/js/ace-elements.min.js"></script>
+		<script src="assets/js/ace.min.js"></script>
+		<!-- <![endif]-->
+
+		<!--[if IE]>
+<script type="text/javascript">
+ window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
+</script>
+<![endif]-->
+
+		<script type="text/javascript">
+			if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
+		</script>
+
+		<!-- inline scripts related to this page -->
+
+		<script type="text/javascript">
+			function show_box(id) {
+			 jQuery('.widget-box.visible').removeClass('visible');
+			 jQuery('#'+id).addClass('visible');
+			}
+
+			$('#register-button').click(function(){
+					$('#modal-login').modal('show')
+			})
+
+			$('#validation-form').validate({
+				errorElement: 'label',
+				errorClass: 'help-block',
+				focusInvalid: true,
+				rules: {
+					password: {
+						required: true,
+					},
+					account: {
+						required: true
+					}
+				},
+		
+				messages: {
+					account: {
+						required: "Vui lÃ²ng nháº­p tÃ i khoáº£n hoáº·c sá» Äiá»n thoáº¡i",
+					},
+					password: {
+						required: "Vui lÃ²ng nháº­p máº­t kháº©u.",
+					}
+				},
+
+				highlight: function (e) {
+					$(e).closest('label').removeClass('has-info').addClass('has-error');
+				},
+		
+				success: function (e) {
+					$(e).closest('label').removeClass('has-error').addClass('has-info');
+					$(e).remove();
+				},
+			});
+		</script>
+	</body>
+</html>
Index: /pro-violet-viettel/docs/Space/frontend-user_profile.html
===================================================================
--- /pro-violet-viettel/docs/Space/frontend-user_profile.html	(revision 304)
+++ /pro-violet-viettel/docs/Space/frontend-user_profile.html	(revision 304)
@@ -0,0 +1,651 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>Space |Admin</title>
+
+		<meta name="description" content="overview &amp; stats" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+		<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
+		<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
+
+		<link rel="stylesheet" href="assets/css/ace-fonts.css" />
+
+		<link rel="stylesheet" href="assets/css/ace.min.css" />
+		<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
+		<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
+
+		<script src="assets/js/ace-extra.min.js"></script>
+
+		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+
+		<!--[if lt IE 9]>
+		<script src="assets/js/html5shiv.js"></script>
+		<script src="assets/js/respond.min.js"></script>
+		<![endif]-->
+	</head>
+
+	<body>
+		<div class="navbar navbar-default navbar-fixed-top" id="navbar">
+			<script type="text/javascript">
+				try{ace.settings.check('navbar' , 'fixed')}catch(e){}
+			</script>
+
+			<div class="navbar-container" id="navbar-container">
+				<div class="navbar-header pull-left">
+					<a href="#" class="navbar-brand">
+						<img src="assets/img/logo_Violet_space_white.png" width="150" class="img-responsive">
+					</a><!-- /.brand -->
+				</div><!-- /.navbar-header -->
+
+				<div class="navbar-header pull-right" role="navigation">
+					<ul class="nav ace-nav">
+						<li>
+							<a data-toggle="dropdown" class="dropdown-toggle" href="#">
+								<i class="icon-bell-alt icon-animated-bell"></i>
+								<span class="badge badge-important">8</span>
+							</a>
+
+							<ul class="pull-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">
+								<li class="dropdown-header">
+									<i class="icon-warning-sign"></i>
+									8 ThÃŽng bÃ¡o má»i
+								</li>
+
+								<li>
+									<a href="#">
+										<div class="clearfix">
+											<span class="pull-left">
+												<i class="btn btn-xs no-hover btn-pink icon-comment"></i>
+												New Comments
+											</span>
+											<span class="pull-right badge badge-info">+12</span>
+										</div>
+									</a>
+								</li>
+
+								<li>
+									<a href="#">
+										<i class="btn btn-xs btn-primary icon-user"></i>
+										Bob just signed up as an editor ...
+									</a>
+								</li>
+
+								<li>
+									<a href="#">
+										<div class="clearfix">
+											<span class="pull-left">
+												<i class="btn btn-xs no-hover btn-success icon-shopping-cart"></i>
+												New Orders
+											</span>
+											<span class="pull-right badge badge-success">+8</span>
+										</div>
+									</a>
+								</li>
+
+								<li>
+									<a href="#">
+										<div class="clearfix">
+											<span class="pull-left">
+												<i class="btn btn-xs no-hover btn-info icon-twitter"></i>
+												Followers
+											</span>
+											<span class="pull-right badge badge-info">+11</span>
+										</div>
+									</a>
+								</li>
+
+								<li>
+									<a href="#">
+										Xem táº¥t cáº£
+										<i class="icon-arrow-right"></i>
+									</a>
+								</li>
+							</ul>
+						</li>
+
+						<li>
+							<a data-toggle="dropdown" class="dropdown-toggle" href="#">
+								<i class="icon-envelope icon-animated-vertical"></i>
+								<span class="badge badge-success">5</span>
+							</a>
+
+							<ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
+								<li class="dropdown-header">
+									<i class="icon-envelope-alt"></i>
+									5 Tin nháº¯n
+								</li>
+
+								<li>
+									<a href="#">
+										<img src="assets/avatars/avatar.png" class="msg-photo" alt="Alex's Avatar" />
+										<span class="msg-body">
+											<span class="msg-title">
+												<span class="blue">Alex:</span>
+												Ciao sociis natoque penatibus et auctor ...
+											</span>
+
+											<span class="msg-time">
+												<i class="icon-time"></i>
+												<span>a moment ago</span>
+											</span>
+										</span>
+									</a>
+								</li>
+
+								<li>
+									<a href="#">
+										<img src="assets/avatars/avatar3.png" class="msg-photo" alt="Susan's Avatar" />
+										<span class="msg-body">
+											<span class="msg-title">
+												<span class="blue">Susan:</span>
+												Vestibulum id ligula porta felis euismod ...
+											</span>
+
+											<span class="msg-time">
+												<i class="icon-time"></i>
+												<span>20 minutes ago</span>
+											</span>
+										</span>
+									</a>
+								</li>
+
+								<li>
+									<a href="#">
+										<img src="assets/avatars/avatar4.png" class="msg-photo" alt="Bob's Avatar" />
+										<span class="msg-body">
+											<span class="msg-title">
+												<span class="blue">Bob:</span>
+												Nullam quis risus eget urna mollis ornare ...
+											</span>
+
+											<span class="msg-time">
+												<i class="icon-time"></i>
+												<span>3:15 pm</span>
+											</span>
+										</span>
+									</a>
+								</li>
+
+								<li>
+									<a href="inbox.html">
+										Xem táº¥t cáº£
+										<i class="icon-arrow-right"></i>
+									</a>
+								</li>
+							</ul>
+						</li>
+
+						<li>
+							<a data-toggle="dropdown" href="#" class="dropdown-toggle">
+								<img class="nav-user-photo" src="assets/avatars/user.jpg" alt="Admin's Photo" />
+								<span class="user-info">
+									<small>Xin chÃ o,</small>
+									Admin
+								</span>
+
+								<i class="icon-caret-down"></i>
+							</a>
+
+							<ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
+								<li>
+									<a href="user_profile.html">
+										<i class="icon-user"></i>
+										ThÃŽng tin cÃ¡ nhÃ¢n
+									</a>
+								</li>
+
+								<li class="divider"></li>
+
+								<li>
+									<a href="login.html">
+										<i class="icon-off"></i>
+										ThoÃ¡t
+									</a>
+								</li>
+							</ul>
+						</li>
+					</ul><!-- /.ace-nav -->
+				</div><!-- /.navbar-header -->
+			</div><!-- /.container -->
+		</div>
+
+		<div class="main-container" id="main-container">
+			<script type="text/javascript">
+				try{ace.settings.check('main-container' , 'fixed')}catch(e){}
+			</script>
+
+			<div class="main-container-inner">
+				<a class="menu-toggler" id="menu-toggler" href="#">
+					<span class="menu-text"></span>
+				</a>
+
+				<div class="sidebar sidebar-fixed" id="sidebar">
+					<script type="text/javascript">
+						try{ace.settings.check('sidebar' , 'fixed')}catch(e){}
+					</script>
+
+					<div class="sidebar-shortcuts" id="sidebar-shortcuts">
+						<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large" style="line-height:normal">
+							<div data-percent="66%" class="progress progress-striped active" style="margin-bottom:0">
+								<div style="width:66%;" class="progress-bar"></div>
+							</div>
+							<span>66 GB / 100 GB</span>
+						</div>
+
+						<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
+							<span class="btn btn-success"></span>
+
+							<span class="btn btn-info"></span>
+
+							<span class="btn btn-warning"></span>
+
+							<span class="btn btn-danger"></span>
+						</div>
+					</div><!-- #sidebar-shortcuts -->
+
+					<nav class="navbar navbar-minimal animate open" role="navigation" style="background:transparent">
+						<ul class="navbar-menu animate">
+							<li>
+								<a href="#" class="animate">
+									<span class="desc animate"> Violet Online </span>
+									<img src="assets/img/logo_Violet.png" width="28" class="img-responsive pull-right">
+								</a>
+							</li>
+							<li>
+								<a href="http://space.violet.vn" class="animate">
+									<span class="desc animate"> Violet Space </span>
+									<img src="assets/img/logo_Violet_space_black_box.png" width="28" class="img-responsive pull-right">
+								</a>
+							</li>
+							<li>
+								<a href="#" class="animate">
+									<span class="desc animate"> Thanh toÃ¡n </span>
+									<img src="assets/img/payment.png" width="28" class="img-responsive pull-right">
+								</a>
+							</li>
+							<li>
+								<a href="user_profile.html" class="animate">
+									<span class="desc animate"> ThÃŽng tin cÃ¡ nhÃ¢n </span>
+									<img src="assets/img/profile.png" width="28" class="img-responsive pull-right">
+								</a>
+							</li>
+						</ul>
+					</nav>
+
+				</div>
+
+				<div class="main-content">
+
+					<div class="page-content">
+						<div class="page-header">
+							<h1>
+								ThÃŽng tin cÃ¡ nhÃ¢n
+								<small>
+									<i class="icon-double-angle-right"></i>
+									Admin
+								</small>
+							</h1>
+						</div><!-- /.page-header -->
+
+						<div class="row">
+							<div class="col-xs-12">
+								<!-- PAGE CONTENT BEGINS -->
+								<div class="user-profile row" id="user-profile-3">
+									<div class="col-sm-offset-1 col-sm-10">
+
+										<form class="form-horizontal">
+											<div class="tabbable">
+												<ul class="nav nav-tabs padding-16">
+													<li class="active">
+														<a href="#edit-basic" data-toggle="tab">
+															<i class="green icon-edit bigger-125"></i>
+															ThÃŽng tin cÃ¡ nhÃ¢n
+														</a>
+													</li>
+
+													<li>
+														<a href="#edit-password" data-toggle="tab">
+															<i class="blue icon-key bigger-125"></i>
+															Äá»i máº­t kháº©u
+														</a>
+													</li>
+												</ul>
+
+												<div class="tab-content profile-edit-tab-content">
+													<div class="tab-pane in active" id="edit-basic">
+														<h4 class="header blue bolder smaller">ThÃŽng tin chung</h4>
+
+														<div class="row">
+															<div class="col-xs-12 col-sm-4">
+																<div class="ace-file-input ace-file-multiple"><input type="file"><a href="#" class="remove"><i class="icon-remove"></i></a></div>
+															</div>
+
+															<div class="vspace-xs"></div>
+
+															<div class="col-xs-12 col-sm-8">
+																<div class="form-group">
+																	<label for="form-field-username" class="col-sm-4 control-label no-padding-right">TÃ i khoáº£n</label>
+
+																	<div class="col-sm-8">
+																		<input type="text" value="0918273645" placeholder="TÃ i khoáº£n" id="form-field-username" class="col-xs-12 col-sm-10" disabled>
+																	</div>
+																</div>
+
+																<div class="space-4"></div>
+
+																<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>
+
+																<div class="space-4"></div>
+
+																<div class="form-group">
+																	<label for="form-field-username" class="col-sm-4 control-label no-padding-right">TÃ i khoáº£n áº£o</label>
+
+																	<div class="col-sm-8">
+																		<input type="text" placeholder="TÃ i khoáº£n áº£o" id="form-field-username" class="col-xs-12 col-sm-10">
+																	</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">Thá»i háº¡n sá»­ dá»¥ng dá»ch vá»¥</label>
+
+																	<div class="col-sm-8">
+																		<input type="text" value="1/10/2020" placeholder="" id="form-field-username" class="col-xs-12 col-sm-10" disabled>
+																	</div>
+																</div>
+															</div>
+														</div>
+
+														<hr>
+														<div class="form-group">
+															<label for="form-field-date" class="col-sm-3 control-label no-padding-right">NgÃ y sinh</label>
+
+															<div class="col-sm-9">
+																<div class="input-medium">
+																	<div class="input-group">
+																		<input type="text" placeholder="dd-mm-yyyy" data-date-format="dd-mm-yyyy" id="form-field-date" class="input-medium date-picker">
+																		<span class="input-group-addon">
+																			<i class="icon-calendar"></i>
+																		</span>
+																	</div>
+																</div>
+															</div>
+														</div>
+
+														<div class="space-4"></div>
+
+														<div class="form-group">
+															<label class="col-sm-3 control-label no-padding-right">Giá»i tÃ­nh</label>
+
+															<div class="col-sm-9">
+																<label class="inline">
+																	<input type="radio" class="ace" name="form-field-radio">
+																	<span class="lbl"> Nam</span>
+																</label>
+
+																&nbsp; &nbsp; &nbsp;
+																<label class="inline">
+																	<input type="radio" class="ace" name="form-field-radio">
+																	<span class="lbl"> Ná»¯</span>
+																</label>
+															</div>
+														</div>
+
+														<div class="space"></div>
+														<h4 class="header blue bolder smaller">ThÃŽng tin liÃªn há»</h4>
+
+														<div class="form-group">
+															<label for="form-field-email" class="col-sm-3 control-label no-padding-right">Email</label>
+
+															<div class="col-sm-9">
+																<span class="input-icon input-icon-right">
+																	<input type="email" value="" id="form-field-email">
+																	<i class="icon-envelope"></i>
+																</span>
+															</div>
+														</div>
+
+														<div class="space-4"></div>
+
+														<div class="form-group">
+															<label for="form-field-website" class="col-sm-3 control-label no-padding-right">Website</label>
+
+															<div class="col-sm-9">
+																<span class="input-icon input-icon-right">
+																	<input type="url" value="" id="form-field-website">
+																	<i class="icon-globe"></i>
+																</span>
+															</div>
+														</div>
+
+														<div class="space-4"></div>
+
+														<div class="form-group">
+															<label for="form-field-phone" class="col-sm-3 control-label no-padding-right">Sá» Äiá»n thoáº¡i</label>
+
+															<div class="col-sm-9">
+																<span class="input-icon input-icon-right">
+																	<input type="text" id="form-field-phone" class="input-medium input-mask-phone">
+																	<i class="icon-phone icon-flip-horizontal"></i>
+																</span>
+															</div>
+														</div>
+
+														<div class="space"></div>
+														<h4 class="header blue bolder smaller">Máº¡ng xÃ£ há»i</h4>
+
+														<div class="form-group">
+															<label for="form-field-facebook" class="col-sm-3 control-label no-padding-right">Facebook</label>
+
+															<div class="col-sm-9">
+																<span class="input-icon">
+																	<input type="text" id="form-field-facebook" value="">
+																	<i class="icon-facebook blue"></i>
+																</span>
+															</div>
+														</div>
+
+														<div class="space-4"></div>
+
+														<div class="form-group">
+															<label for="form-field-twitter" class="col-sm-3 control-label no-padding-right">Twitter</label>
+
+															<div class="col-sm-9">
+																<span class="input-icon">
+																	<input type="text" id="form-field-twitter" value="">
+																	<i class="icon-twitter light-blue"></i>
+																</span>
+															</div>
+														</div>
+
+														<div class="space-4"></div>
+
+														<div class="form-group">
+															<label for="form-field-gplus" class="col-sm-3 control-label no-padding-right">Google+</label>
+
+															<div class="col-sm-9">
+																<span class="input-icon">
+																	<input type="text" id="form-field-gplus" value="">
+																	<i class="icon-google-plus red"></i>
+																</span>
+															</div>
+														</div>
+													</div>
+
+													<div class="tab-pane" id="edit-password">
+														<div class="space-10"></div>
+
+														<div class="form-group">
+															<label for="form-field-pass1" class="col-sm-3 control-label no-padding-right">Máº­t kháº©u má»i</label>
+
+															<div class="col-sm-9">
+																<input type="password" id="form-field-pass1">
+															</div>
+														</div>
+
+														<div class="space-4"></div>
+
+														<div class="form-group">
+															<label for="form-field-pass2" class="col-sm-3 control-label no-padding-right">Nháº­p láº¡i máº­t kháº©u</label>
+
+															<div class="col-sm-9">
+																<input type="password" id="form-field-pass2">
+															</div>
+														</div>
+													</div>
+												</div>
+											</div>
+
+											<div class="clearfix form-actions">
+												<div class="col-md-offset-3 col-md-9">
+													<button type="button" class="btn btn-info">
+														<i class="icon-ok bigger-110"></i>
+														LÆ°u láº¡i
+													</button>
+
+													&nbsp; &nbsp;
+													<button type="reset" class="btn">
+														<i class="icon-undo bigger-110"></i>
+														XÃ³a háº¿t
+													</button>
+												</div>
+											</div>
+										</form>
+									</div><!-- /span -->
+								</div>
+
+								<!-- PAGE CONTENT ENDS -->
+							</div><!-- /.col -->
+						</div><!-- /.row -->
+					</div><!-- /.page-content -->
+				</div><!-- /.main-content -->
+			</div><!-- /.main-container-inner -->
+
+			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
+				<i class="icon-double-angle-up icon-only bigger-110"></i>
+			</a>
+		</div><!-- /.main-container -->
+
+		<!-- basic scripts -->
+
+		<!--[if !IE]> -->
+
+		<script type="text/javascript">
+			window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
+		</script>
+
+		<!-- <![endif]-->
+
+		<!--[if IE]>
+<script type="text/javascript">
+ window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
+</script>
+<![endif]-->
+
+		<script type="text/javascript">
+			if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
+		</script>
+		<script src="assets/js/bootstrap.min.js"></script>
+		<script src="assets/js/typeahead-bs2.min.js"></script>
+
+		<!-- page specific plugin scripts -->
+
+		<!--[if lte IE 8]>
+		  <script src="assets/js/excanvas.min.js"></script>
+		<![endif]-->
+
+		<script src="assets/js/jquery-ui-1.10.3.custom.min.js"></script>
+		<script src="assets/js/jquery.ui.touch-punch.min.js"></script>
+		<script src="assets/js/jquery.gritter.min.js"></script>
+		<script src="assets/js/bootbox.min.js"></script>
+		<script src="assets/js/jquery.slimscroll.min.js"></script>
+		<script src="assets/js/jquery.easy-pie-chart.min.js"></script>
+		<script src="assets/js/jquery.hotkeys.min.js"></script>
+		<script src="assets/js/bootstrap-wysiwyg.min.js"></script>
+		<script src="assets/js/select2.min.js"></script>
+		<script src="assets/js/date-time/bootstrap-datepicker.min.js"></script>
+		<script src="assets/js/fuelux/fuelux.spinner.min.js"></script>
+		<script src="assets/js/x-editable/bootstrap-editable.min.js"></script>
+		<script src="assets/js/x-editable/ace-editable.min.js"></script>
+		<script src="assets/js/jquery.maskedinput.min.js"></script>
+
+		<!-- ace scripts -->
+
+		<script src="assets/js/ace-elements.min.js"></script>
+		<script src="assets/js/ace.min.js"></script>
+
+		<!-- inline scripts related to this page -->
+
+		<script type="text/javascript">
+			jQuery(function($) {
+			
+				///////////////////////////////////////////
+				$('#user-profile-3')
+				.find('input[type=file]').ace_file_input({
+					style:'well',
+					btn_choose:'HÃ¬nh Äáº¡i diá»n',
+					btn_change:null,
+					no_icon:'icon-picture',
+					thumbnail:'large',
+					droppable:true,
+					before_change: function(files, dropped) {
+						var file = files[0];
+						if(typeof file === "string") {//files is just a file name here (in browsers that don't support FileReader API)
+							if(! (/\.(jpe?g|png|gif)$/i).test(file) ) return false;
+						}
+						else {//file is a File object
+							var type = $.trim(file.type);
+							if( ( type.length > 0 && ! (/^image\/(jpe?g|png|gif)$/i).test(type) )
+									|| ( type.length == 0 && ! (/\.(jpe?g|png|gif)$/i).test(file.name) )//for android default browser!
+								) return false;
+			
+							if( file.size > 110000 ) {//~100Kb
+								return false;
+							}
+						}
+			
+						return true;
+					}
+				})
+				.end().find('button[type=reset]').on(ace.click_event, function(){
+					$('#user-profile-3 input[type=file]').ace_file_input('reset_input');
+				})
+				.end().find('.date-picker').datepicker().next().on(ace.click_event, function(){
+					$(this).prev().focus();
+				})
+				$('.input-mask-phone').mask('(999) 999-9999');
+			
+			
+			
+				////////////////////
+				//change profile
+				$('[data-toggle="buttons"] .btn').on('click', function(e){
+					var target = $(this).find('input[type=radio]');
+					var which = parseInt(target.val());
+					$('.user-profile').parent().addClass('hide');
+					$('#user-profile-'+which).parent().removeClass('hide');
+				});
+			});
+		</script>
+	</body>
+</html>
