Nội dung hữu ích cho EXTRA.css

PVS

Super Moderator
Thành viên BQT
Code hoặc hướng dẫn này được sử dụng trên phiên bản Xenforo cũ đã quá hạn sử dụng. Bạn hãy click để tìm bản mới hơn
Vnxf.vn - Trong tài liệu này mình sẽ thêm một số chỉnh sửa css hữu ích cho EXTRA.css (default style) mà mình đã thực hiện hoặc tìm thấy ở những nơi khác.

Danh sách chỉnh sửa cho EXTRA.css (theo thứ tự bảng chữ cái):

Mã:
/*START - Alert Balloon customization*/
.navTabs .navLink .itemCount .arrow {
  display: none;
}
.navTabs .navLink .itemCount {
  display: inline-block;
  vertical-align: top;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 2px;
  font-size: 10px;
}
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
  .Responsive .navTabs .navLink .itemCount
  {
  position: absolute;
  right: 0px;
  top: -2px;
  }
  .Responsive .navTabs .navLink .itemCount .arrow
  {
  display: initial;  /*comment this to hide balloon arrow*/
  }
}
</xen:if>
/*END - Alert Balloon customization*/

Kết quả:
<default>

balloon1.PNG

<với mã ứng dụng>​

balloon2.PNG

<không có thay đổi nào trên điện thoại di động>
balloon3.PNG

Mã:
/* START - Background image on forum */
html {
  background: url(/@imagePath/xenforo/background/your_image.jpg) !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}
/* END - Background image on forum */

Upload hình nền của bạn vào diễn đàn đến /@imagePath/xenforo/background/ và chỉnh sửa trên path.

Nếu bạn không muốn sử dụng hình nền cho điện thoại di động, thêm mã này:
Mã:
/* START - Background image on forum */
html {
background: url(/@imagePath/xenforo/background/your_image.jpg) !important;
background-attachment: fixed !important;
background-size: cover !important;
}
/* END - Background image on forum */
Upload your forum background image to /@imagePath/xenforo/background/ and edit above path.
If you don't want to use background image for example on mobile phones, add this code:
Code:
/* START - Background image on forum */
@media (min-width: 1025px) {
html {
background: url(/@imagePath/xenforo/background/your_image.jpg) !important;
background-attachment: fixed !important;
background-size: cover !important;
}
}
@media (max-width: 1025px) {
#header {
background-color: @primaryDarker !important;
}
}
/* END - Background image on forum */

Kết quả:

category_description_on_hover.gif

Mã:
/* START -Change colour of Terms and Rules */
#legal a:link, #legal a:visited {
color: @primaryLight !important;
}
/* END -Change colour of Terms and Rules */

Mã:
/* START - Change colour of the copyright text */
#copyright {
color: @primaryLight !important;
}
/* END - Change colour of the copyright text */

Mã:
/* START - Change SPOILER BUTTON colour */
.bbCodeSpoilerButton {
   background: @primaryLighterStill;
   height: 30px;
   padding: 0px 20px 5px 20px;
   line-height: 30px;
}
/* END - Change SPOILER BUTTON colour */

Mã:
/* START - COLOURED STICKY THREAD */
.discussionListItem.sticky {
background-color: #fff6ef;
}
.discussionListItem.sticky .posterAvatar, .discussionListItem.sticky .stats {
background: url("styles/default/xenforo/gradients/category-23px-light.png") repeat-x scroll center top @primaryLightest;
}
/* END - COLOURED STICKY THREAD */

Mã:
/* START - Customize interact button in profile posts sidebar */
.profilePostListItem .publicControls .item {
  float: left;
  margin-left: 10px;
  background-color: @primaryLighterStill;
  border-radius: 2px;
  padding: 0px 2px;
}
/* END - Customize interact button in profile posts sidebar */

Kết quả:

upload_2014-9-1_10-0-57.png

Mã:
/* START - Hide forum title only on forum_list */
.forum_list .titleBar {
display: none;
}
/* END - Hide forum title only on forum_list */

Mã:
/* START - Multi Coloured Category Nodes */
.forum_list .sectionMain { border: 0px solid #A5CAE4; padding: 0; }
.nodeList .node_XYZ .categoryForumNodeInfo, .nodeList .node_XYZ .forumNodeInfo, .nodeList .node_XYZ .pageNodeInfo,
.nodeList .node_XYZ .linkNodeInfo
{
background-color: transparent;
}
/* Your Category Name */
.nodeList .node_XYZ{
margin-bottom: 20px;
border: 1px solid #0B91D4;
border-radius: 0 0 5px 5px; }
.nodeList .node_XYZ .categoryStrip {
background-color: #0B91D4;
border-top: 1px solid #0B91D4;
border-bottom: 1px solid #0B91D4; }
.nodeList .node_XYZ .categoryStrip .nodeTitle a {
color: white; }
/* END - Multi Coloured Category Nodes */

Mã:
/* START - Navigation Transparency */
#navigation {
opacity:0.95;
filter:alpha(opacity=95); /* For IE8 and earlier */
}
/* END - Navigation Transparency */

Mã:
/* START - Poll Result colour */
.pollResult .bar {
	background: #6BA65E !important;
}
.pollResult .barContainer {
	border: 1px solid #6BA65E !important;
}
/* END - Poll Result colour */

Mã:
/* START - Profile Posts customized look */
.messageSimple {
	padding: 10px !important;
	border: 1px solid #e8e8e8;
	border-radius: 4px;
	box-shadow: 2px 2px 3px rgba(0,0,0, 0.1);
}
/* END - Profile Posts customized look */

Kết quả:

profile_posts_customized.png

Mã:
/* START - Public Controls (Reply, Like ... buttons) enhancements */
.message .muted {
background-color: #F0F7FC;
padding: 3px 3px;
color: #176093;
border-radius: 2px;
border: 0px solid white;
box-shadow: 0 0 0px #F0F7FC;
}
.message .hashPermalink {
background-color: @pageBackground;
padding: 3px 5px;
color: #176093;
border-radius: 2px;
border: 1px solid white;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
}
.message .like {
background-color: #eaf4fc;
padding: 3px 5px;
color: #176093;
border-radius: 2px;
border: 1px solid white;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
}
.message .unlike {
background-color: #fce3e3;
padding: 3px 5px;
color: #176093;
border-radius: 2px;
border: 1px solid white;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
}
.message .MultiQuoteControl {
background-color: #D3F9BB;
padding: 3px 5px;
color: #176093;
border-radius: 2px;
border: 1px solid white;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
}
.message .reply {
background-color: #fff4e5;
padding: 3px 5px;
color: #176093;
border-radius: 2px;
border: 1px solid white;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
}
.message .reply:hover, .message .MultiQuoteControl:hover, .message .hashPermalink:hover, .message .like:hover, .message .unlike:hover, .message .warn:hover, .message .report:hover, .message .ip:hover, .message .delete:hover, .message .edit:hover, .message .history:hover {
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
opacity: 0.5;
text-decoration: none !important;
}
/* END - Public Controls (Reply, Like ... buttons) enhancements */

Mã:
/* START - Public Controls (Reply, Like ... buttons) enhancements for PROFILE PAGE */
.messageSimple .like {
background-color: #eaf4fc;
padding: 1px 5px;
color: #176093;
border-radius: 2px;
border: 1px solid @primaryLighter;
}
.messageSimple .unlike {
background-color: #fce3e3;
padding: 1px 5px;
color: #176093;
border-radius: 2px;
border: 1px solid #fac5c5;
}
.messageSimple .postComment {
background-color: #fff4e5;
padding: 1px 5px;
color: #176093;
border-radius: 2px;
border: 1px solid #f8e0bd;
}
.messageSimple .like:hover, .messageSimple .unlike:hover, .messageSimple .postComment:hover {
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
opacity: 0.7;
text-decoration: none !important;
}
/* END - Public Controls (Reply, Like ... buttons) enhancements for PROFILE PAGE */

Kết quả:

ppbe.png

Mã:
/* START - Smilies hover effect */
img.mceSmilieSprite:hover { -webkit-transform: scale(1.2); }
img.mceSmilieSprite:hover { h-webkit-transition: all .2s ease-in-out; }
/* END - Smilies hover effect */

Mã:
/* START - Style MultiQuote/Select-to-Quote */[/LEFT]
#QuoteSelected {
  background-color: white;
  color: #176093;
  border-radius: 2px;
  border: 1px solid @primaryLightish;
  border-top: 4px solid @primaryLightish;
  box-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
}
#QuoteSelected:hover {
  border: 1px solid #F9D9B0;
  border-top: 4px solid #eeb76f;
}
#QuoteSelected a {
  color: #176093;
}
#QuoteSelected a:hover {
  color: #176093;
}
#QuoteSelected .arrow {
  display: none;
}
/* END - Style MultiQuote/Select-to-Quote */

Kết quả:
<not focused>

quote1.png

<focused>
quote2.png

Đây là một số kiểu dáng cơ bản. Thay đổi màu sắc cho phù hợp với nhu cầu của bạn.


Danh sách chỉnh sửa cho EXTRA.css bằng ADD-ONs:
  • Resource Manager
Mã:
/* START - Change Featured Resource Blocks width on resource list*/
.featuredResourceList .featuredResource {
	width: 395px !important;
}
/* END - Change Featured Resource Blocks width on resource list*/

Điều chỉnh sao cho phù hợp với nhu cầu của bạn.

Ví dụ cho forum có chiều rộng 1080px:
<không có code>

upload_2014-8-20_23-55-9.png

<có code>

upload_2014-8-20_23-55-47.png

Mã:
/* START - Customize Selected Resource in resource category list sidebar */
.resourceListSidebar .categoryList .selected {
	background: none repeat scroll 0 0 @primaryLighterStill;
	border-radius: 4px;
	padding: 3px;
}
/* END - Customize Selected Resource in resource category list sidebar */

Kết quả:

upload_2014-11-17_21-33-17.png

Mã:
/* START - Featured Banner colour change */
.resourceListItem .main .featuredBanner, .sidebar .featuredNotice {
  background: none !important;
  background-color: #3EA52D !important;
  color: white !important;
  border: none !important;
  padding: 3px !important;
  font-size: 11px !important;
}
/* END - Featured Banner colour change */

Kết quả:

upload_2014-8-21_1-20-46.png


upload_2014-8-21_1-23-34.png

Mã:
/* START - Remove minorText on disabled download button */
label.downloadButton.downloadDisabled .minorText {
   display: none;
   }
/* END - Remove minorText on disabled download button */

Mã:
/* START - Resource sidebar styled */
.resourceListSidebar .categoryList, .findResource, .miniResourceList, .avatarList {
  border-bottom: none !important;
  background: white !important;
  box-shadow: 2px 2px 3px rgba(0,0,0, 0.2);
  border-radius: 2px;
}
/* END - Resource sidebar styled */

Mã:
/* START - RESOURCE TITLE BAR ENHANCEMENTS */
.resourceInfo {
border: 1px solid @primaryLighter;
border-radius: 5px;
background: url("@imagePath/xenforo/gradients/tab-selected-light.png") repeat-x scroll bottom #ffffff !important;
background-color: @primaryLighterStill !important;
margin-bottom:5px auto;
padding: 10px 10px;
box-shadow: 0 0 1px #ffffff inset;
}
.featuredResourceList .featuredResource .resourceInfo {
padding: 0 0 0 0;
}
/* END - RESOURCE TITLE BAR ENHANCEMENTS */


Nguồn: xenforo.com​
 
Sửa lần cuối:
Vnxf.vn - Trong tài liệu này mình sẽ thêm một số chỉnh sửa css hữu ích cho EXTRA.css (default style) mà mình đã thực hiện hoặc tìm thấy ở những nơi khác.

Danh sách chỉnh sửa cho EXTRA.css (theo thứ tự bảng chữ cái):

Mã:
/*START - Alert Balloon customization*/
.navTabs .navLink .itemCount .arrow {
  display: none;
}
.navTabs .navLink .itemCount {
  display: inline-block;
  vertical-align: top;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 2px;
  font-size: 10px;
}
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
  .Responsive .navTabs .navLink .itemCount
  {
  position: absolute;
  right: 0px;
  top: -2px;
  }
  .Responsive .navTabs .navLink .itemCount .arrow
  {
  display: initial;  /*comment this to hide balloon arrow*/
  }
}
</xen:if>
/*END - Alert Balloon customization*/

Kết quả:
<default>

<với mã ứng dụng>​
<không có thay đổi nào trên điện thoại di động>

Mã:
/* START - Background image on forum */
html {
  background: url(/@imagePath/xenforo/background/your_image.jpg) !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}
/* END - Background image on forum */

Upload hình nền của bạn vào diễn đàn đến /@imagePath/xenforo/background/ và chỉnh sửa trên path.

Nếu bạn không muốn sử dụng hình nền cho điện thoại di động, thêm mã này:
Mã:
/* START - Background image on forum */
html {
background: url(/@imagePath/xenforo/background/your_image.jpg) !important;
background-attachment: fixed !important;
background-size: cover !important;
}
/* END - Background image on forum */
Upload your forum background image to /@imagePath/xenforo/background/ and edit above path.
If you don't want to use background image for example on mobile phones, add this code:
Code:
/* START - Background image on forum */
@media (min-width: 1025px) {
html {
background: url(/@imagePath/xenforo/background/your_image.jpg) !important;
background-attachment: fixed !important;
background-size: cover !important;
}
}
@media (max-width: 1025px) {
#header {
background-color: @primaryDarker !important;
}
}
/* END - Background image on forum */

Kết quả:


Mã:
/* START -Change colour of Terms and Rules */
#legal a:link, #legal a:visited {
color: @primaryLight !important;
}
/* END -Change colour of Terms and Rules */

Mã:
/* START - Change colour of the copyright text */
#copyright {
color: @primaryLight !important;
}
/* END - Change colour of the copyright text */

Mã:
/* START - Change SPOILER BUTTON colour */
.bbCodeSpoilerButton {
   background: @primaryLighterStill;
   height: 30px;
   padding: 0px 20px 5px 20px;
   line-height: 30px;
}
/* END - Change SPOILER BUTTON colour */

Mã:
/* START - COLOURED STICKY THREAD */
.discussionListItem.sticky {
background-color: #fff6ef;
}
.discussionListItem.sticky .posterAvatar, .discussionListItem.sticky .stats {
background: url("styles/default/xenforo/gradients/category-23px-light.png") repeat-x scroll center top @primaryLightest;
}
/* END - COLOURED STICKY THREAD */

Mã:
/* START - Customize interact button in profile posts sidebar */
.profilePostListItem .publicControls .item {
  float: left;
  margin-left: 10px;
  background-color: @primaryLighterStill;
  border-radius: 2px;
  padding: 0px 2px;
}
/* END - Customize interact button in profile posts sidebar */

Kết quả:


Mã:
/* START - Hide forum title only on forum_list */
.forum_list .titleBar {
display: none;
}
/* END - Hide forum title only on forum_list */

Mã:
/* START - Multi Coloured Category Nodes */
.forum_list .sectionMain { border: 0px solid #A5CAE4; padding: 0; }
.nodeList .node_XYZ .categoryForumNodeInfo, .nodeList .node_XYZ .forumNodeInfo, .nodeList .node_XYZ .pageNodeInfo,
.nodeList .node_XYZ .linkNodeInfo
{
background-color: transparent;
}
/* Your Category Name */
.nodeList .node_XYZ{
margin-bottom: 20px;
border: 1px solid #0B91D4;
border-radius: 0 0 5px 5px; }
.nodeList .node_XYZ .categoryStrip {
background-color: #0B91D4;
border-top: 1px solid #0B91D4;
border-bottom: 1px solid #0B91D4; }
.nodeList .node_XYZ .categoryStrip .nodeTitle a {
color: white; }
/* END - Multi Coloured Category Nodes */

Mã:
/* START - Navigation Transparency */
#navigation {
opacity:0.95;
filter:alpha(opacity=95); /* For IE8 and earlier */
}
/* END - Navigation Transparency */

Mã:
/* START - Poll Result colour */
.pollResult .bar {
    background: #6BA65E !important;
}
.pollResult .barContainer {
    border: 1px solid #6BA65E !important;
}
/* END - Poll Result colour */

Mã:
/* START - Profile Posts customized look */
.messageSimple {
    padding: 10px !important;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    box-shadow: 2px 2px 3px rgba(0,0,0, 0.1);
}
/* END - Profile Posts customized look */

Kết quả:


Mã:
/* START - Public Controls (Reply, Like ... buttons) enhancements */
.message .muted {
background-color: #F0F7FC;
padding: 3px 3px;
color: #176093;
border-radius: 2px;
border: 0px solid white;
box-shadow: 0 0 0px #F0F7FC;
}
.message .hashPermalink {
background-color: @pageBackground;
padding: 3px 5px;
color: #176093;
border-radius: 2px;
border: 1px solid white;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
}
.message .like {
background-color: #eaf4fc;
padding: 3px 5px;
color: #176093;
border-radius: 2px;
border: 1px solid white;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
}
.message .unlike {
background-color: #fce3e3;
padding: 3px 5px;
color: #176093;
border-radius: 2px;
border: 1px solid white;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
}
.message .MultiQuoteControl {
background-color: #D3F9BB;
padding: 3px 5px;
color: #176093;
border-radius: 2px;
border: 1px solid white;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
}
.message .reply {
background-color: #fff4e5;
padding: 3px 5px;
color: #176093;
border-radius: 2px;
border: 1px solid white;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
}
.message .reply:hover, .message .MultiQuoteControl:hover, .message .hashPermalink:hover, .message .like:hover, .message .unlike:hover, .message .warn:hover, .message .report:hover, .message .ip:hover, .message .delete:hover, .message .edit:hover, .message .history:hover {
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
opacity: 0.5;
text-decoration: none !important;
}
/* END - Public Controls (Reply, Like ... buttons) enhancements */

Mã:
/* START - Public Controls (Reply, Like ... buttons) enhancements for PROFILE PAGE */
.messageSimple .like {
background-color: #eaf4fc;
padding: 1px 5px;
color: #176093;
border-radius: 2px;
border: 1px solid @primaryLighter;
}
.messageSimple .unlike {
background-color: #fce3e3;
padding: 1px 5px;
color: #176093;
border-radius: 2px;
border: 1px solid #fac5c5;
}
.messageSimple .postComment {
background-color: #fff4e5;
padding: 1px 5px;
color: #176093;
border-radius: 2px;
border: 1px solid #f8e0bd;
}
.messageSimple .like:hover, .messageSimple .unlike:hover, .messageSimple .postComment:hover {
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
opacity: 0.7;
text-decoration: none !important;
}
/* END - Public Controls (Reply, Like ... buttons) enhancements for PROFILE PAGE */

Kết quả:


Mã:
/* START - Smilies hover effect */
img.mceSmilieSprite:hover { -webkit-transform: scale(1.2); }
img.mceSmilieSprite:hover { h-webkit-transition: all .2s ease-in-out; }
/* END - Smilies hover effect */

Mã:
/* START - Style MultiQuote/Select-to-Quote */[/LEFT]
#QuoteSelected {
  background-color: white;
  color: #176093;
  border-radius: 2px;
  border: 1px solid @primaryLightish;
  border-top: 4px solid @primaryLightish;
  box-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
}
#QuoteSelected:hover {
  border: 1px solid #F9D9B0;
  border-top: 4px solid #eeb76f;
}
#QuoteSelected a {
  color: #176093;
}
#QuoteSelected a:hover {
  color: #176093;
}
#QuoteSelected .arrow {
  display: none;
}
/* END - Style MultiQuote/Select-to-Quote */

Kết quả:
<not focused>
<focused>
Đây là một số kiểu dáng cơ bản. Thay đổi màu sắc cho phù hợp với nhu cầu của bạn.


Danh sách chỉnh sửa cho EXTRA.css bằng ADD-ONs:
  • Resource Manager
Mã:
/* START - Change Featured Resource Blocks width on resource list*/
.featuredResourceList .featuredResource {
    width: 395px !important;
}
/* END - Change Featured Resource Blocks width on resource list*/

Điều chỉnh sao cho phù hợp với nhu cầu của bạn.

Ví dụ cho forum có chiều rộng 1080px:
<không có code>
<có code>

Mã:
/* START - Customize Selected Resource in resource category list sidebar */
.resourceListSidebar .categoryList .selected {
    background: none repeat scroll 0 0 @primaryLighterStill;
    border-radius: 4px;
    padding: 3px;
}
/* END - Customize Selected Resource in resource category list sidebar */

Kết quả:

Mã:
/* START - Featured Banner colour change */
.resourceListItem .main .featuredBanner, .sidebar .featuredNotice {
  background: none !important;
  background-color: #3EA52D !important;
  color: white !important;
  border: none !important;
  padding: 3px !important;
  font-size: 11px !important;
}
/* END - Featured Banner colour change */

Kết quả:

Mã:
/* START - Remove minorText on disabled download button */
label.downloadButton.downloadDisabled .minorText {
   display: none;
   }
/* END - Remove minorText on disabled download button */

Mã:
/* START - Resource sidebar styled */
.resourceListSidebar .categoryList, .findResource, .miniResourceList, .avatarList {
  border-bottom: none !important;
  background: white !important;
  box-shadow: 2px 2px 3px rgba(0,0,0, 0.2);
  border-radius: 2px;
}
/* END - Resource sidebar styled */

Mã:
/* START - RESOURCE TITLE BAR ENHANCEMENTS */
.resourceInfo {
border: 1px solid @primaryLighter;
border-radius: 5px;
background: url("@imagePath/xenforo/gradients/tab-selected-light.png") repeat-x scroll bottom #ffffff !important;
background-color: @primaryLighterStill !important;
margin-bottom:5px auto;
padding: 10px 10px;
box-shadow: 0 0 1px #ffffff inset;
}
.featuredResourceList .featuredResource .resourceInfo {
padding: 0 0 0 0;
}
/* END - RESOURCE TITLE BAR ENHANCEMENTS */

Nguồn: xenforo.com​
bài viết rất hay
 
  • Like
Reactions: THB
Mã:
 / * START - Featured Resource Blocks Change width on the resource list * /
.featuredResourceList .featuredResource {
    width: 395px! important;
}
/ * END - Featured Resource Blocks Change width on the resource list * / [/ CODE]

[IMG]http://img.prntscr.com/img?url=http://i.imgur.com/ralexYr.png[/IMG]

sir i putt this code template  on extra.css but not changed features in block  plz help me
 
Các bạn cho mình hỏi là: cái hình nền mình up vào đâu? Vì trong source xen cũa mình không có thư mục background.
thanks ạ @PVS @THB
 
Hi.thank you.
Cho mình hỏi luôn là ở phần tạo bảng cho Xen thì khoảng cách các bảng xa quá, chỉnh xích lại mãi không được...!!
file đính kèm.
 

Đính kèm

  • 1.jpg
    1.jpg
    18.4 KB · Lượt xem: 17
Back
Top