.page-title-pingpong { position: relative; background-color: var(--primary-color); background-image: repeating-linear-gradient(to right, var(--light-color) 0 var(--square-size), transparent var(--square-size) var(--cell-size)); background-repeat: repeat-x; background-size: auto 20px; background-position: bottom; color: var(--light-color); overflow: hidden } .page-title-pingpong::before { content: ""; display: none; position: absolute; bottom: 0; left: 0; width: var(--square-size); height: var(--square-size); background: var(--light-color); box-shadow: 0 0 10px var(--light-blue-color), 0 0 20px var(--light-blue-color), 0 0 40px var(--light-blue-color); } .page-title-pingpong-s2 { --square-size: 20px; --gap-size: 20px; --cell-size: calc(var(--square-size) + var(--gap-size)); --duration: 30s; position: relative; background-color: var(--steel-gray-color); background-image: repeating-linear-gradient(to right, var(--light-color) 0 var(--square-size), transparent var(--square-size) var(--cell-size)); background-repeat: repeat-x; background-size: auto 20px; background-position: bottom; color: var(--light-color); overflow: hidden } .page-title-pingpong-s2::before { content: ""; position: absolute; bottom: 0; left: 0; width: var(--square-size); height: var(--square-size); background: var(--light-color); box-shadow: 0 0 10px var(--light-blue-color), 0 0 20px var(--light-blue-color), 0 0 40px var(--light-blue-color); animation: pingpong var(--duration) linear infinite alternate } @keyframes pingpong { from { transform: translateX(0) } to { transform: translateX(calc(100vw - var(--cell-size))) } } .page-title-image { background-position: center; background-repeat: no-repeat; position: relative; min-height: clamp(40vh, 30vw, 44vh); color: #fff } .page-title-image::before { content: ""; position: absolute; background-color: rgba(var(--steel-gray-color-rgb), 0.55); width: 100%; height: 100%; top: 0; left: 0; z-index: 0 } .page-title-image .title-content { position: relative; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1 } .page-title-image .title-content div:first-child div:first-child { max-width: 800px } .section-title-s1 { color: var(--steel-gray-color); position: relative; padding-top: 1rem; margin-bottom: 1.3rem } .section-title-s1::before { content: ""; position: absolute; left: 50%; top: -2px; transform: translateX(-50%); width: 80px; height: 4px; background: var(--orange-color); border-radius: 4px } .section-title-s2 { position: relative; padding-left: 50px } .section-title-s2:before { content: ""; width: 35px; height: 4px; background: var(--primary-color); position: absolute; left: 0; top: 14px; border-radius: 4px } .section-title-s3 { position: relative; padding-top: 1rem } .section-title-s3::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 64px; border-radius: 8px; background: linear-gradient(90deg, var(--primary-color), var(--orange-color)); display: inline-block } .base-pagination { list-style: none; padding: 0; margin: 0 } .base-pagination li { display: inline-block; margin-bottom: .5rem } .base-pagination li:not(:last-child) { margin-right: .5rem } .base-pagination li a { display: inline-block; min-width: 2.5rem; height: 2.5rem; text-align: center; line-height: 2.5rem; padding-left: 1rem; padding-right: 1rem; background-color: var(--primary-color); color: var(--light-color); transition: background-color .3s } .base-pagination li a:hover { background-color: var(--orange-color) } .base-pagination li a.active { background-color: var(--orange-color) } .base-pagination-s2 { list-style: none; padding: 0; margin: 0 } .base-pagination-s2 li { display: inline-block; margin-bottom: .5rem } .base-pagination-s2 li:not(:last-child) { margin-right: .5rem } .base-pagination-s2 li a { display: inline-block; min-width: 2.5rem; height: 2.5rem; border-radius: 2.5rem; text-align: center; line-height: 2.5rem; padding-left: 1rem; padding-right: 1rem; background-color: var(--primary-color); color: var(--light-color); transition: background-color .3s } .base-pagination-s2 li a:hover { background-color: var(--orange-color) } .base-pagination-s2 li a.active { background-color: var(--orange-color) } .base-pagination-s3 { list-style: none; padding: 0; margin: 0 } .base-pagination-s3 li { display: inline-block; margin-bottom: .5rem } .base-pagination-s3 li:not(:last-child) { margin-right: .5rem } .base-pagination-s3 li a { display: inline-block; min-width: 2.5rem; height: 2.5rem; border-radius: 2.5rem; text-align: center; line-height: 2.5rem; padding-left: 1rem; padding-right: 1rem; background-color: rgba(var(--iron-gray-color-rgb), 0.55); color: var(--light-color); transition: background-color .3s } .base-pagination-s3 li a:hover { background-color: rgba(var(--iron-gray-color-rgb), 0.75) } .base-pagination-s3 li a.active { background-color: rgba(var(--iron-gray-color-rgb), 0.75) } .base-pagination-sm li:not(:last-child) { margin-right: .3rem } .base-pagination-sm li a { display: inline-block; min-width: 2rem; height: 2rem; line-height: 2rem; padding-left: .8rem; padding-right: .8rem; font-size: .85rem } .base-pagination-lg li:not(:last-child) { margin-right: .6rem } .base-pagination-lg li a { display: inline-block; min-width: 3.5rem; height: 3.5rem; line-height: 3.5rem; padding-left: 1.2rem; padding-right: 1.2rem; font-size: 1.1rem } .badge-cus { display: inline-block; font-weight: 500; line-height: 1; text-align: center; white-space: nowrap; vertical-align: middle; border-radius: var(--border-radius); padding: .5rem; font-size: .75rem } .badge-bestseller { background: linear-gradient(90deg, var(--primary-color), var(--orange-color)); color: #fff } .badge-hot { background: var(--orange-color); color: #fff } .badge-primary { background: var(--primary-color); color: #fff } .wishlist-list .wishlist-item { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-bottom: 2rem; box-shadow: 0 3px 8px rgba(0, 0, 0, .1); transition: transform .3s, box-shadow .3s; position: relative } .wishlist-list .wishlist-item img { width: 100% } .wishlist-list .wishlist-item .wishlist-body { display: flex; justify-content: space-between; align-items: left; flex-direction: column; flex: 1; padding: 1rem; width: 100% } .wishlist-list .wishlist-item .wishlist-body p { margin: 0; color: #6c757d; font-size: .95rem } .wishlist-list .wishlist-item .wishlist-body .wishlist-status { padding: 5px 12px; border-radius: 50px; font-size: .75rem; font-weight: 500; text-transform: uppercase; color: #fff } .wishlist-list .wishlist-item .wishlist-body .wishlist-status.status-available { background: var(--bs-success) } .wishlist-list .wishlist-item .wishlist-body .wishlist-status.status-limited { background: var(--bs-warning); color: #000 } .wishlist-list .wishlist-item .wishlist-body .wishlist-status.status-out { background: var(--bs-danger) } .wishlist-list .wishlist-item:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(0, 0, 0, .2) } @media(min-width: 992px) { .wishlist-list .wishlist-item { display: flex; justify-content: center; align-items: center; flex-direction: row } .wishlist-list .wishlist-item img { width: 140px; height: 140px; object-fit: cover } .wishlist-list .wishlist-item .wishlist-body { display: flex; justify-content: space-between; align-items: center; flex-direction: row; flex: 3 } } .list-product .filter-section { z-index: 90 } .section-product .thumbSlider { margin-top: 1rem; padding: 1rem; border-radius: var(--border-radius); background-color: var(--light-color) } .section-product .thumbSlider .swiper-slide { width: 90px; opacity: .6; cursor: pointer; border-radius: .5rem; overflow: hidden } .section-product .thumbSlider .swiper-slide img { width: 100%; height: 100%; object-fit: cover } .section-product .thumbSlider .swiper-slide-thumb-active { opacity: 1; border: 2px solid var(--primary-color); border-radius: .5rem } .section-product .review-box { max-height: 400px; overflow-y: auto } .section-product .review-box .review-item:not(:last-child) { border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 15px } .section-product .star { font-size: 22px; cursor: pointer; color: #ddd; transition: .2s } .section-product .star.active { color: #ffbf00 } .section-cart .cart-list img { width: 80px; height: 80px; object-fit: cover } .section-cart .cart-list h6 { margin-top: .3rem; margin-bottom: .3rem } .section-cart .cart-list .quantity { max-width: 120px } .content-pane h2 { margin-top: 50px; font-size: 34px } .content-pane h2:first-child{ margin-top: 0; } .content-pane h3 { font-size: 25px; line-height: 1.3; padding: 20px 0px } .content-pane h4 { font-size: 22px; line-height: 1.4; padding: 20px 0px } .content-pane h5 { font-size: 20px } .content-pane p { margin: 20px 0; font-size: 20px; line-height: 1.5; } .content-pane img,.content-pane video { width: 100%; max-width: 800px; height: auto; display: block; margin: 30px auto; } .content-pane ul li { font-size: 16px; line-height: 1.5; padding: 10px 0px } .content-pane .content_table{ overflow-x: auto; } .content-pane table { width: 100%; border-collapse: collapse; border: 0px; background: #fff; text-align: center } .content-pane table tr.tr-head td, .content-pane table .td-head, .content-pane table .table-tit td { background: #ffe9c9; color: #d27015; border: 1px solid #fdd9a4 } .content-pane table tr:nth-child(odd) { background: #f8f8f8 } .content-pane table td { border: 1px solid #eee; text-align: center; padding: 10px 0px; color: #333; line-height: 24px; padding: 5px; font-size: 16px; color: #666; font-weight: normal } .content-pane blockquote{ text-align: center; } .content-pane blockquote p { padding: 0px; margin: 0; background: #ffe9c8; display: inline-block; border-radius: 20px; padding: 5px 20px !important } #msg{ scroll-margin-top: 100px; } @media(max-width: 991px) { .tab-content .tab-pane{ padding: 1.5rem; } .content-pane h2 { margin-top: 30px; font-size: 25px } .content-pane h3 { font-size: 22px; padding: 20px 0px } .content-pane h4 { font-size: 19px; padding: 20px 0px } .content-pane h5 { font-size: 17px } .content-pane p { margin: 20px 0; font-size: 16px; } .content-pane img,.content-pane video { margin: 20px auto; } }