Hướng dẫn làm Recent News giống Hành Trình Số

[PVS]

Hướng dẫn làm Recent News giống Hành Trình Số

Yêu cầu: Cài add-on Xenporta 1.6.0
Demo:

​

Đầu tiên vào thay toàn bộ template EWRblock_RecentNews bằng code sau

<xen:require css="message_user_info.css" />
<xen:require css="bb_code.css" />
<xen:require css="EWRblock_RecentNews.css" />

<div id="recentNews">
<xen:foreach loop="$RecentNews" value="$news" i="$i">
<xen:if is="{$i}== 1 || {$i}== 3 || {$i}== 5 || {$i}== 7 || {$i}== 9">
<section class="panel no-borders hbox" style="background-image: url(
<xen:if is="{$news.attach}">
{$news.attach.thumbnailUrl}
<xen:elseif is="{$news.image}" />
{$news.image}
<xen:else />
images/news.jpg
</xen:if>); background-size: cover; background-position: 50% 50%; vertical-align: top;">
<aside class="bg-info lter r-l text-center v-middle ">
<div class="wrapper">
<a href="{xen:link threads, $news}" title="{$news.title}" class="newsTitle">{xen:helper threadPrefix, $news}{$news.title}</a>
</div>
</aside>
<aside>
<div class="pos-rlt">
<span class="arrow left hidden-xs"></span>
<div class="panel-body">
<div class="clearfix m-b">
<small class="text-muted pull-right"><a href="{xen:link threads, $news}"><span class="DateTime" title="{xen:time $news.post_date}">{xen:time $news.post_date}</span></a>

</small>
<xen:avatar user="$news" size="s" img="true" />
<a href="{xen:link members, $news}"><strong>{$news.username}</strong></a>
</div>
<p>{xen:helper snippet, $news.message, 300}</p>
<div class="footnews"><a href="{xen:link threads/unread, $news}" class="act ive-love">{xen:number $news.first_post_likes}</a> <a href="{xen:link threads/unread, $news}" class="act ive-read">{xen:number $news.view_count}</a> <a href="{xen:link threads/unread, $news}" class="act ive-comment">{xen:number $news.reply_count}</a>
</div>
</div>
</div>
</aside>
</section>
<xen:else/>
<section class="panel no-borders hbox" style="background-image: url(<xen:if is="{$news.attach}">
{$news.attach.thumbnailUrl}
<xen:elseif is="{$news.image}" />
{$news.image}
<xen:else />
images/news.jpg
</xen:if>); background-size: cover; background-position: 50% 50%; vertical-align: top;">
         <aside>
            <div class="pos-rlt">
            <span class="arrow right hidden-xs"></span>
              <div class="panel-body">
                <div class="clearfix m-b">
                <small class="text-muted pull-right"><a href="{xen:link threads, $news}"><span class="DateTime" title="{xen:time $news.post_date}">{xen:time $news.post_date}</span></a>
                               
                         </small>
<xen:avatar user="$news" size="s" img="true" />
<a href="{xen:link members, $news}"><strong>{$news.username}</strong></a>                </div>
               <p>{xen:helper snippet, $news.message, 300}</p>
               <small></small><div class="footnews"><a href="{xen:link threads/unread, $news}" class="act ive-love">{xen:number $news.first_post_likes}</a> <a href="{xen:link threads/unread, $news}" class="act ive-read">{xen:number $news.view_count}</a> <a href="{xen:link threads/unread, $news}" class="act ive-comment">{xen:number $news.reply_count}</a>
               </small>
               </div>
            </div>
        </div></aside>
        <aside class="bg-primary clearfix lter r-r text-right v-middle">
        <div class="wrapper"><a href="{xen:link threads, $news}" title="{$news.title}" class="newsTitle"> {$news.title}</a></div>
        </aside>
    </section>
</xen:if>
</xen:foreach>

<xen:if hascontent="true">
<div class="section sectionMain">
<xen:contentcheck>
<xen:if is="{$option.pagenav} && {$option.count} > {$option.limit}">
<xen:pagenav link="articles" linkdata="{$category}" page="{$page}" perpage="{$option.limit}" total="{$option.count}" />
</xen:if>
</xen:contentcheck>
</div>
</xen:if>
</div>

Sau đó vào thay toàn bộ template EWRblock_RecentNews.css bằng code sau:

section{display:block;}b,strong{font-weight:bold;}small{font-size:80%;}
@media print{}

@media screen and (min-width: 768px){}

.panel{margin-bottom:10px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2);}
.panel-node{background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2);}
.panel-news{background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2);}

.panel-body{
background-color: #fff;
padding: 15px;
}

@media (max-width: 767px){.hidden-xs{display:none !important;}}
@media (min-width: 768px) and (max-width: 991px){.hidden-sm{display:none !important;}}
@media (min-width: 992px) and (max-width: 1199px){.hidden-md{display:none !important;}}
@media (min-width: 1200px){.hidden-lg{display:none !important;}}.visible-print{display:none !important;}
@media print{}
@media print{.hidden-print{display:none !important;}}

@font-face{font-family:'FontAwesome';src:url('http://hanhtrinhso.com/fonts/fontawesome-webfont.eot');src:url('/fonts/fontawesome-webfont.eot') format('embedded-opentype'),url('/fonts/fontawesome-webfont.woff') format('woff'),url('/fonts/fontawesome-webfont.ttf') format('truetype'),url('/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}
.bt{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.bt-lg{font-size:1.3333333333333333em;line-height:.75em;vertical-align:-15%}
.bt-2x{font-size:2em}
.bt-3x{font-size:3em}
.bt-4x{font-size:4em}
.bt-5x{font-size:5em}
.bt-fw{width:1.2857142857142858em;text-align:center}
.bt-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none}
.bt-ul>li{position:relative}
.bt-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;top:.14285714285714285em;text-align:center}
.bt-li.bt-lg{left:-1.8571428571428572em}
.bt-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}
.pull-right{float:right}
.pull-left{float:left}
.bt.pull-left{margin-right:.3em}
.bt.pull-right{margin-left:.3em}
.bt-spin{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear}

.bt-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}
.bt-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}
.bt-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}
.bt-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0,mirror=1);-webkit-transform:scale(-1,1);-moz-transform:scale(-1,1);-ms-transform:scale(-1,1);-o-transform:scale(-1,1);transform:scale(-1,1)}
.bt-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2,mirror=1);-webkit-transform:scale(1,-1);-moz-transform:scale(1,-1);-ms-transform:scale(1,-1);-o-transform:scale(1,-1);transform:scale(1,-1)}
.bt-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}
.bt-stack-1x,.bt-stack-2x{position:absolute;left:0;width:100%;text-align:center}
.bt-stack-1x{line-height:inherit}
.bt-stack-2x{font-size:2em}
.bt-inverse{color:#fff}
.bt-glass:before{content:"\f000"}
.bt-music:before{content:"\f001"}
.bt-search:before{content:"\f002"}
.bt-envelope-o:before{content:"\f003"}
.bt-heart:before{content:"\f004"}
.bt-star:before{content:"\f005"}
.bt-star-o:before{content:"\f006"}
.bt-user:before{content:"\f007"}
.bt-film:before{content:"\f008"}
.bt-th-large:before{content:"\f009"}
.bt-th:before{content:"\f00a"}
.bt-th-list:before{content:"\f00b"}
.bt-check:before{content:"\f00c"}
.bt-times:before{content:"\f00d"}
.bt-search-plus:before{content:"\f00e"}
.bt-search-minus:before{content:"\f010"}
.bt-power-off:before{content:"\f011"}
.bt-signal:before{content:"\f012"}
.bt-gear:before,.bt-cog:before{content:"\f013"}
.bt-trash-o:before{content:"\f014"}
.bt-home:before{content:"\f015"}
.bt-file-o:before{content:"\f016"}
.bt-clock-o:before{content:"\f017"}
.bt-road:before{content:"\f018"}
.bt-download:before{content:"\f019"}
.bt-arrow-circle-o-down:before{content:"\f01a"}
.bt-arrow-circle-o-up:before{content:"\f01b"}
.bt-inbox:before{content:"\f01c"}
.bt-play-circle-o:before{content:"\f01d"}
.bt-rotate-right:before,.bt-repeat:before{content:"\f01e"}
.bt-refresh:before{content:"\f021"}
.bt-list-alt:before{content:"\f022"}
.bt-lock:before{content:"\f023"}
.bt-flag:before{content:"\f024"}
.bt-headphones:before{content:"\f025"}
.bt-volume-off:before{content:"\f026"}
.bt-volume-down:before{content:"\f027"}
.bt-volume-up:before{content:"\f028"}
.bt-qrcode:before{content:"\f029"}
.bt-barcode:before{content:"\f02a"}
.bt-tag:before{content:"\f02b"}
.bt-tags:before{content:"\f02c"}
.bt-book:before{content:"\f02d"}
.bt-bookmark:before{content:"\f02e"}
.bt-print:before{content:"\f02f"}
.bt-camera:before{content:"\f030"}
.bt-font:before{content:"\f031"}
.bt-bold:before{content:"\f032"}
.bt-italic:before{content:"\f033"}
.bt-text-height:before{content:"\f034"}
.bt-text-width:before{content:"\f035"}
.bt-align-left:before{content:"\f036"}
.bt-align-center:before{content:"\f037"}
.bt-align-right:before{content:"\f038"}
.bt-align-justify:before{content:"\f039"}
.bt-list:before{content:"\f03a"}
.bt-dedent:before,.bt-outdent:before{content:"\f03b"}
.bt-indent:before{content:"\f03c"}
.bt-video-camera:before{content:"\f03d"}
.bt-picture-o:before{content:"\f03e"}
.bt-pencil:before{content:"\f040"}
.bt-map-marker:before{content:"\f041"}
.bt-adjust:before{content:"\f042"}
.bt-tint:before{content:"\f043"}
.bt-edit:before,.bt-pencil-square-o:before{content:"\f044"}
.bt-share-square-o:before{content:"\f045"}
.bt-check-square-o:before{content:"\f046"}
.bt-arrows:before{content:"\f047"}
.bt-step-backward:before{content:"\f048"}
.bt-fast-backward:before{content:"\f049"}
.bt-backward:before{content:"\f04a"}
.bt-play:before{content:"\f04b"}
.bt-pause:before{content:"\f04c"}
.bt-stop:before{content:"\f04d"}
.bt-forward:before{content:"\f04e"}
.bt-fast-forward:before{content:"\f050"}
.bt-step-forward:before{content:"\f051"}
.bt-eject:before{content:"\f052"}
.bt-chevron-left:before{content:"\f053"}
.bt-chevron-right:before{content:"\f054"}
.bt-plus-circle:before{content:"\f055"}
.bt-minus-circle:before{content:"\f056"}
.bt-times-circle:before{content:"\f057"}
.bt-check-circle:before{content:"\f058"}
.bt-question-circle:before{content:"\f059"}
.bt-info-circle:before{content:"\f05a"}
.bt-crosshairs:before{content:"\f05b"}
.bt-times-circle-o:before{content:"\f05c"}
.bt-check-circle-o:before{content:"\f05d"}
.bt-ban:before{content:"\f05e"}
.bt-arrow-left:before{content:"\f060"}
.bt-arrow-right:before{content:"\f061"}
.bt-arrow-up:before{content:"\f062"}
.bt-arrow-down:before{content:"\f063"}
.bt-mail-forward:before,.bt-share:before{content:"\f064"}
.bt-expand:before{content:"\f065"}
.bt-compress:before{content:"\f066"}
.bt-plus:before{content:"\f067"}
.bt-minus:before{content:"\f068"}
.bt-asterisk:before{content:"\f069"}
.bt-exclamation-circle:before{content:"\f06a"}
.bt-gift:before{content:"\f06b"}
.bt-leaf:before{content:"\f06c"}
.bt-fire:before{content:"\f06d"}
.bt-eye:before{content:"\f06e"}
.bt-eye-slash:before{content:"\f070"}
.bt-warning:before,.bt-exclamation-triangle:before{content:"\f071"}
.bt-plane:before{content:"\f072"}
.bt-calendar:before{content:"\f073"}
.bt-random:before{content:"\f074"}
.bt-comment:before{content:"\f075"}
.bt-magnet:before{content:"\f076"}
.bt-chevron-up:before{content:"\f077"}
.bt-chevron-down:before{content:"\f078"}
.bt-retweet:before{content:"\f079"}
.bt-shopping-cart:before{content:"\f07a"}
.bt-folder:before{content:"\f07b"}
.bt-folder-open:before{content:"\f07c"}
.bt-arrows-v:before{content:"\f07d"}
.bt-arrows-h:before{content:"\f07e"}
.bt-bar-chart-o:before{content:"\f080"}
.bt-twitter-square:before{content:"\f081"}
.bt-facebook-square:before{content:"\f082"}
.bt-camera-retro:before{content:"\f083"}
.bt-key:before{content:"\f084"}
.bt-gears:before,.bt-cogs:before{content:"\f085"}
.bt-comments:before{content:"\f086"}
.bt-thumbs-o-up:before{content:"\f087"}
.bt-thumbs-o-down:before{content:"\f088"}
.bt-star-half:before{content:"\f089"}
.bt-heart-o:before{content:"\f08a"}
.bt-sign-out:before{content:"\f08b"}
.bt-linkedin-square:before{content:"\f08c"}
.bt-thumb-tack:before{content:"\f08d"}
.bt-external-link:before{content:"\f08e"}
.bt-sign-in:before{content:"\f090"}
.bt-trophy:before{content:"\f091"}
.bt-github-square:before{content:"\f092"}
.bt-upload:before{content:"\f093"}
.bt-lemon-o:before{content:"\f094"}
.bt-phone:before{content:"\f095"}
.bt-square-o:before{content:"\f096"}
.bt-bookmark-o:before{content:"\f097"}
.bt-phone-square:before{content:"\f098"}
.bt-twitter:before{content:"\f099"}
.bt-facebook:before{content:"\f09a"}
.bt-github:before{content:"\f09b"}
.bt-unlock:before{content:"\f09c"}
.bt-credit-card:before{content:"\f09d"}
.bt-rss:before{content:"\f09e"}
.bt-hdd-o:before{content:"\f0a0"}
.bt-bullhorn:before{content:"\f0a1"}
.bt-bell:before{content:"\f0f3"}
.bt-certificate:before{content:"\f0a3"}
.bt-hand-o-right:before{content:"\f0a4"}
.bt-hand-o-left:before{content:"\f0a5"}
.bt-hand-o-up:before{content:"\f0a6"}
.bt-hand-o-down:before{content:"\f0a7"}
.bt-arrow-circle-left:before{content:"\f0a8"}
.bt-arrow-circle-right:before{content:"\f0a9"}
.bt-arrow-circle-up:before{content:"\f0aa"}
.bt-arrow-circle-down:before{content:"\f0ab"}
.bt-globe:before{content:"\f0ac"}
.bt-wrench:before{content:"\f0ad"}
.bt-tasks:before{content:"\f0ae"}
.bt-filter:before{content:"\f0b0"}
.bt-briefcase:before{content:"\f0b1"}
.bt-arrows-alt:before{content:"\f0b2"}
.bt-group:before,.bt-users:before{content:"\f0c0"}
.bt-chain:before,.bt-link:before{content:"\f0c1"}
.bt-cloud:before{content:"\f0c2"}
.bt-flask:before{content:"\f0c3"}
.bt-cut:before,.bt-scissors:before{content:"\f0c4"}
.bt-copy:before,.bt-files-o:before{content:"\f0c5"}
.bt-paperclip:before{content:"\f0c6"}
.bt-save:before,.bt-floppy-o:before{content:"\f0c7"}
.bt-square:before{content:"\f0c8"}
.bt-bars:before{content:"\f0c9"}
.bt-list-ul:before{content:"\f0ca"}
.bt-list-ol:before{content:"\f0cb"}
.bt-strikethrough:before{content:"\f0cc"}
.bt-underline:before{content:"\f0cd"}
.bt-table:before{content:"\f0ce"}
.bt-magic:before{content:"\f0d0"}
.bt-truck:before{content:"\f0d1"}
.bt-pinterest:before{content:"\f0d2"}
.bt-pinterest-square:before{content:"\f0d3"}
.bt-google-plus-square:before{content:"\f0d4"}
.bt-google-plus:before{content:"\f0d5"}
.bt-money:before{content:"\f0d6"}
.bt-caret-down:before{content:"\f0d7"}
.bt-caret-up:before{content:"\f0d8"}
.bt-caret-left:before{content:"\f0d9"}
.bt-caret-right:before{content:"\f0da"}
.bt-columns:before{content:"\f0db"}
.bt-unsorted:before,.bt-sort:before{content:"\f0dc"}
.bt-sort-down:before,.bt-sort-asc:before{content:"\f0dd"}
.bt-sort-up:before,.bt-sort-desc:before{content:"\f0de"}
.bt-envelope:before{content:"\f0e0"}
.bt-linkedin:before{content:"\f0e1"}
.bt-rotate-left:before,.bt-undo:before{content:"\f0e2"}
.bt-legal:before,.bt-gavel:before{content:"\f0e3"}
.bt-dashboard:before,.bt-tachometer:before{content:"\f0e4"}
.bt-comment-o:before{content:"\f0e5"}
.bt-comments-o:before{content:"\f0e6"}
.bt-flash:before,.bt-bolt:before{content:"\f0e7"}
.bt-sitemap:before{content:"\f0e8"}
.bt-umbrella:before{content:"\f0e9"}
.bt-paste:before,.bt-clipboard:before{content:"\f0ea"}
.bt-lightbulb-o:before{content:"\f0eb"}
.bt-exchange:before{content:"\f0ec"}
.bt-cloud-download:before{content:"\f0ed"}
.bt-cloud-upload:before{content:"\f0ee"}
.bt-user-md:before{content:"\f0f0"}
.bt-stethoscope:before{content:"\f0f1"}
.bt-suitcase:before{content:"\f0f2"}
.bt-bell-o:before{content:"\f0a2"}
.bt-coffee:before{content:"\f0f4"}
.bt-cutlery:before{content:"\f0f5"}
.bt-file-text-o:before{content:"\f0f6"}
.bt-building-o:before{content:"\f0f7"}
.bt-hospital-o:before{content:"\f0f8"}
.bt-ambulance:before{content:"\f0f9"}
.bt-medkit:before{content:"\f0fa"}
.bt-fighter-jet:before{content:"\f0fb"}
.bt-beer:before{content:"\f0fc"}
.bt-h-square:before{content:"\f0fd"}
.bt-plus-square:before{content:"\f0fe"}
.bt-angle-double-left:before{content:"\f100"}
.bt-angle-double-right:before{content:"\f101"}
.bt-angle-double-up:before{content:"\f102"}
.bt-angle-double-down:before{content:"\f103"}
.bt-angle-left:before{content:"\f104"}
.bt-angle-right:before{content:"\f105"}
.bt-angle-up:before{content:"\f106"}
.bt-angle-down:before{content:"\f107"}
.bt-desktop:before{content:"\f108"}
.bt-laptop:before{content:"\f109"}
.bt-tablet:before{content:"\f10a"}
.bt-mobile-phone:before,.bt-mobile:before{content:"\f10b"}
.bt-circle-o:before{content:"\f10c"}
.bt-quote-left:before{content:"\f10d"}
.bt-quote-right:before{content:"\f10e"}
.bt-spinner:before{content:"\f110"}
.bt-circle:before{content:"\f111"}
.bt-mail-reply:before,.bt-reply:before{content:"\f112"}
.bt-github-alt:before{content:"\f113"}
.bt-folder-o:before{content:"\f114"}
.bt-folder-open-o:before{content:"\f115"}
.bt-smile-o:before{content:"\f118"}
.bt-frown-o:before{content:"\f119"}
.bt-meh-o:before{content:"\f11a"}
.bt-gamepad:before{content:"\f11b"}
.bt-keyboard-o:before{content:"\f11c"}
.bt-flag-o:before{content:"\f11d"}
.bt-flag-checkered:before{content:"\f11e"}
.bt-terminal:before{content:"\f120"}
.bt-code:before{content:"\f121"}
.bt-reply-all:before{content:"\f122"}
.bt-mail-reply-all:before{content:"\f122"}
.bt-star-half-empty:before,.bt-star-half-full:before,.bt-star-half-o:before{content:"\f123"}
.bt-location-arrow:before{content:"\f124"}
.bt-crop:before{content:"\f125"}
.bt-code-fork:before{content:"\f126"}
.bt-unlink:before,.bt-chain-broken:before{content:"\f127"}
.bt-question:before{content:"\f128"}
.bt-info:before{content:"\f129"}
.bt-exclamation:before{content:"\f12a"}
.bt-superscript:before{content:"\f12b"}
.bt-subscript:before{content:"\f12c"}
.bt-eraser:before{content:"\f12d"}
.bt-puzzle-piece:before{content:"\f12e"}
.bt-microphone:before{content:"\f130"}
.bt-microphone-slash:before{content:"\f131"}
.bt-shield:before{content:"\f132"}
.bt-calendar-o:before{content:"\f133"}
.bt-fire-extinguisher:before{content:"\f134"}
.bt-rocket:before{content:"\f135"}
.bt-maxcdn:before{content:"\f136"}
.bt-chevron-circle-left:before{content:"\f137"}
.bt-chevron-circle-right:before{content:"\f138"}
.bt-chevron-circle-up:before{content:"\f139"}
.bt-chevron-circle-down:before{content:"\f13a"}
.bt-html5:before{content:"\f13b"}
.bt-css3:before{content:"\f13c"}
.bt-anchor:before{content:"\f13d"}
.bt-unlock-alt:before{content:"\f13e"}
.bt-bullseye:before{content:"\f140"}
.bt-ellipsis-h:before{content:"\f141"}
.bt-ellipsis-v:before{content:"\f142"}
.bt-rss-square:before{content:"\f143"}
.bt-play-circle:before{content:"\f144"}
.bt-ticket:before{content:"\f145"}
.bt-minus-square:before{content:"\f146"}
.bt-minus-square-o:before{content:"\f147"}
.bt-level-up:before{content:"\f148"}
.bt-level-down:before{content:"\f149"}
.bt-check-square:before{content:"\f14a"}
.bt-pencil-square:before{content:"\f14b"}
.bt-external-link-square:before{content:"\f14c"}
.bt-share-square:before{content:"\f14d"}
.bt-compass:before{content:"\f14e"}
.bt-toggle-down:before,.bt-caret-square-o-down:before{content:"\f150"}
.bt-toggle-up:before,.bt-caret-square-o-up:before{content:"\f151"}
.bt-toggle-right:before,.bt-caret-square-o-right:before{content:"\f152"}
.bt-euro:before,.bt-eur:before{content:"\f153"}
.bt-gbp:before{content:"\f154"}
.bt-dollar:before,.bt-usd:before{content:"\f155"}
.bt-rupee:before,.bt-inr:before{content:"\f156"}
.bt-cny:before,.bt-rmb:before,.bt-yen:before,.bt-jpy:before{content:"\f157"}
.bt-ruble:before,.bt-rouble:before,.bt-rub:before{content:"\f158"}
.bt-won:before,.bt-krw:before{content:"\f159"}
.bt-bitcoin:before,.bt-btc:before{content:"\f15a"}
.bt-file:before{content:"\f15b"}
.bt-file-text:before{content:"\f15c"}
.bt-sort-alpha-asc:before{content:"\f15d"}
.bt-sort-alpha-desc:before{content:"\f15e"}
.bt-sort-amount-asc:before{content:"\f160"}
.bt-sort-amount-desc:before{content:"\f161"}
.bt-sort-numeric-asc:before{content:"\f162"}
.bt-sort-numeric-desc:before{content:"\f163"}
.bt-thumbs-up:before{content:"\f164"}
.bt-thumbs-down:before{content:"\f165"}
.bt-youtube-square:before{content:"\f166"}
.bt-youtube:before{content:"\f167"}
.bt-xing:before{content:"\f168"}
.bt-xing-square:before{content:"\f169"}
.bt-youtube-play:before{content:"\f16a"}
.bt-dropbox:before{content:"\f16b"}
.bt-stack-overflow:before{content:"\f16c"}
.bt-instagram:before{content:"\f16d"}
.bt-flickr:before{content:"\f16e"}
.bt-adn:before{content:"\f170"}
.bt-bitbucket:before{content:"\f171"}
.bt-bitbucket-square:before{content:"\f172"}
.bt-tumblr:before{content:"\f173"}
.bt-tumblr-square:before{content:"\f174"}
.bt-long-arrow-down:before{content:"\f175"}
.bt-long-arrow-up:before{content:"\f176"}
.bt-long-arrow-left:before{content:"\f177"}
.bt-long-arrow-right:before{content:"\f178"}
.bt-apple:before{content:"\f179"}
.bt-windows:before{content:"\f17a"}
.bt-android:before{content:"\f17b"}
.bt-linux:before{content:"\f17c"}
.bt-dribbble:before{content:"\f17d"}
.bt-skype:before{content:"\f17e"}
.bt-foursquare:before{content:"\f180"}
.bt-trello:before{content:"\f181"}
.bt-female:before{content:"\f182"}
.bt-male:before{content:"\f183"}
.bt-gittip:before{content:"\f184"}
.bt-sun-o:before{content:"\f185"}
.bt-moon-o:before{content:"\f186"}
.bt-archive:before{content:"\f187"}
.bt-bug:before{content:"\f188"}
.bt-vk:before{content:"\f189"}
.bt-weibo:before{content:"\f18a"}
.bt-renren:before{content:"\f18b"}
.bt-pagelines:before{content:"\f18c"}
.bt-stack-exchange:before{content:"\f18d"}
.bt-arrow-circle-o-right:before{content:"\f18e"}
.bt-arrow-circle-o-left:before{content:"\f190"}
.bt-toggle-left:before,.bt-caret-square-o-left:before{content:"\f191"}
.bt-dot-circle-o:before{content:"\f192"}
.bt-wheelchair:before{content:"\f193"}
.bt-vimeo-square:before{content:"\f194"}
.bt-turkish-lira:before,.bt-try:before{content:"\f195"}
.bt-plus-square-o:before{content:"\f196"}

@font-face{font-family:'Modernpics';src:url('http://hanhtrinhso.com/fonts/modernpics.otf') format('opentype');font-weight:normal;font-style:normal}
.ic{display:inline-block;font-family:Modernpics;font-style:normal;font-weight:normal; font-size:25px; line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a.ic-read,a.ic-like,a.ic-comment {color:#979797;}
a.ic-read:hover,a.ic-like:hover,a.ic-comment:hover {color: #0D95A7; text-decoration: none;}
small.a {margin-left: 4px;}


.text-muted {color:#979797;}
small{font-size:90%;}
.badge-white{background-color:transparent;border:1px solid rgba(255,255,255,0.35);padding:2px 6px;}
.badge-hollow{background-color:transparent;border:1px solid rgba(0,0,0,0.15);color:inherit;}
.caret-white{border-top-color:#fff;border-top-color:rgba(255,255,255,0.65);}
a:hover .caret-white{border-top-color:#fff;}
.tooltip-inner{background-color:rgba(0,0,0,0.9);background-color:#4c5566;}
.tooltip.top .tooltip-arrow{border-top-color:rgba(0,0,0,0.9);border-top-color:#4c5566;}
.tooltip.right .tooltip-arrow{border-right-color:rgba(0,0,0,0.9);border-right-color:#4c5566;}
.tooltip.bottom .tooltip-arrow{border-bottom-color:rgba(0,0,0,0.9);border-bottom-color:#4c5566;}
.tooltip.left .tooltip-arrow{border-left-color:rgba(0,0,0,0.9);border-left-color:#4c5566;}
.popover-content{font-size:12px;line-height:1.5;}
.progress-xs{height:6px;}
.progress-sm{height:10px;}
.progress-sm .progress-bar{font-size:10px;line-height:1em;}
.accordion-group,.accordion-inner{border-color:#ebeff6;border-radius:2px;}
.alert{font-size:85%;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2);}
.alert .close i{font-size:12px;font-weight:normal;display:block;}
.form-control{border-color:#d8dde5;}
.form-control,.form-control:focus{-webkit-box-shadow:none;box-shadow:none;}
.input-s-sm{width:120px;}
.input-s{width:200px;}
.input-s-lg{width:250px;}
.input-group-addon{border-color:#d8dde5;background-color:#f5f7fa;}
.list-group{border-radius:2px;}
.list-group.no-radius .list-group-item{border-radius:0 !important;}
.list-group.no-borders .list-group-item{border:none;}
.list-group.no-border .list-group-item{border-width:1px 0;}
.list-group.no-bg .list-group-item{background-color:transparent;}
.list-group-item{border-color:#ebeff6;padding-right:15px;}
.list-group-item.media{margin-top:0;}
.list-group-item.active{border-color:#5dcff3 !important;background-color:#5dcff3 !important;}
.list-group-item.active,.list-group-item.active .text-muted{color:#ebf9fe;}
.list-group-item.active a{color:#fff;}
.list-group-alt .list-group-item:nth-child(2n+2){background-color:rgba(0,0,0,0.02);}
.list-group-lg .list-group-item{padding-top:15px;padding-bottom:15px;}
.list-group-sp .list-group-item{margin-bottom:5px;border-radius:3px;}
.list-group-item>.badge{margin-right:0;}
.list-group-item>.bt-chevron-right{float:right;margin-top:4px;margin-right:-5px;}
.list-group-item>.bt-chevron-right+.badge{margin-right:5px;}
.nav-pills.no-radius>li>a{border-radius:0;}
.nav-pills>li.active>a{color:#fff !important;background-color:#5dcff3 !important;}
.nav.nav-sm>li>a{padding:6px 8px;}
.nav>li>a .avatar{width:30px;}
.panel{border-radius:2px;border-color:#ebeff6;}
.panel-node{border-radius:2px;border-color:#ebeff6;}
.panel-news{border-radius:2px;border-color:#ebeff6;}
.panel.no-borders{border-width:0;}
.panel.no-borders .panel-heading,.panel.no-borders .panel-footer{border-width:0;}


@media (min-width: 768px){
.hbox{display:table;table-layout:fixed;border-spacing:0;width:100%;}
.hbox>aside,.hbox>section{display:table-cell;vertical-align:top;height:100%;padding:0;float:none;}
.hbox>aside.show,.hbox>aside.hidden-sm,.hbox>section.show,.hbox>section.hidden-sm{display:table-cell !important;}
.hbox.stretch{height:100%;}
.vbox{display:table;border-spacing:0;position:relative;height:100%;width:100%;}
.vbox>section,.vbox>footer{position:absolute;top:0;bottom:0;width:100%;}
.vbox>header ~ section{top:50px;}
.vbox>section.w-f{bottom:50px;}
.vbox>footer{top:auto;z-index:1000;}
.vbox>footer ~ section{bottom:50px;}
.vbox.flex>header,.vbox.flex>section,.vbox.flex>footer{position:inherit;}
.vbox.flex>section{display:table-row;height:100%;}
.vbox.flex>section>section{position:relative;height:100%;overflow:auto;}
.ie .vbox.flex>section>section{display:table-cell;}
.vbox.flex>section>section>section{position:absolute;top:0;bottom:0;left:0;right:0;}
.aside-xs{width:48px;}
.aside{width:180px;}
.aside-sm{width:150px;}
.aside-md{width:200px;}
.aside-lg{width:250px;}
.aside-xl{width:300px;}
.scrollable{-webkit-overflow-scrolling:touch;}}
.hbox>aside,.hbox>section{padding:0 !important;}

@media print{.hbox{height:auto;}}

@media (max-width: 767px){}
.timeline{display:table;width:100%;border-spacing:0;table-layout:fixed;position:relative;border-collapse:collapse;}
.timeline:before{content:"";width:6px;margin-left:-4px;position:absolute;left:50%;top:0;bottom:30px;background-color:#ddd;z-index:0;}
.timeline .timeline-date{position:absolute;width:150px;left:-200px;top:50%;margin-top:-9px;text-align:right;}
.timeline .timeline-icon{position:absolute;left:-41px;top:-2px;top:50%;margin-top:-15px;}
.timeline .time-icon{width:30px;height:30px;display:inline-block !important;z-index:10;border:2px solid #fff;border-radius:20px;text-align:center;line-height:28px;}
.timeline .time-icon:before{font-size:16px;}
.timeline-item{display:table-row;}
.timeline-item:before,.timeline-item.alt:after{content:"";display:block;width:50%;}
.timeline-item.alt{text-align:right;}.timeline-item.alt:before{display:none;}
.timeline-item.alt .panel{margin-right:25px;margin-left:0;}
.timeline-item.alt .timeline-date{left:auto;right:-200px;text-align:left;}
.timeline-item.alt .timeline-icon{left:auto;right:-41px;}
.timeline-item.active{display:table-caption;text-align:center;}
.timeline-item.active:before{width:1%;}
.timeline-item.active .timeline-caption{display:inline-block;width:auto;}
.timeline-item.active .timeline-caption h5 span{color:#fff;}
.timeline-item.active .panel{margin-left:0;}
.timeline-item.active .timeline-date,.timeline-item.active .timeline-icon{position:static;margin-bottom:10px;display:inline-block;width:auto;}
.timeline-caption{display:table-cell;vertical-align:top;width:50%;}
.timeline-caption .panel{display:inline-block;position:relative;margin-left:25px;text-align:left;}
.timeline-caption h5{margin:0;}.timeline-caption h5 span{display:block;color:#999;margin-bottom:4px;font-size:12px;}
.timeline-caption p{font-size:12px;margin-bottom:0;margin-top:10px;}
.timeline-footer{display:table-row;}
.timeline-footer a{display:table-cell;text-align:right;}
.timeline-footer .time-icon{margin-right:-15px;z-index:5;}

.bg-primary{
opacity: .75;
-webkit-transition:all 0.4s ease 0s;
-moz-transition:all 0.4s ease 0s;
-o-transition:all 0.4s ease 0s;
transition:all 0.4s ease 0s;
-moz-box-shadow: inset 0 0 30px 0 rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 0 30px 0 rgba(0,0,0,0.5);
box-shadow: inset 0 0 30px 0 rgba(0,0,0,0.5);
content: "";
z-index: -1;
background-size: 100% 100%;
background-image: -webkit-gradient(linear,left top,right bottom,from(#002f4b),to(#e0be00));
background-image: -webkit-linear-gradient(left top,#002f4b,#e0be00);
background-image: -moz-linear-gradient(left top,#002f4b,#e0be00);
background-image: -ms-linear-gradient(left top,#002f4b,#e0be00);
background-image: -o-linear-gradient(left top,#002f4b,#e0be00);
background-image: linear-gradient(to bottom right,#002f4b,#e0be00);}
.bg-primary.lter,.bg-primary .lter{background-color:#695ea5;}
.bg-primary .text-muted{color:#ccc8e0;}
.bg-info{
opacity: .75;
-webkit-transition:all 0.4s ease 0s;
-moz-transition:all 0.4s ease 0s;
-o-transition:all 0.4s ease 0s;
transition:all 0.4s ease 0s;
-moz-box-shadow: inset 0 0 30px 0 rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 0 30px 0 rgba(0,0,0,0.5);
box-shadow: inset 0 0 30px 0 rgba(0,0,0,0.5);
content: "";
z-index: -1;
background-size: 100% 100%;
background-image: -webkit-gradient(linear,left top,right bottom,from(#d38312),to(#a83279));
background-image: -webkit-linear-gradient(left top,#d38312,#a83279);
background-image: -moz-linear-gradient(left top,#d38312,#a83279);
background-image: -ms-linear-gradient(left top,#d38312,#a83279);
background-image: -o-linear-gradient(left top,#d38312,#a83279);
background-image: linear-gradient(to bottom right,#d38312,#a83279);}
.bg-info.lter,.bg-info .lter{background-color:#81daf6;}
.bg-info .text-muted{color:#ffffff;}
.bg-info:hover,.bg-primary:hover,.bg-red.news:hover,.bg-blue.news:hover {
opacity: 0.9;
-webkit-transition:all 0.4s ease 0s;
-moz-transition:all 0.4s ease 0s;
-o-transition:all 0.4s ease 0s;
transition:all 0.4s ease 0s;
}
.bg{color:#fff;}
.bg a,.bg a:hover{color:#fff;}
.pos-rlt{position:relative;}
.pos-stc{position:static;}
.pos-abt{position:absolute;}

.block{display:block;}
.block.hide{display:none;}
.inline{display:inline-block;}
.pull-right-lg{float:right;}
.none{display:none;}
.pull-none{float:none;}

.v-middle{vertical-align:middle !important;}

.font-thin{font-weight:300;}
.font-normal{font-weight:normal;}
.font-semibold{font-weight:600;}
.font-bold{font-weight:700;}
.text-sm{font-size:12px;}
.text-xs{font-size:10px;}
.text-ellipsis{display:block;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis;}
.text-uc{text-transform:uppercase;}
.wrapper{padding:15px;}
.wrapper-lg{padding:30px;}
.wrapper-xl{padding:50px;}
.wrapper a,.wrapper-a a {
text-shadow: 0 0 0 transparent, 0px 1px 0px rgba(0, 0, 0, 0.37);
font-size: 23px;
line-height: 1.24;
color: #fff;
text-decoration: none;
}
.wrapper-node a {
text-shadow: 0 0 0 transparent, 0px 1px 0px rgba(0, 0, 0, 0.37);
font-size: 18px;
line-height: 1.17;
color: #fff;
text-decoration: none;
left: 10px;
bottom: 10px;
position: absolute;
}
.wrapper a:hover ,.wrapper-a a:hover{
text-decoration: none;}
.padder{padding-left:15px;padding-right:15px;}
.padder-v{padding-top:15px;padding-bottom:15px;}
.no-padder{padding:0 !important;}
.pull-in{margin-left:-15px;margin-right:-15px;}
.pull-out{margin:-10px -15px;}
.b-t{border-top:1px solid #e0e4e8;}
.b-r{border-right:1px solid #e0e4e8;}
.b-b{border-bottom:1px solid #e0e4e8;}
.b-l{border-left:1px solid #e0e4e8;}
.r{border-radius:2px 2px 2px 2px;}
.r-l{border-radius:2px 0 0 2px;}
.r-r{border-radius:0 2px 2px 0;}
.r-t{border-radius:2px 2px 0 0;}
.r-b{border-radius:0 0 2px 2px;}
.mnone{margin:15px;}.m-n{margin:0;}
.m-l{margin-left:15px;}
.m-l-none{margin-left:0;}
.m-l-xs{margin-left:5px;}
.m-l-sm{margin-left:10px;}
.m-l-lg{margin-left:20px;}
.m-l-n{margin-left:-15px;}
.m-l-n-xxs{margin-left:-1px;}
.m-l-n-xs{margin-left:-5px;}
.m-l-n-sm{margin-left:-10px;}
.m-l-n-lg{margin-left:-20px;}
.m-t{margin-top:15px;}
.m-t-none{margin-top:0;}
.m-t-xxs{margin-top:1px;}
.m-t-xs{margin-top:5px;}
.m-t-sm{margin-top:10px;}
.m-t-lg{margin-top:20px;}
.m-t-n{margin-top:-15px !important;}
.m-t-n-xxs{margin-top:-1px;}
.m-t-n-xs{margin-top:-5px;}
.m-t-n-sm{margin-top:-10px;}
.m-t-n-lg{margin-top:-20px;}
.m-r{margin-right:15px;}
.m-b{margin-bottom:30px;}

.thumb-sm{width:36px;display:inline-block;}
.thumb-sm img{height:auto;max-width:100%;vertical-align:middle;}
.img-full{max-width:100%;}
.img-full>img{max-width:100%;}
.avatar.border{border:3px solid #fff;border-color:rgba(255,255,255,0.5);}

.h{font-size:170px;font-weight:300;background-image:-webkit-linear-gradient(92deg,#fb83fa,#00aced);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.arrow{border-width:8px;z-index:10;}
.arrow,.arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid;}
.arrow:after{border-width:7px;content:"";}
.arrow.top{left:50%;margin-left:-8px;border-top-width:0;border-bottom-color:#eee;border-bottom-color:rgba(0,0,0,0.1);top:-8px;}
.arrow.top:after{content:" ";top:1px;margin-left:-7px;border-top-width:0;border-bottom-color:#fff;}
.arrow.right{top:50%;right:-8px;margin-top:-8px;border-right-width:0;border-left-color:#eee;border-left-color:rgba(0,0,0,0.1);}
.arrow.right:after{content:" ";right:1px;border-right-width:0;border-left-color:#fff;bottom:-7px;}
.arrow.bottom{left:50%;margin-left:-8px;border-bottom-width:0;border-top-color:#eee;border-top-color:rgba(0,0,0,0.1);bottom:-8px;}
.arrow.bottom:after{content:" ";bottom:1px;margin-left:-7px;border-bottom-width:0;border-top-color:#fff;}
.arrow.left{top:50%;left:-8px;margin-top:-8px;border-left-width:0;border-right-color:#eee;border-right-color:rgba(0,0,0,0.1);}
.arrow.left:after{content:" ";left:1px;border-left-width:0;border-right-color:#fff;bottom:-7px;}
@media (max-width: 780px) {
#globalSearch{
display: none;
}}
@media (min-width: 780px) {
#ads-mobile{
display: none;
}}
@media (max-width: 879px){
#setting ,#globalMenu { display: none; }
.menu-btn {
float: left;
background-image: url(/styles/hts/nav.png);
background-repeat: no-repeat;
background-size: auto;
background-position: -200px -86px;
display: block;
width: 30px;
height: 26px;
cursor: pointer;
}
#menu-nav {
float: left;
background-image: url(/styles/hts/nav.png);
background-repeat: no-repeat;
background-size: auto;
background-position: -200px -86px;
display: block;
width: 30px;
height: 26px;
}
.avatar img, .avatar .img {
border: none;
}
}
@media (min-width: 880px){}
#logo img {
vertical-align: middle;
max-width: 75%;
margin-left: 10px;
margin-top: -5px;
}

.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12{position:relative;min-height:1px;_padding-right:15px;_padding-left:15px;}
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12{float:left;}
.col-xs-12{width:100%;}
.col-xs-11{width:91.66666667%;}
.col-xs-10{width:83.33333333%;}
.col-xs-9{width:75%;}
.col-xs-8{width:66.66666667%;}
.col-xs-7{width:58.33333333%;}
.col-xs-6{width:50%;}
.col-xs-5{width:41.66666667%;}
.col-xs-4{width:33.33333333%;}
.col-xs-3{width:25%;}
.col-xs-2{width:16.66666667%;}
.col-xs-1{width:8.33333333%;}
.col-xs-pull-12{right:100%;}
.col-xs-pull-11{right:91.66666667%;}
.col-xs-pull-10{right:83.33333333%;}
.col-xs-pull-9{right:75%;}
.col-xs-pull-8{right:66.66666667%;}
.col-xs-pull-7{right:58.33333333%;}
.col-xs-pull-6{right:50%;}
.col-xs-pull-5{right:41.66666667%;}
.col-xs-pull-4{right:33.33333333%;}
.col-xs-pull-3{right:25%;}
.col-xs-pull-2{right:16.66666667%;}
.col-xs-pull-1{right:8.33333333%;}
.col-xs-pull-0{right:0;}
.col-xs-push-12{left:100%;}
.col-xs-push-11{left:91.66666667%;}
.col-xs-push-10{left:83.33333333%;}
.col-xs-push-9{left:75%;}
.col-xs-push-8{left:66.66666667%;}
.col-xs-push-7{left:58.33333333%;}
.col-xs-push-6{left:50%;}
.col-xs-push-5{left:41.66666667%;}
.col-xs-push-4{left:33.33333333%;}
.col-xs-push-3{left:25%;}
.col-xs-push-2{left:16.66666667%;}
.col-xs-push-1{left:8.33333333%;}
.col-xs-push-0{left:0;}
.col-xs-offset-12{margin-left:100%;}
.col-xs-offset-11{margin-left:91.66666667%;}
.col-xs-offset-10{margin-left:83.33333333%;}
.col-xs-offset-9{margin-left:75%;}
.col-xs-offset-8{margin-left:66.66666667%;}
.col-xs-offset-7{margin-left:58.33333333%;}
.col-xs-offset-6{margin-left:50%;}
.col-xs-offset-5{margin-left:41.66666667%;}
.col-xs-offset-4{margin-left:33.33333333%;}
.col-xs-offset-3{margin-left:25%;}
.col-xs-offset-2{margin-left:16.66666667%;}
.col-xs-offset-1{margin-left:8.33333333%;}
.col-xs-offset-0{margin-left:0;}
@media (min-width: 768px){
#logo img {
vertical-align: middle;
max-width: 72%;
margin-left: 10px;
margin-top: -5px;
}

div.bg-red.news {
height: 300px;
}

.bg-primary.lter,.bg-primary .lter{width:40%;}
.bg-info.lter,.bg-info .lter{width: 40%;}
.bg-node.node.category_forum.level_2.node_57,.bg-node.node.forum.level_2.node_39,.bg-node.node.forum.level_2.node_59,.bg-node.node.forum.level_2.node_115{height: 252px;}
.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{float:left;}
.col-sm-4.n_9,.col-sm-4.n_14,.col-sm-4.n_40,.col-sm-4.n_58,.col-sm-4.n_65,.col-sm-4.n_86,.col-sm-4.n_104,.col-sm-4.n_118,.col-sm-4.n_145,.col-sm-4.n_157,.col-sm-4.n_158,.col-sm-4.n_151,.col-sm-4.n_161{width: 66.66666667%;}
.col-sm-12{width:100%;}
.col-sm-11{width:91.66666667%;}
.col-sm-10{width:83.33333333%;}
.col-sm-9{width:75%;}
.col-sm-8{width:66.66666667%;}
.col-sm-7{width:58.33333333%;}
.col-sm-6{width:50%;}
.col-sm-5{width:41.66666667%;}
.col-sm-4{width:33.33333333%;}
.col-sm-3{width:25%;}
.col-sm-2{width:16.66666667%;}
.col-sm-1{width:8.33333333%;}
.col-sm-pull-12{right:100%;}
.col-sm-pull-11{right:91.66666667%;}
.col-sm-pull-10{right:83.33333333%;}
.col-sm-pull-9{right:75%;}
.col-sm-pull-8{right:66.66666667%;}
.col-sm-pull-7{right:58.33333333%;}
.col-sm-pull-6{right:50%;}
.col-sm-pull-5{right:41.66666667%;}
.col-sm-pull-4{right:33.33333333%;}
.col-sm-pull-3{right:25%;}
.col-sm-pull-2{right:16.66666667%;}
.col-sm-pull-1{right:8.33333333%;}
.col-sm-pull-0{right:0;}
.col-sm-push-12{left:100%;}
.col-sm-push-11{left:91.66666667%;}
.col-sm-push-10{left:83.33333333%;}
.col-sm-push-9{left:75%;}
.col-sm-push-8{left:66.66666667%;}
.col-sm-push-7{left:58.33333333%;}
.col-sm-push-6{left:50%;}
.col-sm-push-5{left:41.66666667%;}
.col-sm-push-4{left:33.33333333%;}
.col-sm-push-3{left:25%;}
.col-sm-push-2{left:16.66666667%;}
.col-sm-push-1{left:8.33333333%;}
.col-sm-push-0{left:0;}
.col-sm-offset-12{margin-left:100%;}
.col-sm-offset-11{margin-left:91.66666667%;}
.col-sm-offset-10{margin-left:83.33333333%;}
.col-sm-offset-9{margin-left:75%;}
.col-sm-offset-8{margin-left:66.66666667%;}
.col-sm-offset-7{margin-left:58.33333333%;}
.col-sm-offset-6{margin-left:50%;}
.col-sm-offset-5{margin-left:41.66666667%;}
.col-sm-offset-4{margin-left:33.33333333%;}
.col-sm-offset-3{margin-left:25%;}
.col-sm-offset-2{margin-left:16.66666667%;}
.col-sm-offset-1{margin-left:8.33333333%;}
.col-sm-offset-0{margin-left:0;}}

.bg-red.news {
opacity: .75;
-webkit-transition:all 0.4s ease 0s;
-moz-transition:all 0.4s ease 0s;
-o-transition:all 0.4s ease 0s;
transition:all 0.4s ease 0s;
-moz-box-shadow: inset 0 0 30px 0 rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 0 30px 0 rgba(0,0,0,0.5);
box-shadow: inset 0 0 30px 0 rgba(0,0,0,0.5);
content: "";
z-index: -1;
background-size: 100% 100%;
background-image: -webkit-gradient(linear,left top,right bottom,from(#dc4225),to(#002f4b));
background-image: -webkit-linear-gradient(left top,#dc4225,#002f4b);
background-image: -moz-linear-gradient(left top,#dc4225,#002f4b);
background-image: -ms-linear-gradient(left top,#dc4225,#002f4b);
background-image: -o-linear-gradient(left top,#dc4225,#002f4b);
background-image: linear-gradient(to bottom right,#dc4225,#002f4b);}
.bg-blue.news {
opacity: .75;
-webkit-transition:all 0.4s ease 0s;
-moz-transition:all 0.4s ease 0s;
-o-transition:all 0.4s ease 0s;
transition:all 0.4s ease 0s;
-moz-box-shadow: inset 0 0 30px 0 rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 0 30px 0 rgba(0,0,0,0.5);
box-shadow: inset 0 0 30px 0 rgba(0,0,0,0.5);
content: "";
z-index: -1;
background-size: 100% 100%;
background-image: -webkit-gradient(linear,left top,right bottom,from(#002f4b),to(#e0be00));
background-image: -webkit-linear-gradient(left top,#002f4b,#e0be00);
background-image: -moz-linear-gradient(left top,#002f4b,#e0be00);
background-image: -ms-linear-gradient(left top,#002f4b,#e0be00);
background-image: -o-linear-gradient(left top,#002f4b,#e0be00);
background-image: linear-gradient(to bottom right,#0A0A0A,#42CEE9);}


.bg-info.news,.bg-primary.news, .bg-blue.news, .bg-red.news {
height: 140px;
padding: 10px;
overflow : hidden;
}

.bg-node.node {
height : 115px;
padding: 10px;
overflow : hidden;
}

.bg-node.node_6,.bg-node.node_40,.bg-node.node_66,.bg-node.node_118,.bg-node.node_120,.bg-node.node_154 {
box-shadow: inset 0 0 30px 0 rgba(0,0,0,0.5);
background-image: -webkit-gradient(linear,left top,right bottom,from(#555555),to(#815C77));
background-image: -webkit-linear-gradient(left top,#555555,#815C77);
background-image: -moz-linear-gradient(left top,#555555,#815C77);
background-image: -ms-linear-gradient(left top,#555555,#815C77);
background-image: -o-linear-gradient(left top,#555555,#815C77);
background-image: linear-gradient(to bottom right,#555555,#815C77);
background-color: #815C77;
background-image: url(/styles/hts/bg-div.png);}
.bg-node.node_9,.bg-node.node_50,.bg-node.node_57,.bg-node.node_61,.bg-node.node_65,.bg-node.node_116,.bg-node.node_150,.bg-node.node_151,.bg-node.node_158 {
box-shadow: inset 0 0 30px 0 rgba(0,0,0,0.5);
background-image: -webkit-gradient(linear,left top,right bottom,from(#555555),to(#008287));
background-image: -webkit-linear-gradient(left top,#555555,#008287);
background-image: -moz-linear-gradient(left top,#555555,#008287);
background-image: -ms-linear-gradient(left top,#555555,#008287);
background-image: -o-linear-gradient(left top,#555555,#008287);
background-image: linear-gradient(to bottom right,#555555,#008287);
background-color: #008287;
background-image: url(/styles/hts/bg-div.png);}
.bg-node.node_24,.bg-node.node_58,.bg-node.node_59,.bg-node.node_100,.bg-node.node_104,.bg-node.node_115,.bg-node.node_155,.bg-node.node_160{
box-shadow: inset 0 0 30px 0 rgba(0,0,0,0.5);
background-image: -webkit-gradient(linear,left top,right bottom,from(#555555),to(#489E60));
background-image: -webkit-linear-gradient(left top,#555555,#489E60);
background-image: -moz-linear-gradient(left top,#555555,#489E60);
background-image: -ms-linear-gradient(left top,#555555,#489E60);
background-image: -o-linear-gradient(left top,#555555,#489E60);
background-image: linear-gradient(to bottom right,#555555,#489E60);
background-color: #489E60;
background-image: url(/styles/hts/bg-div.png);}
.bg-node.node_10,.bg-node.node_11,.bg-node.node_63,.bg-node.node_86,.bg-node.node_102,.bg-node.node_117 {
box-shadow: inset 0 0 30px 0 rgba(0,0,0,0.5);
background-image: -webkit-gradient(linear,left top,right bottom,from(#555555),to(#C95D3A));
background-image: -webkit-linear-gradient(left top,#555555,#C95D3A);
background-image: -moz-linear-gradient(left top,#555555,#C95D3A);
background-image: -ms-linear-gradient(left top,#555555,#C95D3A);
background-image: -o-linear-gradient(left top,#555555,#C95D3A);
background-image: linear-gradient(to bottom right,#555555,#C95D3A);
background-color: #C95D3A;
background-image: url(/styles/hts/bg-div.png);}
.bg-node.node_14 ,.bg-node.node_39,.bg-node.node_51,.bg-node.node_62,.bg-node.node_67,.bg-node.node_110,.bg-node.node_133{
box-shadow: inset 0 0 30px 0 rgba(0,0,0,0.5);
background-image: -webkit-gradient(linear,left top,right bottom,from(#555555),to(#DD7908));
background-image: -webkit-linear-gradient(left top,#555555,#DD7908);
background-image: -moz-linear-gradient(left top,#555555,#DD7908);
background-image: -ms-linear-gradient(left top,#555555,#DD7908);
background-image: -o-linear-gradient(left top,#555555,#DD7908);
background-image: linear-gradient(to bottom right,#555555,#DD7908);
background-color: #DD7908;
background-image: url(/styles/hts/bg-div.png);}
.bg-node.node_15,.bg-node.node_48,.bg-node.node_49,.bg-node.node_64,.bg-node.node_109 {
box-shadow: inset 0 0 30px 0 rgba(0,0,0,0.5);
background-image: -webkit-gradient(linear,left top,right bottom,from(#555555),to(#6B6DA8));
background-image: -webkit-linear-gradient(left top,#555555,#6B6DA8);
background-image: -moz-linear-gradient(left top,#555555,#6B6DA8);
background-image: -ms-linear-gradient(left top,#555555,#6B6DA8);
background-image: -o-linear-gradient(left top,#555555,#6B6DA8);
background-image: linear-gradient(to bottom right,#555555,#6B6DA8);
background-color: #6B6DA8;
background-image: url(/styles/hts/bg-div.png);}
.bg-node.node_28,.bg-node.node_60,.bg-node.node_107,.bg-node.node_121,.bg-node.node_142,.bg-node.node_144,.bg-node.node_153,.bg-node.node_159 {
box-shadow: inset 0 0 30px 0 rgba(0,0,0,0.5);
background-image: -webkit-gradient(linear,left top,right bottom,from(#555555),to(#747474));
background-image: -webkit-linear-gradient(left top,#555555,#747474);
background-image: -moz-linear-gradient(left top,#555555,#747474);
background-image: -ms-linear-gradient(left top,#555555,#747474);
background-image: -o-linear-gradient(left top,#555555,#747474);
background-image: linear-gradient(to bottom right,#555555,#747474);
background-color: #747474;
background-image: url(/styles/hts/bg-div.png);}
.bg-node.node_52,.bg-node.node_108,.bg-node.node_122,.bg-node.node_145,.bg-node.node_157, .bg-node.node_161 {
box-shadow: inset 0 0 30px 0 rgba(0,0,0,0.5);
background-image: -webkit-gradient(linear,left top,right bottom,from(#555555),to(#5e8300));
background-image: -webkit-linear-gradient(left top,#555555,#5e8300);
background-image: -moz-linear-gradient(left top,#555555,#5e8300);
background-image: -ms-linear-gradient(left top,#555555,#5e8300);
background-image: -o-linear-gradient(left top,#555555,#5e8300);
background-image: linear-gradient(to bottom right,#555555,#5e8300);
background-color: #5e8300;
background-image: url(/styles/hts/bg-div.png);}
.ic-bt {
display: inline-block;
font-family: Modernpics;
font-style: normal;
font-weight: normal;
font-size: 75px;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff;
}
.footnews { padding-bottom: 15px;
padding-top: 15px;
display: block;}
.act {background: url(http://hanhtrinhso.com/styles/hts/active.png) no-repeat;
width: 35px;
height: 20px;
display: block;
padding-left: 21px;
float: left;}
.ive-love {background-position: -3px -1px;}
.ive-love:hover {background-position: -3px -21px}
.ive-read {background-position: -3px -41px;}
.ive-read:hover {background-position: -3px -61px;}
.ive-comment {background-position: -3px -81px;}
.ive-comment:hover {background-position: -3px -101px;}

Cuối cùng, các bạn download file ảnh news.jpg dưới file đính kèm và up vào folder images (chưa có thì tạo) trên host nhé, còn nếu up chỗ khác thì thay đổi đường dẫn images/news.jpg thành đường dẫn đến ảnh đó.


Chúc các bạn thành công.

Nguồn: mamcongnghe.com​