/*
Theme Name:   Flatsome Child
Theme URI:    https://uxthemes.com/flatsome/
Description:  Child theme của Flatsome
Author:       Tên của bạn
Author URI:   http://example.com
Template:     flatsome
Version:      1.0
*/

/* Import style từ theme cha */
@import url("../flatsome/style.css");
/* Thẻ bao ngoài sản phẩm */
.product-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    position: relative;
}
/* Phần chứa nút được đẩy xuống đáy (cách đáy một chút) */
.product-button-wrapper {
    margin-top: auto; /* Đẩy xuống dưới */
    padding-bottom: 15px;
    display: flex;
    justify-content: center; /* Canh giữa theo ngang */
}
/* Nút */
.add_to_cart_button {
    background: rgba(197, 156, 65, 0.2) !important;
    color: #2e77ba;
    font-size: 14px;
    border-radius: 4px !important;
    position: relative;
    height: auto !important;
    width: 90%;
    margin: 5%;
    justify-content: center;
    align-items: center;
}
.shop-container .product-info .wpcbn-btn-simple.single_add_to_cart_button,
.single_add_to_cart_button {
    background: rgba(197, 156, 65, 0.2) !important;
    /*color: #2e77ba;*/
    width: 90% !important;
    align-items: center !important;
    margin: 5% !important;
    margin-bottom: -30px !important;
}
.custom_add_to_cart_button,
a.buy-now-button {
    background: #ffa500 !important;
    color: #fff !important;
    border-radius: 10px;
    padding: 8px 10px;
    font-weight: inherit;
    font-size: 16px;
    line-height: 1.2;
    width: 90%;
    text-align: center;
    text-decoration: none;
    white-space: pre-line;
    display: inline-block;
}
/* Hiệu ứng hover */
.custom_add_to_cart_button:hover,
a.buy-now-button:hover {
    background: #fca315 !important; /* Màu vàng hover (hoặc thay màu theo bạn) */
    color: #fff !important;
	justify-content: center;    
    margin: 5% !important;
}
/* Đảm bảo class không bị ghi đè */
.woocommerce a.button.buy-now-button,
.woocommerce .buy-now-button.button {
    display: flex;
	justify-content: center;    
    margin: 5% !important;
}
/* imporrt */
.tgdd-review-qa { 
    display: none; 
    border: 1px solid #ddd;
    padding: 20px;
    background: #fff;
}
.single-product .tgdd-review-qa { 
    display: block; 
}
.tgdd-review-qa h3 {
    margin: 0 0 15px; /* Loại bỏ margin trên, giữ margin dưới để phân cách */
    font-size: 24px; /* Điều chỉnh kích thước nếu cần */
}
.review-summary {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.review-summary .score {
    font-size: 36px;
    font-weight: bold;
    color: #f39c12;
}
.review-summary .score span {
    font-size: 18px;
    color: #555;
}
.rating-bars {
    flex: 1;
}
.rating-bars .bar {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}
.rating-bars .star {
    width: 40px;
}
.rating-bars .bar-bg {
    flex: 1;
    height: 8px;
    background: #eee;
    margin: 0 8px;
    position: relative;
}
.rating-bars .bar-fill {
    height: 8px;
    background: #f39c12;
}
.review-list {
    margin-top: 20px;
}
.review-item {
    border-top: 1px solid #eee;
    padding: 10px 0;
}
.review-item strong {
    color: #333;
}
.review-item .stars {
    color: #f39c12;
}
.review-qa-buttons {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}
.review-qa-buttons a {
    background: #0071a1;
    color: #fff;
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 4px;
}
.review-qa-buttons a:hover {
    background: #005f87;
}
/*end*/
.term-description,
.readmore,
#tab-description,
.product-section .entry-content,
#accordion-description-content,
.taxonomy-description, .article-inner .entry-content,.term-short-description, .taxonomy-full-description {
    overflow: hidden;
    position: relative;
    margin-bottom: 1rem;
}

.realdev-readmore {
    text-align: center;
    z-index: 10;
}

.realdev-expand {
    position: absolute;
    bottom: -7px;
    width: 100%;
    background: #fff;
    height: 100px;
}

.realdev-readmore:before {
    content: "";
    position: absolute;
    bottom: 100%;
    height: 200px;
    left: 0;
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff);
    width: 100%;
}

.realdev-readmore .arrow:after {
    content: "";
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAMCAYAAAAH4W+EAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDc3NEIyN0EyRDY0MTFFQjkzMDRBMjIxNzc0RTBDODQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDc3NEIyNzkyRDY0MTFFQjkzMDRBMjIxNzc0RTBDODQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozNjdCMUQ3OTJDQUIxMUVCOENCRERGNDFFOTA1OTlERCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozNjdCMUQ3QTJDQUIxMUVCOENCRERGNDFFOTA1OTlERCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ph5ikagAAAGHSURBVHjaYmAAAg8Pj14vLy87Bjzg////JGFPT09GHx8fNnxmguwE2Q1iMwI1eAI1bgPZxcjIOJ+Dg6Ns/fr1b3E5hhjg7e3NuG3bNpyKAwMDhX/8+NEFNC8J7AhGRi8mHh6evUBGHRD/AkkAFVwHujQWmwFANWCMx4eMYWFheB0BMhtkB8guoFk/QXaD3QBTAAxG1b9//84AKnCCWrqPmZk5Y8uWLbfxRRdSKDADHfAXl1pC5jNiczFQcS8Qi4JcDBRqBbq4c/Xq1b+wWRAaGgoygxEo/w+HPNuXL1/KgcxqoJnsQDNfA3Ex0NGLUUIbh2YhoOZuoMZEqJobTExM6UDNhxhIAKDE+O/fv5lApgYsDQI9VQp09DuMaKeWQZR6hBmfgbdv335oaGg4+zcQAB1hDTTYFMhMUlNTewGUu4QrMf769WszUK0NKAMAcRMvL2/Mxo0b7+Gzi5HYYCaU2MhJ7GQ5BF9ihkrhTYxUdwhagZSIZAbRaYhqDsGSmBnIyVXIACDAAM34JXWPolNhAAAAAElFTkSuQmCC);
    display: block;
    width: 25px;
    top: 2px;
    right: 0;
    left: 0;
    margin: auto;
    position: absolute;
    opacity: .5;
    height: 15px;
    background-size: contain;
    background-repeat: no-repeat;
    animation: animate-arrow-2 1s ease-in-out infinite .1s;
}

.realdev-readmore .arrow:before {
    content: "";
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAMCAYAAAAH4W+EAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDc3NEIyN0EyRDY0MTFFQjkzMDRBMjIxNzc0RTBDODQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDc3NEIyNzkyRDY0MTFFQjkzMDRBMjIxNzc0RTBDODQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozNjdCMUQ3OTJDQUIxMUVCOENCRERGNDFFOTA1OTlERCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozNjdCMUQ3QTJDQUIxMUVCOENCRERGNDFFOTA1OTlERCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ph5ikagAAAGHSURBVHjaYmAAAg8Pj14vLy87Bjzg////JGFPT09GHx8fNnxmguwE2Q1iMwI1eAI1bgPZxcjIOJ+Dg6Ns/fr1b3E5hhjg7e3NuG3bNpyKAwMDhX/8+NEFNC8J7AhGRi8mHh6evUBGHRD/AkkAFVwHujQWmwFANWCMx4eMYWFheB0BMhtkB8guoFk/QXaD3QBTAAxG1b9//84AKnCCWrqPmZk5Y8uWLbfxRRdSKDADHfAXl1pC5jNiczFQcS8Qi4JcDBRqBbq4c/Xq1b+wWRAaGgoygxEo/w+HPNuXL1/KgcxqoJnsQDNfA3Ex0NGLUUIbh2YhoOZuoMZEqJobTExM6UDNhxhIAKDE+O/fv5lApgYsDQI9VQp09DuMaKeWQZR6hBmfgbdv335oaGg4+zcQAB1hDTTYFMhMUlNTewGUu4QrMf769WszUK0NKAMAcRMvL2/Mxo0b7+Gzi5HYYCaU2MhJ7GQ5BF9ihkrhTYxUdwhagZSIZAbRaYhqDsGSmBnIyVXIACDAAM34JXWPolNhAAAAAElFTkSuQmCC);
    display: block;
    width: 25px;
    right: 0;
    left: 0;
    top: -5px;
    margin: auto;
    position: absolute;
    opacity: 1;
    height: 15px;
    background-size: contain;
    background-repeat: no-repeat;
    animation: animate-arrow-3 1s ease-in-out infinite .2s;
}

.realdev-readmore .arrow span {
    animation: animate-arrow-1 1s ease-in-out infinite;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAMCAYAAAAH4W+EAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDc3NEIyN0EyRDY0MTFFQjkzMDRBMjIxNzc0RTBDODQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDc3NEIyNzkyRDY0MTFFQjkzMDRBMjIxNzc0RTBDODQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozNjdCMUQ3OTJDQUIxMUVCOENCRERGNDFFOTA1OTlERCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozNjdCMUQ3QTJDQUIxMUVCOENCRERGNDFFOTA1OTlERCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ph5ikagAAAGHSURBVHjaYmAAAg8Pj14vLy87Bjzg////JGFPT09GHx8fNnxmguwE2Q1iMwI1eAI1bgPZxcjIOJ+Dg6Ns/fr1b3E5hhjg7e3NuG3bNpyKAwMDhX/8+NEFNC8J7AhGRi8mHh6evUBGHRD/AkkAFVwHujQWmwFANWCMx4eMYWFheB0BMhtkB8guoFk/QXaD3QBTAAxG1b9//84AKnCCWrqPmZk5Y8uWLbfxRRdSKDADHfAXl1pC5jNiczFQcS8Qi4JcDBRqBbq4c/Xq1b+wWRAaGgoygxEo/w+HPNuXL1/KgcxqoJnsQDNfA3Ex0NGLUUIbh2YhoOZuoMZEqJobTExM6UDNhxhIAKDE+O/fv5lApgYsDQI9VQp09DuMaKeWQZR6hBmfgbdv335oaGg4+zcQAB1hDTTYFMhMUlNTewGUu4QrMf769WszUK0NKAMAcRMvL2/Mxo0b7+Gzi5HYYCaU2MhJ7GQ5BF9ihkrhTYxUdwhagZSIZAbRaYhqDsGSmBnIyVXIACDAAM34JXWPolNhAAAAAElFTkSuQmCC);
    width: 25px;
    top: 9px;
    height: 15px;
    opacity: .3;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    right: 0;
    left: 0;
    margin: auto;
    position: absolute;
}

@keyframes animate-arrow-1 {
    0% {
        transform: translateY(-40px);
        opacity: 0
    }

    70%,
    to {
        transform: translateY(0);
        opacity: .3
    }
}

@keyframes animate-arrow-2 {
    0% {
        transform: translateY(-20px);
        opacity: 0
    }

    70%,
    to {
        transform: translateY(0);
        opacity: .5
    }
}

@keyframes animate-arrow-3 {
    0% {
        transform: translateY(-10px);
        opacity: 0
    }

    70%,
    to {
        transform: translateY(0);
        opacity: 1
    }
}

.realdev-readmore button {
    top: 40px;
    color: #03a0e2;
    font-weight: 500;
}

.realdev-collapse button {
    transform: rotate(180deg);
    margin-bottom: 0;
    top: -10px;
}

.realdev-collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #03a0e2;
    cursor: pointer;
}
@media only screen and (max-width: 768px) {
  .product-footer .container,
  .product-footer .woocommerce-tabs,
  .product-footer .row.container {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box;
  }

  .product-footer .woocommerce-tabs {
    padding: 15px 0 !important;
  }

  .woocommerce-tabs ul.tabs {
    flex-wrap: wrap !important;
  }

  .woocommerce-tabs ul.tabs li {
    width: 100% !important;
    margin-bottom: 10px;
  }
}
/* moblie *
@media (max-width: 768px) {
  #tab-description,
  .product-section .entry-content,
  .term-description,
  .taxonomy-description {
    overflow: visible !important;
  }
}

@media (max-width: 768px) {
  .review-summary {
    flex-direction: column;
    gap: 10px;
  }
  .review-summary .score {
    font-size: 28px;
  }
}
@media (max-width: 768px) {
  .tgdd-review-qa {
    max-width: 100%;
    box-sizing: border-box;
    padding: 15px;
    overflow-x: hidden;
  }
  .rating-bars .bar {
    flex-wrap: wrap;
  }
  .rating-bars .bar-bg {
    flex: 1 1 100%;
    margin: 6px 0;
  }
}
@media (max-width: 768px) {
  .realdev-expand {
    position: static;
    height: auto;
    background: transparent;
  }
  .realdev-readmore:before {
    display: none;
  }
} */
/* =========================
   FIX RESPONSIVE TAB DESCRIPTION (MOBILE)
   ========================= */
@media (max-width: 768px) {
  /* 1. Chặn tràn ngang toàn bộ tab */
  #tab-description,
  #tab-description * {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* 2. FIX iframe Youtube */
  #tab-description iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }
  /* 3. FIX figure / wp-caption */
  #tab-description figure,
  #tab-description .wp-caption {
    width: 100% !important;
  }
  #tab-description img {
    width: 100% !important;
    height: auto !important;
  }
  /* 4. FIX div flex inline */
  #tab-description [style*="display: flex"] {
    flex-wrap: wrap !important;
  }
}
/*---style john_title---*/
.john_title {
    font-size: 2em;
		font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3em;
    position: relative;
    margin: 0;
    margin-bottom: 0.8em;
    padding-bottom: 1.3em;
		color: #ddd;
}
.john_title:before {
    position: absolute;
    bottom: 0.5rem;
    content: '';
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(to right, rgba(212, 175, 55, 0) 0%, rgba(212, 175, 55, 0.8) 40%, transparent 49%, transparent 51%, rgba(212, 175, 55, 0.8) 60%, rgba(212, 175, 55, 0) 100%);
}
.john_title:after {
    position: absolute;
    bottom: 0;
    content: "\f140";
    font-family: FontAwesome;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    line-height: 1;
    color: #ffd700;
}

/*---style sec_john_page---*/
.sec_john_page .page-box.box.has-hover {
    background-color: #f1f1f1;
        padding: 20px;
}
.sec_john_page .box-text p {
    color: #3a87c8;
    font-weight: 700;
}