/* CSS Document */

/************************************************************/
/*********************** search info ************************/

.div-search--border{ border:1px solid var(--gray); padding: 25px 15px 20px; }
.div-search--form{ margin-bottom: 50px; }


.search--form{ align-items: center; gap: 10px 0; }
.search--form .form-control{ font-size: 16px; color: #333; border: 0; border-radius: 0;  background: var(--lightgray); }
.search--form .form-control::placeholder {
  color: #9B9B9B;
  opacity: 1;
}
.search--form .link--search{ text-align: center; }
.search--form .link--search a{ font-size: 16px; color: var(--primary); }
.search--form .link--search a:hover{ text-decoration: underline; }

.search--form .btn-submit, .search--form a.btn-submit,
.btn-primary, a.btn-primary{ background-color: var(--primary); border-radius: 0px; font-size: 16px; color: #fff; width: 100%; border: 1px solid var(--primary); }
.search--form .btn-submit:hover,
.btn-primary:hover{ background-color: #fff; color: var(--primary); }


.search-result--top{ overflow: hidden; }
.box-result--text{ float: left; font-size: 16px; line-height: 1.4; font-weight: 500; margin-bottom: 10px; }
.box-result--number{ float: right; font-size: 16px; line-height: 1.4; margin-bottom: 10px; }
.search-result--header h2{ font-size: 15px; font-weight: 700; color: var(--primary); border-bottom: 1px solid #707070; margin-bottom: 20px; padding-bottom: 5px; }

/* .market-result{ margin: 15px 0; }
.market-result--detail{ background-color: #F0F0F0; padding: 25px 10px; }
.market-result--detail h3{ font-size: 16px; line-height: 1.4; font-weight: 400; margin-bottom: 10px; }
.market-result--detail p{ font-size: 12px; line-height: 1.4; }
.market-result--detail h3 a:hover{ color: var(--primary); }

.btn-market--get{ margin: 20px 0;}
.btn-market--get a{ display: inline-block; background-color: var(--primary); border: 1px solid var(--primary); border-radius: 5px; font-size: 12px; font-weight: bold; color: #fff; text-align: center; padding: 5px 25px; } */

.search-result--bottom{ display: flex; align-items: center; justify-content: flex-end; border-bottom: 1px solid #707070; margin: 20px 0; padding-bottom: 10px; }
.search--update{ font-size: 14px; font-weight: bold; margin: 5px 0; }
.search-nav--pagenumber ul li{ display: inline-block; padding: 5px 7px; }
.search-nav--pagenumber ul li a{ font-size: 16px;  display: flex; align-items: center; justify-content: center; text-align: center; padding-top: 3px; }
.search-nav--pagenumber ul li a:hover{ color: var(--primary); }
.search-nav--pagenumber ul li a.active{ color: var(--primary); }
.search-listnews--bottom{ overflow: hidden; margin-bottom: 20px; }
.market--update a{ display: inline-block; background-color: var(--primary); padding: 10px 20px; border-radius: 5px; color: #fff; border:1px solid var(--primary); margin-bottom: 10px; }
.market--update a:hover{ background-color: #fff; color: var(--primary); }

.market--viamail{ width: 100%; background-color: #A5A5A5; font-size: 14px; color: #fff; text-align: center; padding: 10px; }
.market--viamail img{ vertical-align: middle; margin-right: 5px; }

.search-listnews{ padding: 30px 0; margin-bottom: 20px; border-bottom: 1px solid #707070; }
.search-listnews--row{ display: flex; gap: 20px; border-bottom: 1px dashed #aaa; padding-bottom: 30px; margin-bottom: 30px; }
.search-listnews--row:last-of-type{ border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.search-listnews--colleft{ max-width: 215px; }
/* .search-listnews--colright{ width: calc(100% - 235px); overflow: hidden; } */
.search-listnews--colleft figure{ margin: 0; }
.search-listnews--colleft figure img{ border-radius: 10px; }
/* .mk-listnew--title{ padding-left: 40px; padding-top: 20px; } */
.mk-listnew--title h3{ font-size: 20px; line-height: 1.4; font-weight: 400; margin-bottom: 5px; color: var(--primary); }
.mk-listnew--title p{ font-family: var(--font-Arial); font-size: 14px; line-height: 1.4; color: var(--gray); }
.mk-listnew--title p a{ text-decoration: underline; }
.mk-listnew--title a:hover{ color: var(--primary); }
.mk-listnew--title h3 a:hover{ text-decoration: underline; }
.mk-listnew--title h3 span{ color: #B52603; }

/* .mk-listnew--icon{ float: right; width: 120px; padding-top: 20px; text-align: right; }
.mk-listnew--icon span{ background-color: var(--primary); border-radius: 50%; width: 25px; height: 25px; text-align: center; margin: 0 2px; display: inline-block; }
.mk-listnew--icon span.disable{ background-color: #ddd; }
.mk-listnew--icon p{ font-size: 14px; font-weight: bold; color: #707070; margin: 0 5px 3px 0; } */


.filter--header{ font-size: 15px; line-height: 1.4; font-weight: bold; color: var(--primary); border-bottom: 1px solid #707070; margin-bottom: 10px; }

.filter--detail-list{ margin-bottom: 7px; }
.filter--detail-title{ background-color: #d4f1ff; background-image: url('../images/icon/lite_select.svg'); background-repeat: no-repeat; background-position: 95% 50%;}
.filter--detail-title a{ display: block; font-size: 16px; line-height: 1.4; color: var(--primary); padding: 6px 10px;  }
.filter--detail-title a:hover{ color: #333; }
.filter--detail-list ul li{ overflow: hidden; }
.filter--detail-list ul li a{ display: block; font-size: 14px; color: var(--gray); padding: 12px 8px 10px; border-bottom: 1px dashed #ddd; }
.filter--detail-list ul li a:hover{ color: var(--primary); }
.filter--detail-list ul li a.active{ background-color: #EAEAEA; }
.filter--detail-list ul li:last-of-type a{ border-bottom: 0; }
.filter--detail-list ul li a span{ float: right; font-size: 12px; }

.filter--detail-list ul li.has--sublist > a{ background-image: url('../images/icon/lite_select.svg'); background-repeat: no-repeat; background-position: 95% 50%; padding-right: 30px; }
/* .detailList--sublist{ background-color: #EAEAEA; } */
ul.detailList--sublist li{ position: relative; }
ul.detailList--sublist li a{ padding-left: 27px; }
ul.detailList--sublist li::before{ content: '- '; position: absolute; left: 15px; top: 7px; }

.filter--detail .filter--header, 
.filter--detail .mk-btnClose, 
.list-hide{ display: none; }


.search_result--notfound{ max-width: 500px; width: 90%; margin: 0 auto; padding-bottom: 50px; }
.icn-notfound{ max-width: 122px; width: 100%; margin: 30px auto; }
.search-notfound--title{ font-size: 18px; line-height: 1.4; color: var(--primary); font-weight: 700; text-transform: uppercase; text-align: center; }
.search-notfound--text{ font-size: 18px; line-height: 1.4; padding-top: 30px; }
.search-notfound--text ul{ margin-left: 20px; padding-top: 10px; }
.search-notfound--text ul li{ position: relative; padding-left: 15px; padding-bottom: 10px; }
.search-notfound--text ul li::before{ content: '- '; position: absolute; left: 0; }



@media (max-width: 1199px){

  .search--form .btn-submit, .search--form a.btn-submit{ padding: 5px 10px; }
  /* .mk-listnew--title{ padding-left: 20px; padding-top: 10px; } */
  .mk-listnew--icon{ padding-top: 10px; }

  .search-listnews--colleft{ max-width: 150px; }

}
@media (max-width: 991px){

  /* .mk-listnew--title, .mk-listnew--icon{ float: none; padding-left: 20px; padding-top: 10px; width: 100%; } */
  .mk-listnew--icon p{ margin: 0 0 3px 5px; }
  .mk-listnew--icon{ text-align: left; }
  /* .search-listnews--colright{ width: calc(100% - 150px); } */

}
@media (max-width: 767px){

  .div-search--form{ margin-bottom: 30px; }

  .filter--header{ background-color: var(--primary); color: #fff; border: 0; padding: 7px 10px; margin-bottom: 20px; border-radius: 5px; text-align: center; }
  .filter--detail{ display: none; }

  .filter--detail.openFilter{
    display: block; position: fixed; z-index: 99;
    width: 100%; height: 100vh; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #fff; padding: 20px 20px 120px; overflow: auto;
  }
  .filter--detail.openFilter .filter--header{ display: block; color: var(--primary); border-bottom: 1px solid #707070; margin-bottom: 10px; background-color: #fff; text-align: left; border-radius: 0; padding: 0 10px 0 0; }
  .filter--detail.openFilter .mk-btnClose{ display: block; position: absolute; top: 10px; right: 20px; width: 20px;}

}
@media (max-width: 576px){

  .market-search--form{ margin: 0 15px; }

  .box-result--text, .box-result--number,
  .market--update, .market-nav--pagenumber,
  .search-listnews--colleft, .search-listnews--colright{ float: none; width: 100%; }
  /* .mk-listnew--title, .mk-listnew--icon{ padding-left: 0px; } */

  .search-result--bottom{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .search-nav--pagenumber ul li{ padding: 0 5px; }

  .search-listnews--row{ flex-direction: column; gap: 10px; }
  .search-listnews--colleft{ max-width: 100%; }

}




/************************************************************/
/************************************************************/


.search--todaytopic{ margin-top: 20px; font-size: 16px; line-height: 1.4; }
.search--todaytopic a:hover{ text-decoration: underline; }

.search-most--list{ margin-bottom: 30px; }
.search-most--list h3{ font-size: 18px; font-weight: bold; margin-bottom: 10px; }
.search-most--list ul{ list-style: disc; margin-left: 20px; }
.search-most--list li{ font-size: 16px; line-height: 1.3; margin-bottom: 10px; }
.search-most--list a:hover{ text-decoration: underline; }


.div-search--top{ margin-bottom: 50px; }
.div-search--top h2{ font-size: 26px; font-weight: bold; margin-bottom: 10px; }
.div-search--top p{ font-size: 16px; line-height: 1.4; }



.search-advance--container{ max-width: 560px; margin: 0 auto; }

.search-advance--form .form-group{ margin-bottom: 2rem; }
.search-advance--form .form-group2{ margin: 20px 0; }
.search-advance--form label{ margin-bottom: 10px; }
.search-advance--form label span{ font-weight: 300; }
.search-advance--form label span.needs{ font-weight: normal; color: #e80000; }
.search-advance--form label.form-check-label{ margin-bottom: 0; }
.search-advance--form .invalid-feedback{ margin-top: 0.5rem; }
.search-advance--form .form-check-input{ margin-top: 0; }

.search-advance--form .btn-submit, .search-advance--form a.btn-submit{ background-color: var(--primary); border-radius: 0px; font-size: 16px; color: #fff; border: 1px solid var(--primary); padding: 10px 30px; }
.search-advance--form .btn-submit:hover{ background-color: #fff; color: var(--primary); }

.custom-select {
  background: #fff url('../images/icon/arrow_select.svg') no-repeat right 1rem center;
}
.custom-select:focus {
  /* border-color: #E8E8E8; */
  outline: 0;
  box-shadow: 0 0 0 0 rgb(0, 123, 255, 0);
}

.box-filter--text{ font-size: 18px; font-weight: 500; margin-bottom: 20px; }
.box-filter--text span{ color: #B52604; }


.form-flex{ display: flex; align-items: center; gap: 10px; }


/* datepicker */
.datepicker{ padding: 5px 15px; z-index: 99999 !important; }
.datepicker td, .datepicker th{ padding: 9px 0; font-size: 12px; width: 30px; height: 20px; }
.datepicker th.dow{ font-size: 10px; color: var(--default); }
.datepicker .datepicker-switch{ font-size: 16px; text-align: left; }
.datepicker .prev, .datepicker .next{ text-align: right; }

.datepicker table tr td.today, .datepicker table tr td.today:hover, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover{ background-color: var(--primary); background-image: none; color: var(--white); border-radius: 50%; }

.datepicker table tr td.active{ border-radius: 50%; }

/************************************************************/
/************************************************************/


.box-result--sortby{ display: flex; align-items: center; margin-top: 10px; gap: 20px; }
.box-result--sortby ul{ display: flex; align-items: center; gap: 10px; }
.box-result--sortby ul li a{ display: block; border: 1px solid #ddd; padding: 6px 10px; }
.box-result--sortby ul li.active a{ color: var(--primary); background-color: #d4f1ff; border-color: #d4f1ff; }






.txt-c00{ color: #cc0000; }

.search-imgnews{ margin-bottom: 30px; }
.search-imgnews--img{ background-color: var(--lightgray); padding: 10px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; height: 250px; }
.search-imgnews--img figure{ margin: 0; line-height: 0; }
.search-imgnews--img figure img{ border-radius: 10px; max-height: 200px; }


.search--container-img_detail{ border: 1px solid var(--gray); }
.img_detail--content{ background-color: var(--lightgray); padding: 30px; height: 100%; }
.img_detail--content .img_detail--photo{ text-align: center; margin-bottom: 20px; }
.img_detail--content p{ font-size: 16px; line-height: 1.4; }

.img_detail--desc{ padding: 30px 30px 30px 0; }
.img_detail--desc h2{ margin-bottom: 20px; font-size: 20px; font-weight: bold; }
.img_detail--desc h2 span{ background-color: var(--red); padding: 6px 10px; font-size: 12px; color: var(--white); font-weight: bold; }
.img_detail--desclist{ border-bottom: 1px solid var(--lightgray2); padding-bottom: 10px; margin-bottom: 10px; }
.img_detail--desclist p{ color: var(--gray); line-height: 1.5; }
.img_detail--desclist a{ color: var(--primary); }
.img_detail--desclist a:hover{ text-decoration: underline; }

.img_detail--btn{ margin-bottom: 20px;}
.img_detail--btn .btn-purchase{ display: block; width: 100%; padding: 10px 20px; text-align: center; background-color: var(--primary); font-size: 16px; color: var(--white); border: 1px solid var(--primary); }
.img_detail--btn .btn-purchase:hover{ background-color: var(--white); color: var(--primary); }

.img_detail--link li{ margin-bottom: 10px; }
.img_detail--link li:last-child{ margin-bottom: 0; }
.img_detail--link li i{ color: var(--primary); }


@media (max-width: 767px){

  .img_detail--content{ padding: 20px; }
  .img_detail--desc{ padding: 20px; }

}



.search-form-top{ display: flex; flex-wrap: wrap; }
.search-form-top .intro{ width: calc(100% - 400px); padding-right: 20px; padding-top: 20px; }
.search-form-top .suggestion{ background-color: #e6eef6; width: 400px; padding: 20px; }
.search-form-top h2{ font-size: 28px; font-weight: bold; margin-bottom: 10px; }
.search-form-top h3{ font-size: 20px; font-weight: bold; margin-bottom: 10px; }
.search-form-top p{ font-size: 16px; line-height: 1.4; }


.imgOrder h2{ font-size: 28px; font-weight: bold; margin-bottom: 10px; }
.imgOrder--detail{ background-color: var(--lightgray); padding: 20px; display: flex; gap: 30px; }
.imgOrder--detail .imgOrder--photo{ width: 200px; }
.imgOrder--detail .imgOrder--photo img{ max-width: 100%; height: auto; }
.imgOrder--detail .imgOrder--desc{ width: calc(100% - 230px); }
.imgOrder--detail .imgOrder--desc h3{ font-size: 20px; font-weight: bold; margin-bottom: 10px; }
.imgOrder--detail .imgOrder--desc li{ margin-bottom: 10px; font-size: 16px; line-height: 1.4; }
.imgOrder--detail .imgOrder--desc a{ color: var(--primary); }
.imgOrder--detail .imgOrder--desc a:hover{ text-decoration: underline; }


.image--form{ background-color: var(--lightgray); padding: 20px; height: 100%; }
.image--form h2{ font-size: 20px; font-weight: bold; margin-bottom: 30px; }


.acceptPrivacy{ border: 1px solid var(--lightgray2); padding: 15px; margin: 15px 0; overflow: scroll; height: 200px; }
.acceptPrivacy h2{ font-size: 20px; line-height: 1.4; font-weight: bold; margin-bottom: 20px; }
.acceptPrivacy h3{ font-size: 18px; line-height: 1.4; font-weight: bold; margin-bottom: 10px; }
.acceptPrivacy p, .acceptPrivacy li{ font-size: 16px; line-height: 1.4; margin-bottom: 10px; }
.acceptPrivacy ol li ol{ margin-left: 20px; }
.acceptPrivacy ol li span.listNumber{ margin-right: 10px; }


.search--contact{ margin-top: 100px; }
.search--contact h2{ font-size: 20px; font-weight: bold; margin-bottom: 10px; }
.search--contact-detail{ display: flex; align-items: center; }
.search--contact-detail .search--contact-info:first-child{ padding-right: 50px; margin-right: 50px; border-right: 1px solid var(--lightgray2); }
.search--contact-info{ display: flex; align-items: center; gap: 10px; }
.search--contact-info h3{ font-size: 50px; line-height: 1; font-weight: bold; color: var(--primary); }
.search--contact-info p{ font-size: 16px; line-height: 1.4; text-transform: uppercase; }
.search--contact-info i{ font-size: 100px; color: var(--lightgray2); }
.search--contact-info a{ word-break: break-all; }


@media (max-width: 991px){

  .search-form-top .intro{ width: calc(100% - 300px); }
  .search-form-top .suggestion{ width: 300px; }

  .search--contact h2{ font-size: 18px; }
  .search--contact-detail .search--contact-info:first-child{ padding-right: 30px; margin-right: 30px; }
  .search--contact-info h3{ font-size: 30px; }
  .search--contact-info p{ font-size: 14px; }
  .search--contact-info i{ font-size: 80px; }

}
@media (max-width: 767px){

  .search-form-top{ margin-bottom: 40px; }
  .search-form-top .intro{ width: 100%; margin-bottom: 30px; }
  .search-form-top .suggestion{ width: 100%; }

  .search-form-top h2, .imgOrder h2{ font-size: 24px; }

  .imgOrder--detail{ flex-direction: column; gap: 20px;}
  .imgOrder--detail .imgOrder--photo{ margin: 0 auto; }
  .imgOrder--detail .imgOrder--desc{ width: 100%; }

  .search--contact{ margin-top: 70px; }
  .search--contact-detail{ flex-direction: column; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
  .search--contact-detail .search--contact-info:first-child{ padding-right: 0; margin-right: 0; border: 0; }

}


.divSearch--table{ margin-bottom: 50px; }
.divSearch--tr{ display: flex; align-items: center; border-bottom: 1px solid var(--lightgray2); padding-bottom: 15px; margin-bottom: 15px; }
.divSearch--th, .divSearch--td{ width: 25%; padding-right: 20px; font-size: 16px; }
.divSearch--th{ font-weight: bold; }
.divSearch--tr .divSearch--th:first-child,
.divSearch--tr .divSearch--td:first-child{ width: 28%; }
.divSearch--tr .divSearch--th:last-child,
.divSearch--tr .divSearch--td:last-child{ width: 22%; }


@media (max-width: 1199px){

  .divSearch--td{ font-size: 14px; }

}
@media (max-width: 991px){

  .divSearch--th{ display: none; }
  .divSearch--tr{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .divSearch--td{ position: relative; width: 100%; padding-right: 0; padding-left: 50%; }
  .divSearch--tr .divSearch--td::after{ content: ''; position: absolute; top: 0; left: 0; font-weight: bold; }
  .divSearch--tr .divSearch--td:nth-child(1)::after{ content: 'SELECT CHANNELS'; }
  .divSearch--tr .divSearch--td:nth-child(2)::after{ content: 'BRAND/TITLE/PRODUCT'; }
  .divSearch--tr .divSearch--td:nth-child(3)::after{ content: 'ESTIMATE AUDIENCES'; }
  .divSearch--tr .divSearch--td:nth-child(4)::after{ content: 'LOCATION OF AUDIENCE'; }

  .divSearch--tr .divSearch--td:first-child{ width: 100%; }
  .divSearch--tr .divSearch--td:last-child{ width: 100%; }

}
@media (max-width: 576px){

  .divSearch--td{ font-size: 12px; }

}
@media (max-width: 359px){

  .divSearch--tr .divSearch--td::after{ width: 45%; word-break: break-all; }

}


/************************************************************/
/************************************************************/


.confirm--title h2{ font-size: 34px; font-weight: bold; color: var(--primary); margin-bottom: 50px; text-align: center; }

.image--comfirm li{ display: flex; gap: 30px; font-size: 16px; line-height: 1.4; margin-bottom: 15px; }
.image--comfirm li p{ word-break: break-all; }
.image--comfirm li p:first-child{ width: 150px; font-weight: bold; }
.image--comfirm li p:last-child{ width: calc(100% - 150px); }


@media (max-width: 991px){

  .confirm--title h2{ font-size: 26px; }

}
@media (max-width: 767px){

  .confirm--title h2{ font-size: 24px; margin-bottom: 30px; }

}
@media (max-width: 576px){

  .image--comfirm li{ flex-wrap: wrap; flex-direction: column; gap: 5px; }
  .image--comfirm li p:first-child,
  .image--comfirm li p:last-child{ width: 100%; }

}



/************************************************************/
/************************************************************/


.page-error404{ max-width: 738px; width: 85%; margin: 10% auto; text-align: center; }
.page-error404 h2{ font-size: 100px; color: var(--default); }
.page-error404 h3{ font-size: 40px; line-height: 1.3; color: var(--default); padding: 30px 0; }
.page-error404 p{ font-size: 18px; line-height: 1.4; }
.form-page404{ text-align: center; padding: 30px 0 20px; display: flex; align-items: center; justify-content: space-between; max-width: 650px; width: 100%; margin: 0 auto; }
.form-page404 .input-page404{ padding: 6px 20px; border: 1px solid #E3E3E3; font-size: 18px; height: 40px; width: calc(100% - 160px); background-color: #F7F7F7; margin-right: 10px; border-radius: 0; }
.form-page404 .btn-page404{ border: 1px solid var(--primary); background-color: var(--primary); border-radius: 0; font-size: 13px; font-weight: bold; color: var(--white); padding: 8px 20px 4px; height: 40px; width: 150px; text-align: center; }
.form-page404 .btn-page404:hover{ background-color: var(--white); color: var(--primary); }
.page-error404 a{ color: var(--primary); }
.page-error404 a:hover{ color: var(--blue-hover); text-decoration: underline; }


@media (max-width: 991px){
  .login-pageBody{ margin: 2.5em auto 0px; }
  .page-error404 h2{ font-size: 80px; }
  .page-error404 h3{ font-size: 30px; }
}
@media (max-width: 576px){
  .form-page404 .input-page404{ width: calc(100% - 110px); }
  .form-page404 .btn-page404{ width: 100px; }
}