/*
 * CSS Chi tiết sản phẩm
*/

/*
 * Custom sản phẩm
 * */
.template-product { }

/* breadcrumb product */
.product-breadcrumb-container { line-height: 40px; margin-bottom: 20px;}
.product-breadcrumb-container .breadcrumbs { max-width: 1310px; margin: auto; text-transform: unset; line-height: 20px;  padding: 10px 15px; font-size: 14px; font-weight: 400; color: #000; letter-spacing: 0px; text-align: left; }
.product-breadcrumb-container .breadcrumbs a { position: relative; display: inline-block; text-transform: none; font-weight: 400; font-size: 14px; color: #000; }
.product-breadcrumb-container .breadcrumbs a:hover { color: #b50919; }

/* banner sản phẩm */
.banner-product { background-position: 50% 50%; background-size: cover; height: auto; overflow: hidden; padding-top: 350px; position: relative;}
.banner-product img { bottom: 0; font-family: "object-fit: cover;"; height: 100%; left: 0; -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; position: absolute; right: 0; top: 0; width: 100%;}

/* template product 1 */
.template-product1 { background: #f2fbfa; padding: 30px 0px; margin-bottom: 30px;}
.template-product1 .template-content { max-width: 1200px; margin: 0 auto; display: flex; flex-flow: row wrap; width: 100%; align-items: flex-start;}
.template-product1 .template-content .col-left { flex-basis: 100%; }
.template-product1 .template-content .col-right { flex-basis: 100%; display: flex; flex-flow: row wrap; width: 100%; justify-content: space-between; align-items: flex-start;}
.template-product1 .title-product { color: #000; }
.template-product1 .hbw-info-tour { width: 100%;}
.template-product1 .button-download { border: 2px solid #b2c6c5; color: #11977c; line-height: normal; padding: 5px 5px; max-width: 48%; flex-basis: 100%; text-align: center; display: block; width: 100%; font-size: 14px; background: #fff;}

.template-product1 a.button-book { border: 2px solid #b2c6c5; color: #11977c; line-height: normal; padding: 5px 5px; max-width: 100%; flex-basis: 100%; text-align: center; display: block; width: 100%; font-size: 14px; background: #fff; margin-top: 15px; }
.template-product1 a:hover { background: #11977c; color: #fff;}

@media only screen and (min-width: 960px) { 
  .template-product1 .template-content .col-left { max-width: 75%; padding: 0 15px;}
  .template-product1 .template-content .col-right { max-width: 25%; padding: 0 15px; }
  .template-product1 .title-product { font-size: 40px;}
  .template-product1 .hbw-info-tour { display: flex; }
  .template-product1 .hbw-info-tour div:not(:last-child) { padding-right: 15px;}
  .template-product1 .hbw-info-tour div~div { padding-left: 15px;}
  .template-product1 .hbw-info-tour div~div:after { content: ""; position: absolute; left: 0px; top: 50%; transform: translate(0%, -50%); width: 2px; height: 50%; background: #000;}
}
@media only screen and (max-width: 959px) { 
  .template-product1 .template-content .col-left { max-width: 100%; padding: 0 10px; margin-bottom: 30px; }
  .template-product1 .template-content .col-right { max-width: 100%; padding: 0 10px; }
  .template-product1 .title-product { font-size: 30px;}
}

/* template product 2 */
.template-product2 .button-stick { margin-bottom: 30px; display: flex; gap: 5px; flex-flow: row wrap;}
.template-product2 .button-stick .button { margin: 0px; text-transform: unset; font-size: 14px; background: #ededed; border: 0px; color: #000;}
.template-product2 .button-stick .button:hover { background: #1e909c; color: #fff;}
.template-product2 .woocommerce-tabs ul { margin-left: 0px;}
.template-product2 .woocommerce-tabs .tabs li a { padding: 0px; text-transform: unset; font-size: 30px; font-weight: 600;}
.template-product2 .woocommerce-tabs .tabs li a:before { display: none;}

@media only screen and (min-width: 960px) { 

}
@media only screen and (max-width: 959px) { 

}

/* tour highlights */
.template-product2 .tour-highlights { margin-top: 20px;}
.template-product2 .tour-highlights .title-highlights { color: #000; font-size: 30px; margin-bottom: 20px;}
.template-product2 .tour-highlights ul { margin-left: 0px;}

@media only screen and (min-width: 960px) { 

}
@media only screen and (max-width: 959px) { 

}

/* Detailed Itinerary */
.detailed-itinerary { background: #fff; margin-top: 30px; }
.detailed-itinerary .tieude-itinerary { color: #000; font-size: 30px; margin-bottom: 20px;}
.detailed-itinerary .accordion { counter-reset: section-counter;}
.detailed-itinerary .accordion .accordion-item { counter-increment: section-counter; }
.detailed-itinerary .accordion .accordion-item~.accordion-item { margin-top: 20px;}

.detailed-itinerary .accordion .accordion-item .accordion-title { border: 0px; background: #ededed; padding: 10px 15px; }
.detailed-itinerary .accordion .accordion-item .accordion-title span { font-weight: 600; font-size: 16px; color: #000; display: block; position: relative; padding-left: 75px;}
.detailed-itinerary .accordion .accordion-item .accordion-title span:before { content: "Day 0" counter(section-counter); display: inline-block; background: #0a9093; color: #fff; padding: 5px 10px; border-radius: 5px; font-size: 14px; position: absolute; left: 0px; top: 0px; line-height: normal; }
.detailed-itinerary .accordion .accordion-item .accordion-title button.toggle i.icon-angle-down { display: none;}
.detailed-itinerary .accordion .accordion-item .accordion-title button.toggle { margin: 0px; width: 24px; height: 24px; line-height: normal; min-height: auto; background: #0b6aff; top: 50%; transform: translate(0%, -50%); color: #fff; font-weight: 400; opacity: 1; display: none; }
.detailed-itinerary .accordion .accordion-item .accordion-title button.toggle:before { content: "+";}
.detailed-itinerary .accordion .accordion-item .accordion-title.active button.toggle:before { content: "-";}
.detailed-itinerary .accordion .accordion-item .accordion-inner { padding: 15px; border: 1px solid #e0e0e0; }

@media only screen and (min-width: 960px) { 
  .detailed-itinerary { padding: 0px !important; }
}
@media only screen and (max-width: 959px) { 
  .detailed-itinerary { padding: 0px !important; }
}

/* Gallery */
.hbw-gallery-grid {
    margin-top: 30px; display: flex;
    flex-flow: row wrap;
    width: 100%;
}
.hbw-gallery-grid .tieude-gallery {
    margin-bottom: 20px;
    color: #000;
    font-size: 30px; max-width: 100%; flex-basis: 100%;
}

.hbw-gallery-grid .hbw-gallery-item {
    max-width: 33.333%;
    flex-basis: 100%;
    margin-bottom: 15px;
    padding: 0 5px;
}
.hbw-gallery-grid .hbw-gallery-item .image-cover {     background-position: 50% 50%;
    background-size: cover;
    height: auto;
    overflow: hidden;
    padding-top: 100%;
    position: relative; padding-top: 100%; border-radius: 10px; }
.hbw-gallery-grid .hbw-gallery-item img {
    bottom: 0;
    font-family: "object-fit: cover;";
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

@media only screen and (min-width: 960px) { 

}
@media only screen and (max-width: 959px) { 

}

/* Sản phẩm liên quan */
.related .product .product-small, .related .product .box-image, .related .product .box-text { display: block !important;}
.related .product .hbw-info-khuyen-mai { display: none;}
.related.related-products-wrapper { border: 0px;}
.related .product-section-title { width: 100%; font-size: 25px; color: #000; text-transform: unset; padding: 0px; margin-bottom: 25px;}
.products .product .col-inner { position: relative; background-color: #FFF; padding: 0px; border: 1px solid #e5e5e5; border-radius: 10px; overflow: hidden; }
.products .product .box-image { }
.products .product .box-text { padding: 15px; display: flex; flex-direction: column;  }
.products .product .box-text .title-wrapper { order: 1;}
.products .product .product-title { margin: 0px; font-weight: 600;}
.products .product .product-title a { color: #000; font-size: 16px; width: 100%; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.products .product:hover .product-title a { color: #0b6aff; }
.products .product .price-wrapper { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e5e5e5; order: 3; display: none; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px;}
.products .product .price-wrapper .hbw-view-more-btn { color: #000; text-decoration: underline; font-size: 16px; margin: 0px;}

@media only screen and (min-width: 960px) { 
  .shop-page-title .page-title-right p.woocommerce-result-count { width: 50%; float: left; }
  .shop-page-title .page-title-right form.woocommerce-ordering { float: right; }
}
@media only screen and (max-width: 959px) { 
  .shop-page-title .page-title-right p.woocommerce-result-count { width: 100%; }
  .shop-page-title .page-title-right form.woocommerce-ordering { width: 100%; }
}

