﻿.serviceDetail-page{clear:both; padding-top:0px; }

/* Search */
.searchInfo{width:500px; margin-left:-250px; float:left; position:absolute; left:50%; bottom:-5px; z-index:5; background:#fff; padding:5px; border-radius:12px 12px 0 0;  }
.searchInfo:before{position: absolute;  content: ""; bottom:5px ; left: -20px; background: 0 0; width: 20px; height: 20px; border-bottom-right-radius: 15px; box-shadow: .313rem .313rem 0 .313rem #fff; transform: rotate(0deg);}
.searchInfo:after{position: absolute;  content: ""; bottom:5px ; right: -20px; background: 0 0; width: 20px; height: 20px; border-bottom-right-radius: 15px; box-shadow: .313rem .313rem 0 .313rem #fff; transform: rotate(90deg)}
.searchInfo label{display:none;}
.searchInfo .wrap-search{float:right; position:relative; width:100%; z-index:2;}
.searchInfo .wrap-search input[type="text"]{width:100%; border:none; height:46px; border-radius:7px; padding: 0 60px 0 20px; outline:none; background:var(--colorBg); font-size:16px; }
.searchInfo .wrap-search .navSearch{font-weight: 400;width:50px; line-height:46px; font-size:16px; color:var(--color1); opacity:.75; text-align:center; position:absolute; right:0; top:0;}
@media (max-width:767px){
    .searchInfo{width:calc(100% - 30px); left:0; margin-left:15px;}
}
.colLeft-page{width:calc(100% - 400px); float:left; position:relative; padding: 50px 40px 0 0px; z-index:5;}
.colLeft-page .main-info{width:100%; float:left; position:relative}
.colLeft-page .main-info .main-head{width:100%; float:left; position:relative; margin-bottom:20px; border-bottom:1px solid var(--color-border); padding-bottom:25px;}
.colLeft-page .main-info .main-head h3{margin:0 0 3px 0; padding:0; font-weight:500; font-size:35px; color:#000; width:100%; float:left; font-family: "Signika", sans-serif;}
.colLeft-page .main-info .main-head .wrap-attr{width:100%; float:left; position:relative; margin: 10px 0 0px 0; top:0; left:0; color:#000}
.colLeft-page .main-info .main-head .wrap-attr .ele{display:block; float:left; position:relative; margin-right:30px; font-size:13px;}
.colLeft-page .main-info .main-head .wrap-attr .ele b{padding: 0 3px; font-size:14px;}
.colLeft-page .main-info .main-head .wrap-attr .ele span{opacity:.75}
.colLeft-page .main-info .main-head .wrap-attr .ele:after{content:''; width:5px; height:5px; border-radius:50%; background:var(--color1); position:absolute; right:-18px; top:8px;}
.colLeft-page .main-info .main-head .wrap-attr .ele:last-of-type{margin-right:0;}
.colLeft-page .main-info .main-head .wrap-attr .ele:last-of-type:after{display:none;}
.colLeft-page .main-info .main-head .utiliLg{height:40px; margin-bottom:15px;}
.colLeft-page .main-info .main-head .utiliLg .link-main{height:40px;}
.colLeft-page .main-info .main-head .utiliLg .link-main i,
.colLeft-page .main-info .main-head .utiliLg .link-main span{line-height:40px;}
.colLeft-page .main-info .main-body{width:100%; float:left; position:relative;}
.colLeft-page .main-info .main-body .col-left{width:70px; float:left; position:relative; display:none;}
.colLeft-page .main-info .main-body .col-right{width:calc(100% - 0px); float:left; position:relative;  overflow:hidden; line-height:26px; font-size:15px}
.colLeft-page .main-info .main-body .col-right img{ max-width:100%; width:initial!important; height:initial!important; display:block; margin: 20px auto; border-radius:7px 7px 0 0;}
.colLeft-page .main-info .main-body .col-right .detail-info{width:100%; float:left; position:relative; font-size:16px; line-height:30px;}
.colLeft-page .main-info .main-body .col-right .detail-info h4{font-size:18px; line-height:30px}
.colLeft-page .main-info .main-body .col-right .detail-info h3{font-size:20px; line-height:30px}
.colLeft-page .main-info .main-body .col-right .detail-info h2{font-size:22px; line-height:30px}
.colLeft-page .main-info .main-body .col-right .detail-info h1{font-size:25px; line-height:30px}

@media (max-width:767px){
    .serviceDetail-page{padding-top:30px; padding-bottom:0;}
    .colLeft-page .main-info .main-head h3{font-size:30px;}
}

.socialBottom{width:100%; float:left; position:relative;}
.socialBottom .socialShare{display:block; font-size:17px; font-weight:500; color:#000; padding-bottom:15px;}
.socialBottom ul{margin: 0 -5px; padding:0; list-style:none; clear:both;}
.socialBottom ul li{padding:0 5px; display:block; float:left; position:relative; width:20%; }
.socialBottom ul li a{display:flex; align-items:center; justify-content:center; border-radius:5px; height:40px; padding: 0 10px; text-decoration:none; color:#fff; text-align:center; font-size:16px; transition:.3s; box-shadow: inset 0 0 rgba(0,0,0,0)}
.socialBottom ul li a:hover{box-shadow:inset 0 40px rgba(0,0,0,.15)}
.socialBottom ul li a i{font-size:20px;}
.socialBottom ul li a span{padding-left:8px; font-size:14px; font-weight:500; display:inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.socialBottom ul li a.navFacebook{background:#1873eb}
.socialBottom ul li a.navTwitter{background:#1c9cea}
.socialBottom ul li a.navTelegram{background:#32afed}
.socialBottom ul li a.navWhatsapp{background:#00ba3a}
.socialBottom ul li a.navPinterest{background:#e60023}

.wrap-tags{width:100%; float:left; position:relative; margin-top:40px; padding:15px; margin-bottom:20px;}
.wrap-tags .title-tags{display:block; font-size:18px; font-weight:900; color:#000; margin-bottom:5px; font-family: "Signika", sans-serif; margin-left:5px; }
.wrap-tags .title-tags:before{font-family: "Font Awesome 5"; font-weight: 900; font-size:16px; margin-right:10px; content: "\f02c";}
.wrap-tags a{line-height:32px; height:32px; color:#000; padding: 0 10px; display:inline-block; margin: 5px 5px 0 0; border-radius:5px; transition:.3s;}
.wrap-tags a:hover{color:var(--color1)}

@media (max-width:767px){
    .wrap-tags{margin-bottom:0;}
}


.colRight-page{width:400px; padding:0px 0px 0px 0px; position:relative; float:right; z-index:5;}
.colRight-page .row-group{width:100%; float:left; position:relative; margin-top:60px;}
.colRight-page .row-group .pxl-divider-separator{width:100%; float:left; height:1px; --clr-border: #0D401C26; background-image: repeating-linear-gradient(90deg, var(--clr-border), var(--clr-border) 7px, transparent 7px, transparent 11px); background-repeat: no-repeat;}
.colRight-page .row-group .title-group{width:100%; float:left; position:relative; padding-left:65px; }
.colRight-page .row-group .title-group h4{display:block; font-weight:600; margin:0; color:#000; font-size:25px; font-family: "Signika", sans-serif; float:left; padding-top:45px; margin-bottom:20px; }
.colRight-page .row-group .title-group h4:before{content:'01'; position:absolute; top:-1px; left:0; font-weight:900; font-family:Roboto; font-size:18px; height:85px; padding-top:50px; color:#fff; background:var(--color1); width:46px; text-align:center; border-radius: 0 0 25px 25px; display:block;}
.colRight-page .row-group:first-of-type{margin-top:0;}
.colRight-page .row-group:first-of-type .pxl-divider-separator{display:none;}

ul.list-hotNews{margin:0px 0 0 -15px; padding:0; width:calc(100% + 30px); float:left; list-style:none; }
ul.list-hotNews li{width:100%; float:left; padding: 0 15px; margin-top:20px;}
ul.list-hotNews li .wrap-img{display:block; float:left; position:relative; width:150px; border-radius:7px; overflow:hidden;}
ul.list-hotNews li .wrap-img:before{display:block; content:''; padding-bottom:70%}
ul.list-hotNews li .wrap-img a{position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; text-align:center; }
ul.list-hotNews li .wrap-img a img{width:100%; height:100%; object-fit:cover; transition:.3s;}
ul.list-hotNews li .info{ width:calc(100% - 150px); float:right; padding-left:20px;}
ul.list-hotNews .name{display:block; color:#000; text-decoration:none; transition:.3s; }
ul.list-hotNews .name:hover{color:var(--color1)}
ul.list-hotNews .name h4{font-size: 15px;  font-family: "Signika", sans-serif; font-size:18px; margin-top:-5px; padding-top:0px; line-height:24px; font-weight:500; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; text-overflow: ellipsis;display: -webkit-box;}
ul.list-hotNews .detail{font-size:15px; line-height:22px; padding-top:0px; display:none;}
ul.list-hotNews .wrap-attr{width:100%; float:left; position:relative; margin: 5px 0 0 0; display:flex;}
ul.list-hotNews .wrap-attr .ele{display:block; float:left; position:relative; margin-right:15px; font-size:14px; padding-left:18px;}
ul.list-hotNews .wrap-attr .ele:before{font-family: "Font Awesome 5"; font-weight: 300; content: "\f073"; font-size: 16px; position: absolute; left: 0; top: -3px;color: var(--color1);}
ul.list-hotNews .wrap-attr .ele:last-of-type{padding-left: 20px; margin-right:0;}
ul.list-hotNews .wrap-attr .ele:last-of-type:before{content:"\f06e"; top:-1px;}
ul.list-hotNews .wrap-attr .ele b{padding: 0 3px; font-weight:normal}
ul.list-hotNews .wrap-attr .ele span{}
ul.list-hotNews .wrap-attr .ele-date span{display:none;}
ul.list-hotNews li:first-child .wrap-attr{position:absolute; bottom:100%; left:0; background:#fff; padding-top:13px; float:left; width:auto; padding-right:20px; border-radius:0 10px 0 0}
ul.list-hotNews li:first-child .wrap-attr:before{position: absolute;content: ""; top: -20px; left: 0; background: 0 0;width: 20px; height: 20px; border-bottom-right-radius: 15px;box-shadow: .313rem .313rem 0 .313rem #fff;transform: rotate(90deg);}
ul.list-hotNews li:first-child .wrap-attr:after{position: absolute; content: ""; bottom:0px;right: -20px;background: 0 0;width: 20px; height: 20px;border-bottom-right-radius: 10px;box-shadow: .313rem .313rem 0 .313rem #fff; transform: rotate(90deg);}
ul.list-hotNews li:first-child .wrap-img{width:100%;}
ul.list-hotNews li:first-child .wrap-img a{border-radius:15px;}
ul.list-hotNews li:first-child .info{width:100%; position:relative; padding-left:0; padding-top:25px;}
ul.list-hotNews li:first-child .name h4{font-size:20px; font-weight:600; line-height:27px; }
ul.list-hotNews li:first-child .detail{font-size:16px; line-height:24px; padding-top:5px; opacity:.85; display:block; float:left;}
ul.list-hotNews li:nth-child(n+6){display:none;}

@media (max-width:991px){
    .colLeft-page{width:100%; padding-right:0;}
    .colRight-page{display:none;}
}

/* Comment */
.wrap-comment{width:100%; float:left; position:relative; margin-top:30px;}
.wrap-comment .total-comment{display:block; font-weight:bold; font-size:18px; color:rgba(0,0,0,.85)}
.wrap-comment .wrap-write-comment{width:100%; float:left; position:relative; border:1px solid rgba(0,0,0,.1); border-radius:5px; margin-top:5px; background:#fff;}
.wrap-comment .wrap-write-comment .input-comment{width:100%; border:none; font-size:14px; height:100px; background:none; padding:8px 10px; resize:none; background:rgba(0,0,0,.015); border-radius:5px 5px 0 0; transition:.3s; overflow-y:auto;}
.wrap-comment .wrap-write-comment .input-comment:focus{outline:none; background:#fff;}
.wrap-comment .wrap-write-comment .foot-write{width:100%; float:left; position:relative; border-top:1px solid rgba(0,0,0,.1); padding: 5px 10px; transition:.3s;}
.wrap-comment .wrap-write-comment .foot-write a.link{float:left; line-height:32px; text-decoration:none; color:rgba(0,0,0,.75)}
.wrap-comment .wrap-write-comment .foot-write a.link:hover{color:var(--color1);}
.wrap-comment .wrap-write-comment .foot-write a.send{line-height:30px; height:32px; padding: 0 10px; border-radius:4px; color:#fff; text-decoration:none; background:rgba(0,0,0,.75); float:right; transition:.3s;}
.wrap-comment .wrap-write-comment .foot-write a.send:hover{background:var(--color1)}
.wrap-comment .list-comment{width:100%; float:left; position:relative; margin:20px 0;}
.wrap-comment .list-comment .comment_ask{width:100%; margin:15px 0 0 0; padding:0; float:left; position:relative;} 
.wrap-comment .list-comment .comment_ask .name{display:block;}
.wrap-comment .list-comment .comment_ask .name span{line-height:30px; font-size:14px; font-weight:bold; color:rgba(0,0,0,.8); text-transform:capitalize; display:inline-block;}
.wrap-comment .list-comment .comment_ask .name .label-admin{display:inline-block; font-size:9px; text-transform:uppercase; margin-left:10px; padding: 0 5px; line-height:20px; height:17px; color:#fff; background:var(--color2); border-radius:3px; }
.wrap-comment .list-comment .comment_ask .name .avatar{width:30px; height:30px; border-radius:3px; overflow:hidden; margin-right:5px; float:left;}
.wrap-comment .list-comment .comment_ask .name .avatar img{width: inherit; height: inherit;object-fit: cover;}
.wrap-comment .list-comment .comment_ask .name .textavatar{display:table; background:rgba(0,0,0,.1); float:left; margin-right:5px; border-radius:3px;}
.wrap-comment .list-comment .comment_ask .name .textavatar abbr{cursor:default; text-decoration:none; border-bottom:none; font-weight:bold; color:rgba(0,0,0,.85); display:table-cell; text-align:center; vertical-align:middle; text-transform:uppercase; }
.wrap-comment .list-comment .comment_ask .infocom_ask{width:100%; float:left; position:relative; padding-left:35px; font-size:14px; padding-top:3px; margin-bottom:10px;}
.wrap-comment .list-comment .comment_ask .relate-ask{width:100%; float:left; position:relative; padding-left:35px; padding-top:2px; }
.wrap-comment .list-comment .comment_ask .relate-ask .btn-reply{text-decoration:none; color:var(--color1); float:left; transition:.3s; font-weight:500; text-decoration:none; padding-right:10px; margin-right:10px; position:relative;}
.wrap-comment .list-comment .comment_ask .relate-ask .btn-reply:before{font-family: "Font Awesome 5"; font-weight: 900; font-size:14px; content:"\f3e5"; margin-right:3px;}
.wrap-comment .list-comment .comment_ask .relate-ask .btn-reply:hover{text-decoration:underline;}
.wrap-comment .list-comment .comment_ask .relate-ask .btn-reply:after{content:''; width:1px; height:12px; background:rgba(0,0,0,.3); position:absolute; top:5px; right:0;}
.wrap-comment .list-comment .comment_ask .relate-ask .date-ask{float:left; opacity:.75; position:relative;}
.wrap-comment .list-comment .comment_reply{width:calc(100% - 35px); float:left; position:relative; margin-left:35px; background:rgba(0,0,0,.06); padding:0 10px 10px 10px; margin-top:15px; border-radius:4px;}
.wrap-comment .list-comment .comment_reply:before{content:''; border-bottom: 8px solid rgba(0,0,0,.06); border-left:10px solid transparent; border-right:10px solid transparent; bottom:100%; left:10px; position:absolute;}
.wrap-comment .list-comment .comment_reply .wrap-write-comment{margin-top:10px;}
.view-more{text-decoration:none; width:100%; max-width:400px; border:1px solid rgba(0,0,0,.1); line-height:38px; border-radius:5px; text-align:center; display:block; margin: 0 auto; clear:both; font-weight:500; color:var(--color1); text-decoration:none; background:rgba(0,0,0,.02); }
.view-more:hover{text-decoration:none; background:#fff;}

/*****************************************************************************************/
/*                               Elemenet Content                                        */
/*****************************************************************************************/

/* lightbox */
.wrap-lightbox{display:block;  position:relative; text-align:center; padding: 20px 0; }
.wrap-lightbox .inner{display:inline-block; margin: 0 auto; max-width: 100%; position:relative;border-radius:7px; overflow:hidden; }
.wrap-lightbox .inner .wrap-img{display:inline-block; position:relative;}
.wrap-lightbox .inner .wrap-img:before{content:"\f31e"; font-family:"Font Awesome 5"; font-size:14px; background: rgba(0,0,0,.7);position:absolute; left:50%; bottom:50%; z-index:2; font-weight:900; width:32px; height:32px; margin: -16px 0 0 -16px; display:flex; align-items:center; justify-content:center; transition:.3s; opacity:0; border-radius:3px; color:#fff;}
.wrap-lightbox .inner .wrap-img:hover:before{opacity:1;}
.wrap-lightbox .inner .wrap-img img{margin:0!important; display:initial;}
.wrap-lightbox .inner .note-img{text-align:center; text-decoration:none; background:var(--color-bg); color:rgba(0,0,0,.95); font-size:14px; line-height:20px; font-weight:500; padding: 7px 10px;clear:both; word-break:break-word; font-style:italic;}

/* Responsive Youtube */
.video-youtube{ position: relative;  padding-bottom: 56.25%;  height: 0; overflow: hidden; margin: 20px 0}
.video-youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:none}
.video-youtube .id-youtube{display:none;}

/* fixed Youtube */
.video-youtube.fixed .close-fixed{position:fixed; z-index:12; right: 20px; bottom:130px; background:#ec1f26; width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:#fff; }
.video-youtube.fixed iframe{position:fixed; left:initial!important; top:initial!important; right:5px; bottom:5px; width:350px!important; height:175px!important; z-index:10;}    

@media (max-width:991px) {
    .video-youtube.fixed iframe{bottom:55px;}
    .video-youtube.fixed .close-fixed{bottom: 185px}
}

/* Play part Youtube */
.partTime-Youtube{width:100%; float:left; position:relative;}
.partTime-Youtube .title{display:block; float:left; }
.partTime-Youtube .title div:first-child{font-weight:bold; font-size:20px; display:block;}
.partTime-Youtube .title div:last-child{font-style:italic; display:inline-block}
.partTime-Youtube ul{margin:0; padding:0; list-style:none; width:100%;}
.partTime-Youtube ul li{width:100%; position:relative; float:left; cursor:pointer; padding: 10px 0; border-top:1px solid rgba(0,0,0,.07); padding-left:30px;}
.partTime-Youtube ul li:first-child{border:none;}
.partTime-Youtube ul li:before{font-family:"Font Awesome 5 Brands"; font-weight:400; content: "\f167"; font-size:16px; color:#ec1f26; position:absolute; top:9px; left:0;}
.partTime-Youtube ul li div:first-child{font-weight:bold; color:var(--color1);}
.partTime-Youtube ul li div:last-child{width:100%; float:left; position:relative;}

/* table */
.table-responsive{border:none!important}
.table{width:100%; float:left; margin: 20px 0}
.table thead th{border:none!important; background:#3f446e; color:#fff!important; padding:10px 15px!important}
.table thead th:first-child{border-radius: 6px 0 0 6px;}
.table thead th:last-child{border-radius: 0 6px 6px 0;}
.table tbody tr td{padding: 10px 15px!important; border:none!important; font-size:15px;text-align:left;}
.table tbody tr:nth-child(2n+2) td{background:#f5f5fa}
.table tbody tr:nth-child(2n+2) td:first-child{border-radius: 6px 0 0 6px;}
.table tbody tr:nth-child(2n+2) td:last-child{border-radius: 0 6px 6px 0;}

/*
   https://clb100.com/trong-cay-voi-clb100/lich-ho-tro-trong-he-thong-clb100-60703.html 
*/

.timelineSupport{width:100%; float:left; position:relative; overflow:hidden; line-height:initial!important; margin: 20px 0;}
.timelineSupport .titleSupport{width:100%; float:left; position:relative; font-weight:bold; font-size:25px; color:#000; padding-bottom:10px;}
.timelineSupport .dateRow{width:100%; float:left; position:relative; display:table; padding:0 20px 0 115px; margin: 10px 0; border-radius:8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); transition:.3s;}
.timelineSupport .dateRow:hover{box-shadow:inset 0 0 0 1px var(--color2), 0 5px 20px rgba(0,0,0,.07)}
.timelineSupport .dateRow .date{position:absolute; top:0; left:0; color:#fff; text-align:center ; height:100%; width:95px; background:var(--color2); border-radius: 8px 15px 0 8px;}
.timelineSupport .dateRow .date div:first-child{font-weight:bold; text-transform:uppercase; padding:20px 0 3px 0; font-size:15px;}
.timelineSupport .dateRow .date div:nth-child(2){opacity:.7; font-size:13px;}
.timelineSupport .dateRow .date div:last-child{font-weight:500; font-size:35px; opacity:.5; position:absolute; left:0; bottom:5px; width:100%;}
.timelineSupport .dateRow .rowItem{width:100%; position:relative; float:left; display:table; border-bottom:1px solid rgba(0,0,0,.1); padding: 14px 0}
.timelineSupport .dateRow .rowItem:last-child{border:none;}
.timelineSupport .dateRow .rowItem .col{display:block; width:calc(50% - 90px); position:relative; vertical-align:middle; text-align:left; float:left;}
.timelineSupport .dateRow .rowItem .col ul{margin:0; padding:0 0 0 55px; list-style:none; width:100%; float:left; position:relative;}
.timelineSupport .dateRow .rowItem .col ul li{width:100%; float:left; position:relative; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.timelineSupport .dateRow .rowItem .col ul li:first-child{font-weight:500; opacity:.7}
.timelineSupport .dateRow .rowItem .col ul li:last-child{font-weight:bold; font-size:16px; padding-top:3px; color:var(--color1)}
.timelineSupport .dateRow .rowItem .col ul li:last-child a{text-decoration:none; color:#000; font-size:15px; transition:.3s;}
.timelineSupport .dateRow .rowItem .col ul:before{font-family:"Font Awesome 5"; font-weight:900; font-size:20px; position:absolute; top:1px; left:0; background:rgba(0,0,0,.07); display:flex; align-items:center; justify-content:center; width:40px; height:42px; border-radius:5px; opacity:.4}
.timelineSupport .dateRow .rowItem .col.user ul:before{content:"\f590"}
.timelineSupport .dateRow .rowItem .col.web ul:before{content:"\f7a2"}
.timelineSupport .dateRow .rowItem .col.web ul li:last-child a:hover{color:var(--color1)}
.timelineSupport .dateRow .rowItem .col.mobile{width:180px;}
.timelineSupport .dateRow .rowItem .col.mobile ul:before{content:"\f3cd"}
.timelineSupport .dateRow .rowItem .col.mobile ul li:last-child a{color:#ec1f26}

@media (max-width:767px) {
    .timelineSupport .dateRow{padding-left:20px; padding-top:70px;}
    .timelineSupport .dateRow .date{width:100%; height:60px; text-align:left; padding-left:20px; border-radius: 8px 8px 0 15px;}
    .timelineSupport .dateRow .date div:first-child{padding-top:12px;}
    .timelineSupport .dateRow .date div:last-child{right:20px; width:initial; left:initial; bottom:10px; font-weight:500;}
    .timelineSupport .dateRow .rowItem .col{width:100%!important; margin-bottom:14px;}
    .timelineSupport .dateRow .rowItem .col:last-child{margin-bottom:0;}
}

@media (min-width:768px) and (max-width:1199px) {
    .timelineSupport .dateRow .rowItem .col.user{width:100%!important; margin-bottom:14px;}
    .timelineSupport .dateRow .rowItem .col.web{width:calc(100% - 180px)!important}
}


