[Share] Style tin nhắn riêng đẹp cho wapego

.me{float:right}.not-me{float:left}
.me .by-me{border:8px solid transparent;border-left-color:#000;width:0;height:0;margin-top:15px}
.me .nbm,.not-me .bm{display:none}
.not-me .not-by-me{border:8px solid transparent;border-right-color:#000;width:0;height:0;margin-top:15px}
.pm_message{border-left:1px solid #000;border-right:1px solid #000;padding:4px}
.ttop0,.tbottom0{display:block}.ttop0{margin-top:5px}
.ttop0 b,.tbottom0 b{display: block;height: 1px;border-left:1px solid #000;border-right:1px solid #000}
.ttop0 b{background:#eee},.tbottom0{background:#fff}
b.t1 {margin-left:5px;margin-right:5px;background:#000}
b.t2 {margin-left: 3px;margin-right: 3px;border-width:2px}
b.t3 {margin-left:2px;margin-right:2px;}
b.t4 {margin-left:1px;margin-right:1px;height: 2px}
.cl{clear:both}

<table class="{%if nick_uid!=api.user_id%}not-{%endif%}me" width="80%" border="0" cellpadding="0" cellspacing="0">
 <tr valign="top">
   <td width="16px" algin="left" class="nbm"><div class="not-by-me"></div></td>
   <td algin="left">
     <b class="ttop0"><b class="t1"></b><b class="t2"></b><b class="t3"></b><b class="t4"></b></b>
     <div class="pm_message">
     <div style="background:#eee;margin:-4px;padding:0 5px;border-bottom:1px solid #0c0;{%if nick_uid==api.user_id%}text-align:right{%endif%}"><b><a href="{{profile_url}}">{{nick}}</a></b></div>
     <div class="cl"></div>
     {% if unreaded %}<b>{% endif %}
     {{message}}
     {% if unreaded %}</b>{% endif %}<br/><br/><small><i>({{message_date}})</i></small>
     </div>
     <b class="tbottom0"><b class="t4"></b><b class="t3"></b><b class="t2"></b><b class="t1"></b></b>
    </td>
    <td width="16px" align="right" class="bm"><div class="by-me"></div></td>
   </tr>
  </table>
  <br class="cl" style="width:10px"/>