@charset "UTF-8";
/**
 * Để cho đơn giản nhất mình dùng icon star của font awesome.
 * À mà khoan, ở đây chúng ta chỉ làm tut nhỏ nên thấy import cả 1 library font-awesome có vẻ hơi quá đáng đã vậy còn ngược lại tiêu chí
 * "HẠN CHẾ TỐI DÙNG THƯ VIỆN NGOÀI" :D chắc các bạn nghĩ thế nhỉ? Hiện tại chúng ta chỉ implement 1 tut nhỏ thì có vẻ thừa,
 * nhưng trong project mình đang code có sẵn font-awesome nên trên thực tế mình đâu có * thêm gì đâu :D
 */
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
#rating {
  border: none;
  float: left;
}

#rating > input {
  display: none;
} /*ẩn input radio - vì chúng ta đã có label là GUI*/
#rating > label:before {
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
} /*1 ngôi sao*/
#rating > .half:before {
  content: "\f089";
  position: absolute;
} /*0.5 ngôi sao*/
#rating > label {
  color: #ddd;
  float: right;
} /*float:right để lật ngược các ngôi sao lại đúng theo thứ tự trong thực tế*/
/*thêm màu cho sao đã chọn và các ngôi sao phía trước*/
#rating > input:checked ~ label,
#rating:not(:checked) > label:hover,
#rating:not(:checked) > label:hover ~ label {
  color: #FFC122;
}

/* Hover vào các sao phía trước ngôi sao đã chọn*/
#rating > input:checked + label:hover,
#rating > input:checked ~ label:hover,
#rating > label:hover ~ input:checked ~ label,
#rating > input:checked ~ label:hover ~ label {
  color: #FFC122;
}

#ratingIndex {
  border: none;
  float: left;
}

#ratingIndex > input {
  display: none;
} /*ẩn input radio - vì chúng ta đã có label là GUI*/
#ratingIndex > label:before {
  margin: 2px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
} /*1 ngôi sao*/
#ratingIndex > .half:before {
  content: "\f089";
  position: absolute;
} /*0.5 ngôi sao*/
#ratingIndex > label {
  color: #ddd;
  float: right;
} /*float:right để lật ngược các ngôi sao lại đúng theo thứ tự trong thực tế*/
/*thêm màu cho sao đã chọn và các ngôi sao phía trước*/
#ratingIndex > input:checked ~ label,
#ratingIndex:not(:checked) {
  color: #FFC122;
}

/* Hover vào các sao phía trước ngôi sao đã chọn*/
#ratingIndex > label:hover ~ input:checked ~ label,
#ratingIndex > input:checked ~ label {
  color: #FFC122;
}

/*# sourceMappingURL=rating.css.map */