/* bootstrap-product */
section.product .carousel{
   position: relative;
   display: flex;
   width: 100%;
}

section.product .carousel.pointer-event {
   -ms-touch-action: pan-y;
   touch-action: pan-y
}

section.product .carousel-inner {
   position: relative;
   width: 100%;
   overflow: hidden
}

section.product .carousel-inner::after {
   display: block;
   clear: both;
   content: ""
}

section.product .carousel-item {
   position: relative;
   display: none;
   float: left;
   width: 100%;
   margin-right: -100%;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   transition: -webkit-transform 1s cubic-bezier(0.58, 0.9, 0.5, 1.1);
   transition: transform 1s cubic-bezier(0.58, 0.9, 0.5, 1.1);
   transition: transform 1s cubic-bezier(0.58, 0.9, 0.5, 1.1), -webkit-transform 1s cubic-bezier(0.58, 0.9, 0.5, 1.1);
}

section.product h1.title {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   width: auto;
   font-weight: normal;
   margin-top:12vh;
}

section.product .tabs-in-book-and-vdo .nav>li {
   position: relative;
   display: block;
   margin-left: 4rem;
}

.product .flex-book {
   display: flex;
   justify-content: center;
}

.border-pd {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 40vw;
}

section.product .carousel-item img.img-pd-in-tap {
   width: 30vw;
   height: fit-content;
   z-index: +1;
}

section.product .carousel-item img.img-ingree {
   position: absolute;
   width: 30vw;
   height: fit-content;
   transform: scale(0);
   transition: all 0.6s cubic-bezier(0.58, 0.9, 0.5, 1.1);
   transition: -webkit-transform .6s cubic-bezier(0.58, 0.9, 0.5, 1.1);
   transition: transform .6s cubic-bezier(0.58, 0.9, 0.5, 1.1), -webkit-transform .6s cubic-bezier(0.58, 0.9, 0.5, 1.1);
}

section.product .carousel-item.active img.img-ingree {
   transform: scale(1);
}


@media (prefers-reduced-motion:reduce) {
   section.product .carousel-item {
      transition: none
   }
}

.p-ind-p {
   position: relative;
   display: flex;
   align-items: center;
   width: 15vw;
}


section.product .carousel-item-next,
section.product .carousel-item-prev,
section.product .carousel-item.active {
   display: block
}

.active.carousel-item-right,
.carousel-item-next:not(.carousel-item-left) {
   -webkit-transform: translateX(100%);
   transform: translateX(100%)
}

section.product .active.carousel-item-left,
section.product .carousel-item-prev:not(.carousel-item-right) {
   -webkit-transform: translateX(-100%);
   transform: translateX(-100%)
}

section.product .carousel-fade .carousel-item {
   opacity: 0;
   transition-property: opacity;
   -webkit-transform: none;
   transform: none
}

section.product .carousel-fade .carousel-item-next.carousel-item-left,
section.product .carousel-fade .carousel-item-prev.carousel-item-right,
section.product .carousel-fade .carousel-item.active {
   z-index: 1;
   opacity: 1
}

section.product .carousel-fade .active.carousel-item-left,
section.product .carousel-fade .active.carousel-item-right {
   z-index: 0;
   opacity: 0;
   transition: opacity 0s .6s
}

@media (prefers-reduced-motion:reduce) {

   section.product .carousel-fade .active.carousel-item-left,
   section.product .carousel-fade .active.carousel-item-right {
      transition: none
   }
}

section.product .carousel-control-next,
section.product .carousel-control-prev {
   position: relative;
   top: 0;
   bottom: 0;
   z-index: 1;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
   align-items: center;
   -ms-flex-pack: center;
   justify-content: center;
   color: #fff;
   text-align: center;
   opacity: .5;
   transition: opacity .15s ease
}

@media (prefers-reduced-motion:reduce) {

   section.product .carousel-control-next,
   section.product .carousel-control-prev {
      transition: none
   }
}

section.product .carousel-control-next:focus,
section.product .carousel-control-next:hover,
section.product .carousel-control-prev:focus,
section.product .carousel-control-prev:hover {
   color: #fff;
   text-decoration: none;
   outline: 0;
   opacity: .9
}

section.product .carousel-control-prev {
   left: 0
}

section.product .carousel-control-next {
   right: 0
}

section.product .carousel-control-next-icon,
section.product .carousel-control-prev-icon {
   display: inline-block;
   width: 20px;
   height: 20px;
   background: no-repeat 50%/100% 100%
}

section.product .carousel-control-prev-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e")
}

section.product .carousel-control-next-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e")
}


/* // list-pd-name add By Ying :08-03-24 // */
section.product .carousel-indicators-new {
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
   z-index: 15;
   list-style: none;
   padding-left: 3rem;
}

section.product .carousel-indicators-new li {
   position: relative;
   box-sizing: content-box;
   transition: opacity .6s ease;
   font-family: Arial, Helvetica, sans-serif;
}

section.product .carousel-indicators-new li .p-cookbook{
   position: relative;
   font-size: 1vw;
   font-weight: bold;
   text-transform: uppercase;
   margin: 1rem 0;
   transition: opacity 0.6s ease;
}

@media (prefers-reduced-motion:reduce) {
   section.product .carousel-indicators-new li {
      transition: none
   }
}

section.product .carousel-indicators-new .active {
   opacity: 1
}

section.product .carousel-indicators-new .active .p-name-pd {
   opacity: 1;
   color: #d3b26b;
}
/* // list-pd-name add By Ying :08-03-24 // */




section.product .carousel-indicators {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   z-index: 15;
   list-style: none;
   margin-left: 0;
   margin-right: 0;
}

section.product .carousel-indicators li {
   position: absolute;
   box-sizing: content-box;
   opacity: .5;
   transition: opacity .6s ease;
   height: fit-content;
   width: fit-content;
   background-color: transparent;
}

section.product .carousel-indicators li p.p-name-pd{
   font-family: "Arnova ITC";
   color: gold;
   color: #d3b26b;
   position: relative;
   text-align: center;
   text-transform: capitalize;
   font-size: 1.5vw;
   opacity: 0;
   transition: opacity 0.6s ease;
}

@media (prefers-reduced-motion:reduce) {
   section.product .carousel-indicators li {
      transition: none
   }
}

section.product .carousel-indicators .active {
   opacity: 1
}

section.product .carousel-indicators .active p.p-name-pd {
   opacity: 1;
}

section.product .carousel-caption {
   position: absolute;
   right: 15%;
   bottom: 20px;
   left: 15%;
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;
   color: #fff;
   text-align: center
}

@-webkit-keyframes spinner-border {
   to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg)
   }
}

@keyframes spinner-border {
   to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg)
   }
}

.spinner-border {
   display: inline-block;
   width: 2rem;
   height: 2rem;
   vertical-align: text-bottom;
   border: .25em solid currentColor;
   border-right-color: transparent;
   border-radius: 50%;
   -webkit-animation: spinner-border .75s linear infinite;
   animation: spinner-border .75s linear infinite
}

.spinner-border-sm {
   width: 1rem;
   height: 1rem;
   border-width: .2em
}

@-webkit-keyframes spinner-grow {
   0% {
      -webkit-transform: scale(0);
      transform: scale(0)
   }

   50% {
      opacity: 1;
      -webkit-transform: none;
      transform: none
   }
}

@keyframes spinner-grow {
   0% {
      -webkit-transform: scale(0);
      transform: scale(0)
   }

   50% {
      opacity: 1;
      -webkit-transform: none;
      transform: none
   }
}


.rounded-circle {
   border-radius: 50% !important
}

.d-block {
   display: block !important
}


.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
   position: static;
   width: auto;
   height: auto;
   overflow: visible;
   clip: auto;
   white-space: normal
}


.pb-3 {
   padding-bottom: 1rem !important
}

.m-auto {
   margin: auto !important
}

.text-center {
   text-align: center !important
}
/*# sourceMappingURL=bootstrap.min.css.map */







/******************** OUR product ******************  */


/* =======================================
list menu link
======================================= */

.product .link-menu-product {
   position: relative;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-pack: center;
   margin-right: auto;
   margin-left: auto;
   justify-content: center;
   flex-direction: column;
}
.name-aria {
   width: 15vw;
   margin-bottom: 5vh;
}

.name-aria span {
   font-size: 1.3rem;
   display: block;
   width: max-content;
}

.product .link-menu-product ul {
   width: 15vw;
}



/* list-pd-menu New By Ying 07-03-24 */


.product .list-pd-menu a {
   display: block;
   text-decoration: none;
   text-transform: capitalize;
   font-family: Arial, Helvetica, sans-serif;
}

.product .list-pd-menu a:hover,
.product .list-pd-menu a:focus,
.product .list-pd-menu a:active {
   color: #d3b26b;
}


.product .list-pd-menu>li a.list-pd-name-cat {
   padding: 10px 20px;
}




.product .list-pd-name-subnav {
   display: none;
   padding: 1.5rem;
}

.img-yellow {
   height: 15vh;
   position: absolute;
   left: -30%;
   top: 3ch;
}

/* =======================================
list menu link
======================================= */
/******************** OUR product ******************  */





.product .name-in-section {
   width: fit-content;
   padding-bottom: 2rem;
}

.product .name-in-section h4 {
   letter-spacing: 3px;
}



[ripple] {
   z-index: 1;
   position: relative;
   overflow: hidden;
}

[ripple] .ripple {
   position: relative;
   background: #FFFFFF;
   width: 12px;
   height: 12px;
   border-radius: 100%;
   -webkit-animation: ripple 1.6s;
   animation: ripple 1.6s;
}

@-webkit-keyframes ripple {
   0% {
      transform: scale(1);
      opacity: 0.2;
   }

   100% {
      transform: scale(40);
      opacity: 0;
   }
}

@keyframes ripple {
   0% {
      transform: scale(1);
      opacity: 0.2;
   }

   100% {
      transform: scale(40);
      opacity: 0;
   }
}

.product .in-tabs {
   position: relative;
   width: 100%;
   height: 60vh;
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
}

.product .tabs-header {
   position: relative;
   width: 30%;
   overflow: hidden;
   padding-left: 2rem;
}

.product .tabs-header .border {
   position: absolute;
   background-image: url('img/PRODUCT/yellow-line.png');
   background-position: center bottom;
   background-size: cover;
   width: 10px;
   height: auto;
   transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
}

.product .border2 {
   position: absolute;
   background-image: url('img/PRODUCT/yellow-line.png');
   background-position: center bottom;
   background-size: cover;
   width: 10px;
   height: auto;
   transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
}

.product .tabs-header ul {
   display: flex;
   flex-direction: column;
   height: 100%;
   list-style: none;
   align-content: flex-start;
   justify-content: flex-start;
}

.product .tabs-header ul li {
   transition: 0.3s ease;
   width: 100%;
   position: relative;
   padding-left: 1rem;
}

.product .tabs-header ul li.active {
   height: 18vh;
}

.product .tabs-header a {
   z-index: 1;
   display: block;
   box-sizing: border-box;
   height: 3em;
   display: flex;
   align-items: center;
   text-align: start;
   color: #FFFFFF;
   font-weight: 500;
   text-decoration: none;
   text-transform: capitalize;
   transition: 0.3s ease;
   font-family: Arial, Helvetica, sans-serif;
}

/* test txt in tab */
.product .tabs-header a:hover {
   color: #d3b26b;
}

.product .in-tab1 {
   position: relative;
   opacity: 0;
   height: 100%;
   align-items: center;
   transition: all 0.3s  cubic-bezier(0.215, 0.61, 0.355, 1);
}

.product .in-tab1 p {
   text-transform: none;
   font-family: Arial;
   text-align: start;
   padding-left: 1rem;
   transform: translateY(-10px);
   transition: all 0.3s ease;
}

.product .tabs-header li.active .in-tab1 p {
   transform: translateY(0);
}

.product .tabs-header li.active .in-tab1 {
   display: flex;
   opacity: 1;
}


.product .tabs-header li.active a {
   color: #d3b26b;
   position: absolute;
   width: 100%;
}

/* test txt in tab */
.product .tabs-nav {
   position: absolute;
   bottom: 50%;
   right: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 10px;
   color: #FFFFFF;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   width:50vw;
}

.product .tabs-nav i {
   position: relative;
   cursor: pointer;
   height: 50px;
   width: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
   
   font-family: sans-serif;
   border: solid 1px #fff;
   border-radius: 5px;
}

.product .tabs-content {
   position: relative;
   transition: 0.3s ease;
   width: 100%;
   height: 50vh;
}

.product .tabs-content .tab {
   width: 100%;
   height: 50vh;
   margin-top: 50px;
   transition: ease 0.3s;
   display: none;
   text-align: center;
   opacity: 0;

}

.product .tabs-content .tab.active {
   display: block;
   opacity: 1;
   margin-top: 0;
   justify-content: center;
   align-items: center;
}

.product .tabs-content .tab img.show-img-pd-03 {
   transition: all 0.50s cubic-bezier(0.58, 0.9, 0.5, 1.1);
   width: 0%;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

.product .tabs-content img.show-img-pd-01,
.product .tabs-content img.show-img-pd-02 {
   transition: all 0.50s cubic-bezier(0.58, 0.9, 0.5, 1.1);
   transition-delay: 0.2s;
   width: 20vw;
   position: absolute;
   left: 33%;
   opacity : 0;
}

.product img.show-img-pd-01 {
   transform: rotate(0.25turn);
}

.product img.show-img-pd-02 {
   transform: rotate(-0.25turn);
}

.product .tabs-content .tab.active img.show-img-pd-03 {
   width: 40vw;
   opacity: 1;
}

.product .tabs-content .tab.active img.show-img-pd-01,
.product .tabs-content .tab.active img.show-img-pd-02 {
   width: 40vw;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   opacity: 1;
}

@media screen and (max-width: 1024px) {
   section.product .tabs-in-book-and-vdo .nav>li {
      margin-left: 1rem;
   }
}

@media screen and (max-width: 1440px) {
   
   .product .tabs-content img.show-img-pd-01,
   .product .tabs-content img.show-img-pd-02 {
      transition: all 0.50s cubic-bezier(0.58, 0.9, 0.5, 1.1);
      transition-delay: 0.2s;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      width: 20vw;
      position: absolute;
      opacity : 0;
   }
   
   .product img.show-img-pd-01 {
      transform: rotate(0.25turn);
   }
   
   .product img.show-img-pd-02 {
      transform: rotate(-0.25turn);
   }
   
   .product .tabs-content .tab.active img.show-img-pd-01,
   .product .tabs-content .tab.active img.show-img-pd-02 {
      width: 50vw;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      opacity: 1;
   }

   .product .tabs-content .tab.active img.show-img-pd-03 {
      width: 50vw;
      opacity: 1;
   }
}


.tabs-in-book-and-vdo .tab-content-pd>.tab-pane {
   position: relative;
   display: none;
   width: 100%;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   transition: .6s ease-in-out;
}

.tabs-in-book-and-vdo .tab-content-pd>.tab-pane.active {
   display: block;
}

.link-menu-product {
   position: relative;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-pack: center;
   margin-right: auto;
   margin-left: auto;
   justify-content: center;
   flex-direction: column;
}

section.product .link-menu-cookbook ul {
   width: 15vw;
}

.tabs-in-book-and-vdo .tab-content-pd>.tab-pane-semi {
   position: relative;
   display: none;
   width: 100%;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   transition: .6s ease-in-out;
}

.tabs-in-book-and-vdo .tab-content-pd>.tab-pane-semi.active {
   display: block;
}