.img-responsive {

  max-width: 100%;

  height: auto;

}

.btn-reg {

  padding-top: 8px;

}

.btn_fixed {

  position: fixed;

  bottom: 35px;

  right: 30px;

  cursor: pointer;

  z-index: 99;

}

.btn_fixed img {

  margin: 0 auto;

}

/*Form Đăng Ký Pop-up*/

.form-dk {

  position: relative;

  /*background: url(../images/pc/Khung-DangKy-1.png) no-repeat top center;*/

  margin: 0 auto;

  flex: 0 0 auto;

  height: 100%;

  width: auto;

  z-index: 90;

}

.form-group {

  text-align: center;

}

.info-form-dk {

  flex: 0 0 auto;

  width: 100%;

}

.form-horizontal {

  padding: 0 0px;

  color: black;

  width: 80%;

  margin: 0 auto;

  text-align: center;

}

.form-title_pop {

  padding-bottom: 10px;

  padding-top: 10px;

}

.form-title_pop span {

  color: red;

  font-size: 28px;

  font-weight: 700;

  font-family: ui-sans-serif;

}

.form-buttonpc {

  /* top: 91%; */

  position: relative;

  text-align: center;

  margin: 0 auto;

  bottom: 0px;

}

/*form-dk-frame-1*/

.signup-form {

  display: grid;

  grid-auto-rows: auto;

  grid-row-gap: 1rem;

  align-items: center;

  padding: 0 2rem;

}

.signup-form input,

.signup-form select {

  display: block;

}

.signup-form select {

  height: 100%;

  display: block;

}

.signup-form input:not([type='checkbox']),

.signup-form select {

  border: 1px solid #006eac;

  border-radius: 8px;

  padding: 0.7rem 0.5rem;

  font: inherit;

}

.signup-form input[type='text'],

.signup-form input[type='tel'],

.signup-form select {

  width: 100%;

  height: 2.7rem;

  font-size: 1rem;

}

/* The Modal*/

.modal,

.modal_popup {

  display: none; /* Hidden by default */

  position: fixed; /* Stay in place */

  z-index: 9999999; /* Sit on top */

  padding-top: 100px; /* Location of the box */

  left: 0;

  top: 0;

  width: 100%; /* Full width */

  height: 100%; /* Full height */

  overflow: auto; /* Enable scroll if needed */

  background-color: rgb(0, 0, 0); /* Fallback color */

  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */

}

/* Modal Content */

.modal-content {

  position: relative;

  margin: auto;

  padding: 0;

  max-width: 470px;

  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);

  -webkit-animation-name: animatetop;

  -webkit-animation-duration: 0.4s;

  animation-name: animatetop;

  animation-duration: 0.4s;

  border-radius: 25px;

}

/* Add Animation */

@-webkit-keyframes animatetop {

  from {

    top: -300px;

    opacity: 0;

  }

  to {

    top: 0;

    opacity: 1;

  }

}

@keyframes animatetop {

  from {

    top: -300px;

    opacity: 0;

  }

  to {

    top: 0;

    opacity: 1;

  }

}

/* The Close Button */

.close,

.close_popup,

.close_popup_auto {

  color: red;

  font-size: 32px;

  font-weight: bold;

  position: absolute;

  right: 20px;

  top: 7px;

  z-index: 3;

}

.close:hover,

.close:focus,

.close_popup:hover,

.close_popup:focus,

.close_popup_auto:hover,

.close_popup_auto:focus  {

  color: #fff;

  text-decoration: none;

  cursor: pointer;

}

.modal-header {

  background: #005395;

  border-top-left-radius: 30px;

  border-top-right-radius: 30px;

  padding: 15px;

  border-bottom: 1px solid #e5e5e5;

}

.modal-header h2 {

  text-align: center;

  color: #ffffff;

  font-size: 20px;

}

.modal-body {

  position: relative;

  /*background: url(../images/daihoi/bg-form-pc.png.webp) no-repeat top center;*/

  background-color: white;

  padding: 15px 25px;

  text-align: center;

  border-radius: 25px;

}

.modal-body .form-title {

  margin-bottom: 1rem;

}

span.title-form-popup {

  font-weight: bold;

  font-size: 1.3rem;

  color: #ac020b;

}

span.title-form-popup-1 {

  font-size: 1.5rem;

  color: #ac020b;

  font-weight: 600;

  line-height: 1.8rem;

  letter-spacing: 0.3rem;

}

.frm-title {

  margin-top: 1rem;

  font-size: 1.2rem;

  font-weight: 700;

  color: rgb(35, 129, 195);

}

form#frmContactPop {

  margin-top: 20px;

}

.container_1 {

  max-width: 100%;

}

.frame-flex-col {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}

.frame-flex-row {

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: center;

}

@media all and (max-width: 600px) {

  .frame-flex-row {

    flex-direction: column;

  }

}

div#errPositon {

  color: #004a96;

  transform: translateY(-10px);

}

/* Hien thi backgroup form dang ky */

.form-background {

  background: #f5f5f5;

  margin: 0 auto;

  width: 26rem;

  height: 17rem;

  min-height: 17rem;

  min-width: 26rem;

  display: block;

  text-align: center;

  position: relative;

  border-radius: 20px;

  z-index: 999;

  padding: 1rem 0 0;

  transform: translateY(0px);

}

img.image-title-km-3 {

  padding: 0 1rem 1rem;

}

.parallax {

  /* The image used */

  /* background: url(../images/pc-fix/ldp-sacdepmynu-desktop-07.webp); */

  background: #fff;

  /* background-image: linear-gradient(to bottom right, #003870, #006eac); */

  /* background-image: radial-gradient(#003870, #006eac); */

  /* Full height */

  height: auto;

  /* Create the parallax scrolling effect */

  background-attachment: fixed;

  background-position: center;

  background-repeat: no-repeat;

}

.parallax-mb {

  /* The image used */

  /* background: url(../images/mb-fix/cutcode-hoithaoniengrang-mobi-05.webp); */

  /* background-image: linear-gradient(to bottom right, #003870, #006eac); */

  background: #fff;

  /* background-image: radial-gradient(#003870, #006eac); */

  /* Full height */

  -webkit-background-size: cover;

  -moz-background-size: cover;

  background-size: cover;

  position: fixed;

  top: 0;

  width: 100vw;

  height: 200vh;

  z-index: -1;

}

.frameOne,

.frameTwo,

.frameThree,

.frameFour,

.frameFive,

.frameSix,

.frameSeven {

  position: relative;

  max-width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  margin: 0 auto;

  flex-direction: column;

}

.frameTwo {

  margin: 0 auto;

}

img.frameTwo-hieuung {

  position: absolute;

  top: -20px;

}

.frameThree {

    z-index: 1;

    margin: 0 auto;

}

.frameFour {

    margin: -5px auto -2px auto;

    z-index: 0;

}

img.frameFour-footer {

    position: absolute;

    z-index: 2;

    bottom: 15px;

}

.frameFive {

  background: #005377;

}

/* Lazy load */

.lazy {

  filter: blur(10px); /* Apply a blur effect to the placeholder */

  transition: filter 0.3s; /* Add a transition effect when the image is loaded */

}

.lazy-loaded {

  filter: blur(0); /* Remove the blur effect when the image is loaded */

}



/* Slider */



.slider-container {

  position: relative;

  width: 50%; /* Adjust as needed */

  height: auto; /* Adjust as needed */

  overflow: hidden;

  z-index: 2;

  margin: 1rem auto;

}



.slider {

  display: flex;

  transition: transform 0.5s;

}



.slide {

  flex: 0 0 100%; /* Ensure each slide takes full width */

}



.slider img {

  width: 100%;

  height: auto;

}



.slider-nav {

  position: absolute;

  top: 45%;

  left: 10px; /* Adjust the positioning as needed */

  transform: translateY(-45%);

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: calc(100% - 20px); /* Adjust the width as needed */

  display: none;

}



.slider-nav button {

  width: 30px; /* Adjust the button size as needed */

  height: 30px;

  background-color: transparent;

  border: none;

  cursor: pointer;

  /* Add your custom arrow styles */

}



.slider-nav .prev::before,

.slider-nav .next::before {

  content: '';

  display: inline-block;

  width: 0;

  height: 0;

  border-style: solid;

}



.slider-nav .prev::before {

  border-width: 8px 8px 8px 0;

  border-color: transparent red transparent transparent;

  margin-right: 5px;

}



.slider-nav .next::before {

  border-width: 8px 0 8px 8px;

  border-color: transparent transparent transparent red;

  margin-left: 5px;

}

.navigation-auto {

  display: flex;

  justify-content: center;

  align-items: center;

  margin-top: 10px;

}



.navigation-auto div {

  width: 10px;

  height: 10px;

  background-color: #fff;

  border-radius: 50%;

  opacity: 0.5;

  margin: 0 5px;

  cursor: pointer;

  transition: opacity 0.3s;

}



.navigation-auto div.active {

  opacity: 1;

  color:#fff;

}



/*// css sang nguyễn*/

  .hotline-oder-ring-wrap {

    position: fixed;

    bottom: 100px;

    right: 100px;

    z-index: 100;

}

.oder-bar {

    position: absolute;

    background: rgb(163 0 0 / 85%);

    height: 70px;

    width: 160px;

    padding: 0 10px;

    cursor: pointer;

    transition: all .8s;

    -webkit-transition: all .8s;

    z-index: 9;

    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .1);

    border-radius: 50px !important;

    left: 33px;

    bottom: 32px;

    background: #fff;

}

.text-oder{

    padding-left: 50px;

    margin-top: 10px;

    color: #d00;

    font-weight: 800;

}

.oder-ring-circle-fill {

    width: 100px;

    height: 100px;

    top: -5px;

    left: -10px;

    position: absolute;

    background-color: #e3aeae;

    border-radius: 100%;

    border: 2px solid transparent;

    transition: all .5s;

    -ms-transform-origin: 50% 50%;

    transform-origin: 50% 50%;

    animation: ring-scale-pulse-oder-book 2s infinite;

}



.hotline-oder-ring-img-circle {

    background-color: #fff;

    width: 80px;

    height: 80px;

    top: 5px;

    left: 0px;

    position: absolute;

    background-size: 20px;

    border-radius: 100%;

    border: 2px solid transparent;

    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;

    animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;

    -webkit-transform-origin: 50% 50%;

    -ms-transform-origin: 50% 50%;

    transform-origin: 50% 50%;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    align-items: center;

    justify-content: center;

}



.frame-fahasa {

    position: relative;

}

.frame-fahasa-image-one img {

    width:100%;

}

.frame-fahasa-image-two {

    position: absolute;

    bottom: 10%;

    left: 50%;

    transform: translate(-50%, -50%);

}

.frame-fahasa-image-two img {

    width: 55%;

    animation: scale-up 1s infinite alternate;

}



@keyframes scale-up {

    0% {

        transform: scale(1);

    }

    100% {

        transform: scale(1.1);

    }

}





@keyframes ring-scale-pulse-oder-book {

    0% {

        -webkit-transform: rotate(0) scale(.7) skew(1deg);

        opacity: .6;

    }

    50% {

        -webkit-transform: rotate(0) scale(1) skew(1deg);

        opacity: .6;

    }

    100% {

        -webkit-transform: rotate(0) scale(.7) skew(1deg);

        opacity: .6;

    }

}

.oder-book-ring-circle {

    width: 120px;

    height: 120px;

    top: -15px;

    left: -20px;

    position: absolute;

    background-color: #e3aeae;

    border-radius: 100%;

    border: 2px solid #e8bebe;

    -webkit-animation: oder-book-circle-anim 1.2s infinite ease-in-out;

    animation: oder-book-circle-anim 1.2s infinite ease-in-out;

    transition: all .5s;

    -webkit-transform-origin: 50% 50%;

    -ms-transform-origin: 50% 50%;

    transform-origin: 50% 50%;

    opacity: .5;

}



@keyframes oder-book-circle-anim {

    0% {

        transform: rotate(0) scale(.5) skew(1deg);

        opacity: .1;

    }

    

    30% {

        transform: rotate(0) scale(.7) skew(1deg);

        opacity: .5;

    }

    

    100% {

        transform: rotate(0) scale(1) skew(1deg);

        opacity: .1;

    }

}

.text-oder {

    font-family: monospace;

    white-space: nowrap;

    overflow: hidden;

}

#typing-text {

    display: inline-block;

}

#line1, #line2 {

    display: inline-block;

    border-right: 2px solid black;

    white-space: nowrap;

    overflow: hidden;

    animation: blink 0.75s step-end infinite;

}

@keyframes blink {

    50% { border-color: transparent; }

}

.input-name-oder-book{

    width: 100%;

    margin: 10px 0 10px;

    height: 50px;

    border-radius: 10px;

    border: 1px solid #005379;

    padding: 10px;

    color: #005379;

}

.button-name-oder-book{

    width: 100%;

    margin: 10px 0 10px;

    height: 50px;

    border-radius: 10px;

    border: 1px solid #dd000055;

    color: #fff;

    background: #dd0000;

    font-size: 16px;

    cursor: pointer;

}

.button-name-oder-book:hover{

    background: #7f0000;

}

.titleoderbook{

    margin: 0;

    display: inline-block;

    font-weight: 800;

    color: #d00;

    font-size: 20px;

    margin-bottom: 10px;

    

}

.texttitlteoder{

    text-align: center;

}

/* Modal styles */

.modalPopupOrderBook {

  display: none; 

  position: fixed;

  z-index: 1;

  left: 0;

  top: 0;

  width: 100%; 

  height: 100%;

  overflow: auto;

  background-color: rgb(0,0,0); 

  background-color: rgba(0,0,0,0.4);

}

.modal-content-OrderBook {

    background-color: #fefefe;

    margin: 15% auto;

    padding: 20px;

    border: 1px solid #88888855;

    width: 35%;

    border-radius: 20px;

    position: relative;

}

.close-button-OrderBook {

    color: #dd0000;

    font-size: 40px;

    font-weight: 700;

    position: absolute;

    right: 0;

    top: 0;

}

.close-button-OrderBook:hover,

.close-button-OrderBook:focus {

  color: black;

  text-decoration: none;

  cursor: pointer;

}



/*css thông báo ảo mua sản phẩm */

.notifications-container {

    position: fixed;

    bottom: 10px;

    left: 10px;

    width: 300px;

    z-index:99999;

}



.notification {

    background-color: #f0f0f0;

    padding: 10px 20px;

    border-radius: 5px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    margin-bottom: 10px;

    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;

    transform: translateY(20px);

    opacity: 0;

}



.notification.show {

    transform: translateY(0);

    opacity: 1;

}

    .hotline-oder-ring-img-circle {

    background-color: #fff;

    width: 80px;

    height: 80px;

    top: 5px;

    left: 0px;

    position: absolute;

    background-size: 20px;

    border-radius: 100%;

    border: 2px solid transparent;

    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;

    animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;

    -webkit-transform-origin: 50% 50%;

    -ms-transform-origin: 50% 50%;

    transform-origin: 50% 50%;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    align-items: center;

    justify-content: center;

}

.hotline-bar-oder {

    position: absolute;

    background: rgb(163 0 0 / 85%);

    height: 50px;

    width: 160px;

    line-height: 41px;

    border-radius: 3px;

    padding: 0 10px;

    background-size: 100%;

    cursor: pointer;

    transition: all .8s;

    -webkit-transition: all .8s;

    z-index: 9;

    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .1);

    border-radius: 50px !important;

    left: 33px;

    bottom: 35px;

    background: #fff;

}

.hotline-bar-oder>a {

    color: #bd1a16;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    text-indent: 50px;

    display: block;

    letter-spacing: 0;

    line-height: 50px;

    text-transform: uppercase;

    font-family: Arial;

}

.container-from{

    max-width:600px;

}

.container-from{

    max-width:800px;

}

.texttitltbank{

    color:#015367;

}



 /*<!--/new tabs-->*/

.book-ldp-tabs {

flex: 2;

display: flex;

flex-direction: column;

}

.tab-links {

padding-right: 10px;

}

.tab-button {

background-color: #fff;

border: none;

padding: 10px;

/*width: 100%;*/

text-align: left;

cursor: pointer;

margin-bottom: 5px;

border-radius: 25px;

border: 1px solid #00000055;

}



.tab-button.active {

background-color: #0273b3;

color: #fff;

}



.tab-contents {

text-align: justify;

padding: 10px 20px;

max-height: 1000px;

overflow-y: auto;

background: #fff;

}

.tab-contents::-webkit-scrollbar {

width: 6px;

}

.tab-contents::-webkit-scrollbar-thumb {

background-color: #888;

border-radius: 3px;

}



.tab-contents::-webkit-scrollbar-thumb:hover {

    background-color: #555; /* Màu thanh cuộn khi hover */

}

.product-thumbnail-two img{

    width:100%;

}



.tab-contents::-webkit-scrollbar-track {

    background: #f1f1f1; /* Màu nền của track thanh cuộn */

}

.pagination-mb {

    margin: 0 20px;

    display: grid;

    grid-template-columns: 70% 30%;

    align-items: center;

    gap: 5px;

}

  form input,

  form button {

    display: block;

    margin: 10px 0;

    padding: 10px;

    width: 100%;

  }



  .close {

    color: #aaa;

    font-size: 28px;

    font-weight: bold;

    position: absolute;

    top: 10px;

    right: 10px;

  }



  .close:hover,

  .close:focus {

    color: rgb(255, 0, 0);

    text-decoration: none;

    cursor: pointer;

  }

    .tab-content-order p{

        font-size:20px;

        line-height: 1.4;

    }

  .book-ldp-tabs-display-flex {

    display: grid;

    grid-template-columns: 75% 25%;

    gap: 10px;

  }

  .modal-images-order-book {

    overflow: hidden;

    padding: 0 20px;

   

  }

  .modal-images-order-book img {

      width:100%;

  }

  .image-tab2,

  .image-tab3 {

    width: 90%;

  }

  .product-view-sa_one {

    display: inline-block;

  }

  .product-view-sa-supplier {

    display: inline-block;

    width: 100%;

    padding-right: 15px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

  }

  .product-view-sa-supplier span:first-child {

    padding-right: 5px;

  }

  .product-view-sa-supplier span:nth-of-type(2) {

    font-weight: bold;

  }

  .product-view-sa-author {

    display: inline-block;

    width: 100%;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

  }

  .block-content-product-detail {

    padding: 16px 16px 0px 16px;

    margin: 0px;

    border-radius: 8px;

    background: white;

    margin-bottom: 12px;

    font-size: 20px;

  }

    .price-order-single {

    font-size: 32px;

    line-height: 32px;

    color: #c92127;

    font-weight: 700;

  }

.table-label {

    display: table-cell;

    padding-left: 0 !important;

    font-weight: 500;

    line-height: 1.2;

    text-align: left;

    white-space: nowrap;

    vertical-align: baseline;

    color: #777;

}

  .product_view_tab_content_ad .data-table tr td,

  .product_view_tab_content_ad .data-table tr th {

    border-bottom: 0.5px solid #f2f4f5;

    padding: 5px 4px;

  }

  .data-table tbody th,

  .data-table tbody td {

    border: none;

  }

  .modal-product-oder {

    display: flex;

    justify-content: space-between;

    align-items: center;

    justify-items: center;

    color: #015367;

    margin-top: 5px;

  }

  .tab-links-button {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap:10px;

  }

  .tab-links-button p {

    margin: 0;

    font-size: 18px;

    color: #015367;

  }

  

.input-name-oder-book-single {

    width: 100%;

    margin: 10px 0 10px;

    height: 50px;

    border-radius: 25px;

    border: 1px solid #005379;

    padding: 10px;

    color: #005379;

}



.texttitlteoder {

    text-align: center;

}

.custom-placeholder::placeholder {

    color: #005379; /* Màu chữ bạn muốn */

}

.titleoderbook {

    margin: 0;

    display: inline-block;

    font-weight: 700;

    color: #d00;

    font-size: 20px;

    margin-bottom: 10px;

}

.button-name-oder-book {

    width: 100%;

    margin: 10px 0 10px;

    height: 50px;

    border-radius: 25px;

    border: 1px solid #dd000055;

    color: #fff;

    background: #d00;

    font-size: 16px;

    cursor: pointer;

}

.texttitltbank {

    color: #015367;

}

.modal-order-book::-webkit-scrollbar {

    width: 0;

    height: 0;

}

/*<!--/end new tabs-->*/

/*<!--/new LDP-->*/

.book-section-all{

     position: relative;

}

.book-section-top{

    max-width:1300px;

    margin: 50px auto 0;

}



.book-top-ngheo-la-von-lieng {

    display: grid;

    grid-template-columns: 45% 55%; 

    width: 100%; 

    /*height: 110vh;*/

}

.tab-content-order-image img{

    width:100%;

    object-fit: cover;

}

/*<!--/end new LDP-->*/

/*<!--card LDP book-->*/

.wrapper {

    margin: 0 auto;

    /*width: 550px;*/

}



.big-img {

    position: relative;

    width: 100%;

    height: 550px; 

    cursor: zoom-in;

    overflow: hidden;

    margin-bottom: 20px;

}



.display-img {

    width: 100%;

    /*height: 100%;*/

    object-fit: cover;

}



.img-selection {

    display: flex;

    justify-content: center;

    gap: 10px;

}



.img-thumbnail {

    width: 100px;

    height: 100px;

    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;

    cursor: pointer;

    transition: opacity 0.3s ease;

    opacity: 0.5;

}



.img-thumbnail img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.img-thumbnail:hover {

    opacity: 1;

}



.img-thumbnail.selected {

    opacity: 1;

}



.zoom {

    position: absolute;

    transition: width 0.2s ease-out, opacity 0.2s ease-out 0.2s;

}

.align-items-center{

    text-align: center;

}

.bf_flower{

    padding:50px 0 20px;

   

}

.bf_flower a{

    border-bottom: 2px dashed #015367;

     padding-bottom:10px;

}

.product-col-two{

    width:100%;

}

.product-col-two .item_product_main .product-thumbnail-two a img{

    width:100%;

}



.product-thumbnail-two{

    padding:1px;

    overflow: hidden; 

}

.product-thumbnail-two a img {

  transition: 0.5s;

}

.product-thumbnail-two a img:hover {

  transform: scale(1.05);

}



.sidebarproduct-row {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}

.containerproduct{

  margin:10px 5%;

}



.item_product_main{

background: #fff;

text-align:center;

}

.item_product_main .product-name {

    text-align: center;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    white-space: initial;

    overflow: hidden;

    margin: 0 0 5px;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.4;

    min-height: 30px;

}



.product-thumbnail {

    transition: transform 0.3s ease;

}



.product-thumbnail:hover {

    transform: translateY(-5px);

}

.single-swiper-pagination {

    bottom: -10px; 

}



.single-swiper-pagination span {

    background-color: #6e93f7; 

    width: 10px;

    height: 10px;

    border-radius: 50%;

    display: inline-block;

    margin: 0 4px;

    opacity: 0.5;

    transition: opacity 0.3s ease;

}



.single-swiper-pagination .swiper-pagination-bullet-active {

    background-color: #4070f4;

    opacity: 1;

}



.sidebarproduct-row-hop {

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 1px; 

}



.product-thumbnail-hop img{

    width:100%;

}



.product-thumbnail-hop {

    padding: 5px;

    text-align: center;

}



/*<!--end card LDP book-->*/

@media (max-width: 940px) {

    .book-top-ngheo-la-von-lieng {

        grid-template-columns: 40% 60%;

        /*height: 100vh;*/

    }



    .big-img {

        height: 350px;

    }

    .sidebarproduct {

        overflow-x: auto;

        white-space: nowrap;

        

        -ms-overflow-style: none; 

        scrollbar-width: none; 

    }



    .sidebarproduct::-webkit-scrollbar {

        display: none; 

    }



    .product-thumbnail {

        display: inline-block;

    }

}



@media (max-width:490px){

    .book-section-top{

        display:none;

    }

    .product-name{

        text-align:center;

        margin:10px 0 30px 0;

    }

      .frame-fahasa-image-two {

        position: absolute;

        bottom: -4%;

        left: 50%;

        transform: translate(-50%, -50%);

    }

    .frame-fahasa-image-two a img {

        width: 300px;

        animation: scale-up 1s infinite alternate;

    }

    .hotline-oder-ring-wrap {

        position: fixed;

        bottom: 80px;

        left: 20px;

        z-index: 100;

    }

    .hotline-phone-ring-wrap {

        bottom: 9%;

        right: -10px;

        z-index: 9999;

    }

    .modal-content-OrderBook {

        margin: 40% auto;

        width: 95% !important;

    }

    

    .swiper-pagination-custom{

        background: #000;

        display: inline;

        padding: 10px;

        border-radius: 30px;

        color: #fff;

        text-align: center;

    }

    .single-card {

        border-radius: 0 !important;

    }

    .product_view_tab_content_ad ,.menu-tabs-mobi{

        margin:0 20px;

    }

  

    .tab-links {

        display: flex;

        padding-right: 10px;

        overflow-x: auto;

        white-space: nowrap;

        margin: 10px 0 0;

        gap: 5px; 

    }



    .tab-links::-webkit-scrollbar {

        display: none;

    }

    

    .tab-contents {

        text-align: justify;

        padding: 10px 20px;

        max-height: 350px;

        overflow: hidden;

        background: #fff;

        position: relative;

        transition: max-height 3s ease;

        position: relative;

    }

    

    .tab-contents::after {

        content: "";

        position: absolute;

        left: 0;

        right: 0;

        bottom: 0;

        height: 40px;

        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.7) 75%, rgba(255, 255, 255, 0.9) 100%);

    }

 

    #toggleBtn {

        display: block;

        margin: 10px auto;

        padding: 15px 30px;

        background-color: #015367;

        color: #fff;

        border: none;

        border-radius: 30px;

        cursor: pointer;

    }

    .bf_flower {

        padding: 9px 0 20px;

    }

    

    .sidebarproduct-row-hop {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 10px; 

    }

    .product-thumbnail-hop {

         background-color: unset; 

         padding: unset; 

         text-align: unset; 

         border: unset; 

    }

    .sidebarproduct {

         overflow-x: unset; 

       

    }

}