/*
Theme Name: Web Đỏ
Theme URI: https://do.com.vn
Author: TRUONG LAM 
Author URI: https://do.com.vn
Version: 1.0
Description: Website duoc thiet ke & phat trien boi Truong Lam - Do.com.vn
*/

/*====================================
[  Table of contents  ]
======================================
    1. General
    2. Buttons
        2.1. Light Button
    3. Breadcrumb
    4. Share Social
    5. Thumbnail Hover Effect
    6. Page navi
    7. Text Input
    8. Table
   
======================================
[ End table content ]
======================================*/

/*---------------------------------------------------------------------
1. General
-----------------------------------------------------------------------*/
*{margin:0;padding:0;}
ul{list-style:outside none none;margin:0;padding:0}
a,i{-webkit-transition:all 0.5s ease-in-out 0s;-moz-transition:all 0.5s ease-in-out 0s;-ms-transition:all 0.5s ease-in-out 0s;-o-transition:all 0.5s ease-in-out 0s;transition:all 0.5s ease-in-out 0s;}
a,a:hover,a:focus{text-decoration:none;color:#E50914;}

/*---------------------------------------------------------------------
2.1. Light Button
-----------------------------------------------------------------------*/
.button{display:inline-flex;height:40px;width:150px;border:1px solid #e50914;color:#e50914;text-transform:uppercase;text-decoration:none;font-size:.8em;letter-spacing:1.5px;align-items:center;justify-content:center;overflow:hidden;}
.button a{color:#051441;text-decoration:none;letter-spacing:1px; font-weight: 600}
#button-6{position:relative;overflow:hidden;cursor:pointer;}
#button-6 a{position:relative;transition:all .45s ease-Out;}
#spin{width:0;height:0;opacity:0;left:70px;top:20px;transform:rotate(0deg);background:none;position:absolute;transition:all .5s ease-Out;}
#button-6:hover #spin{width:200%;height:500%;opacity:1;left:-70px;top:-70px;background:#E50914;transform:rotate(80deg);}
#button-6:hover a{color:#ffffff;}

/*---------------------------------------------------------------------
3. Breadcrumb
-----------------------------------------------------------------------*/
.breadcrumb{background:transparent;}
.breadcrumb-item a{color:#fff;}
.breadcrumb-item a:hover{text-decoration:none;color:#ccc;font-weight:bold;}
.breadcrumb-item.active{color:#ccc;font-weight:bold;}
.breadcrumb li span{color:#fff;}
.breadcrumb .breadcrumb_last{color:#fff;font-weight:bold;}
ol.breadcrumb{display:block;padding:0; margin-bottom: 0}

/*---------------------------------------------------------------------
4. Share Social
-----------------------------------------------------------------------*/
.share-buttons a{border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;height:40px;width:40px;font-size:20px;display:inline-block;text-align:center;line-height:2;}
.share-buttons .facebook{color:#fff;background-color:#305891;border-color:#305891;}
.share-buttons .twitter{color:#fff;background-color:#2ca8d2;border-color:#2ca8d2;}
.share-buttons .googleplus{color:#fff;background-color:#ce4d39;border-color:#ce4d39;}
.share-buttons .pinterest{color:#fff;background-color:#c82828;border-color:#c82828;}
.share-buttons .email{color:#fff;background-color:#E98118;border-color:#E98118;}
.share-buttons .linkedin{color:#fff;background-color:#0077B5;border-color:#0077B5;}

/*---------------------------------------------------------------------
5. Thumbnail Hover Effect
-----------------------------------------------------------------------*/
figure{position:relative;margin:0;padding:0;background:#fff;overflow:hidden;}
.service-post__img figure::before,article figure::before{position:absolute;top:0;left:-75%;z-index:2;display:block;content:'';width:50%;height:100%;background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);-webkit-transform:skewX(-25deg);transform:skewX(-25deg);}
.service-post__img figure:hover::before,article figure:hover::before{-webkit-animation:shine .75s;animation:shine .75s;}
@-webkit-keyframes shine{
    100%{left:125%;}
}
@keyframes shine{
    100%{left:125%;}
}

/*---------------------------------------------------------------------
6. Page navi
-----------------------------------------------------------------------*/
.pagenavi span{background-color:#C0392B;color:white;margin:0 5px;padding:5px 10px;font-weight:bold;}
.pagenavi a{color:#2F4858;margin:0 5px;text-decoration:none;padding:5px 10px;}
.pagenavi a:hover{background-color:#ccc;color:#2F4858;padding:5px 10px;}

/*---------------------------------------------------------------------
7. Text Input
-----------------------------------------------------------------------*/
.post-comment input[type="text"],.post-comment textarea{border:1px solid #2F4858;}

/*---------------------------------------------------------------------
8. Table
-----------------------------------------------------------------------*/
.table thead{font-weight:bold;color:#f1c40f;background-color:#1f2537;}

/*---------------------------------------------------------------------
9. Fancybox
-----------------------------------------------------------------------*/
.gallery{width:507px;position:relative;}
.pics{width:542px;background:transparent;border-radius:2px;}
.thumbs{float:left;width:122px;padding-right:10px;}
.preview{width:112px;height:112px;overflow:hidden;margin-bottom:10px;}
.preview:last-child{margin-bottom:0;}
.full{width:400px;font-size:12px;float:left;}
.full,.full img{height:600px;}
.previews a:hover,.previews a.selected{}
.full img {object-fit: cover; width: 100%;}
.full img:hover{cursor:pointer;}
.clearfix:after{content:".";visibility:hidden;display:block;height:0;clear:both;}

/*---------------------------------------------------------------------
10. Return to top
-----------------------------------------------------------------------*/
#return-to-top{position:fixed;bottom:20px;right:20px;    background: #cb2d3e;
   width:50px;height:50px;display:block;text-decoration:none;-webkit-border-radius:35px;-moz-border-radius:35px;border-radius:5px;display:none;-webkit-transition:all 0.3s linear;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;}
#return-to-top i{color:#fff;margin:0;position:relative;left:16px;top:13px;font-size:19px;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;}
#return-to-top:hover{background:rgba(44,62,80,1);}
#return-to-top:hover i{color:#fff;top:5px;}

/*---------------------------------------------------------------------
10. Contact Page
-----------------------------------------------------------------------*/
.call-btn{position:relative;display:inline-block;}
.call-btn-pos{position:fixed;left:50px;bottom:50px;width:auto!important;z-index:99;}
.call-btn-inner{font-size:30px;background:#2575fc;color:#fff;line-height:50px;width:70px;height:70px;border:10px solid rgba(0,0,0,0.1);-webkit-border-radius:100%;border-radius:100%;text-align:center;cursor:pointer;z-index:9;position:relative;display:inline-block;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out;-webkit-transition-property:color,background,border-color;transition-property:color,background,border-color;}
.call-btn .spinner-eff{left:-93%;top:-93%;}