/* Detail */

 .bg-left-modal {
     position: sticky;
     top: 0;
     left: 0;
     background-repeat: no-repeat;
     width: 136px;
     height: 100vh;
     z-index: 10;
     background-image: url('/images/bg-left.png');
 }

 .bg-right-modal {
     position: sticky;
     top: 0;
     right: 0;
     background-repeat: no-repeat;
     width: 136px;
     height: 100vh;
     z-index: 10;
     background-image: url('/images/bg-right.png');
 }

 #modalDetail .modal-dialog {
     top: 0 !important;
     margin-top: 0 !important;
     margin-bottom: 0 !important;
     max-width: 85vw;
 }

 #modalBook .modal-dialog {
     top: 0 !important;
     margin-top: 0 !important;
     margin-bottom: 0 !important;
     max-width: 85vw;
 }

 .container-product-detail {
     height: 100%;
     max-width: 100vw;
     padding: 0;
 }

 .img-product-detail {
     max-width: 70vw;
     height: 100vh;
     z-index: 0;
     object-position: center;
     object-fit: cover;
     filter: opacity(0.5);
 }

 #modalDetail .content-modal {
     max-width: 100%;
 }

 #modalBook .content-modal {
     max-width: 100%;
 }

 .icon-product-detail {
     width: 180px;
     height: 180px;
 }

 .wrapper-explainer-1 {
     max-width: 457px;
     min-height: 208px;
     padding: 0 24px;
 }

 .wrapper-explainer-2 {
     max-width: 457px;
     padding: 0 24px;
 }

 .wrapper-explainer-3 {
     max-width: 50vw;
     min-height: 252px;
     padding: 0 24px;
 }

 .wrapper-end-detail {
     min-height: 100vh;
     padding: 0 24px;
 }

 .logo-detail {
     max-width: 150px;
     max-height: 150px;
 }

 .img-product-background {
     width: 100vw;
     height: 100vh;
     z-index: 0;
     object-position: center;
     object-fit: cover;
     filter: opacity(0.5)
 }

 .detail-description {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     /* padding-inline: 156px; */
     padding-left: 156px;
     padding-right: 156px;
 }

 @media only screen and (max-width: 991px) {
     .detail-description {
         /* padding-inline: 136px; */
         padding-left: 136px;
         padding-right: 136px;
     }

     .icon-product-detail {
         width: 150px;
         height: 150px;
     }
 }

 @media only screen and (max-width: 650px) {
     #modalDetail .modal-dialog {
         max-width: 100vw;
     }

     #modalBook .modal-dialog {
         max-width: 100vw;
     }

     .bg-left-modal {
         width: 40px;
     }

     .bg-right-modal {
         width: 40px;
     }

     .img-product-detail {
         max-width: 100%;
     }

     .wrapper-explainer-3 {
         max-width: 100%;
         min-height: 252px;
         padding: 0;
     }

     .detail-description {
         padding-left: 40px;
         padding-right: 40px;
     }

     .icon-product-detail {
         width: 120px;
         height: 120px;
     }

 }

 @media only screen and (max-width: 600px) {
     .bg-left-modal {
         width: 40px;
     }

     .bg-right-modal {
         width: 40px;
     }

     #modalDetail .modal-dialog {
         max-width: 100vw;
     }

     #modalBook .modal-dialog {
         max-width: 100vw;
     }

     .icon-product-detail {
         width: 100px;
         height: 100px;
     }

 }

 @media only screen and (min-width: 0px) and (max-width: 400px) {
     .bg-left-modal {
         width: 20px;
     }

     .bg-right-modal {
         width: 20px;
     }

     #modalDetail .modal-dialog {
         max-width: 100vw;
     }

     #modalBook .modal-dialog {
         max-width: 100vw;
     }
 }