.desktop {
    background-color: #fdc3c3;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
  }
  
  .desktop .div {
    background-color: #fdc3c3;
    overflow: hidden;
    width: 100%;
    height: 2350px;
    position: relative;
  }
  
  .desktop .banner {
    position: absolute;
    width: 100%;
    height: 267px;
    top: 67px;
    left: 0;
    background-image: url(../img/image-10.png);
    background-size: cover;
    background-position: 50% 50%;
  }
  
  .desktop .header {
    position: absolute;
    width: 100%;
    height: 67px;
    top: 0;
    left: 0;
    background-color: transparent;
  }
  
  .desktop .overlap {
    position: relative;
    width: 100%;
    height: 60px;
  }
  
  .desktop .rectangle {
    width: 100%;
    height: 67px;
    left: 0;
    background-color: #d9d9d9;
    position: absolute;
    top: 0;
  }
  
  .desktop .ho-t-ng-a {
    position: absolute;
    width: 582px;
    top: 21px;
    left: 466px;
    font-family: Manrope;
    font-weight: 400;
    color: #000000;
    font-size: 15px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .desktop .text-wrapper {
    position: absolute;
    width: 277px;
    top: 16px;
    left: 36px;
    font-family: Manrope;
    font-weight: 400;
    color: #1e1e1e;
    font-size: 15px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .desktop .nt-ng-nhp {
    width: 145px;
    left: 1380px;
    position: absolute;
    height: 32px;
    top: 15px;
  }
  
  .desktop .rectangle-2 {
    width: 122px;
    height: 32px;
    left: 0;
    background-color: #ec9595;
    border-radius: 30px;
    position: absolute;
    top: 0;
    transition: background-color 0.3s;
  }
  
  
  .desktop .text-wrapper-2 {
    width: 130px;
    left: 13px;
    position: absolute;
    top: 2px;
    font-family: Manrope;
    font-weight: 400;
    color: #ffffff;
    font-size: 20px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }

.nt-ng-nhp:hover .rectangle-2{
  background-color:#c54040;
}


  .desktop .nt-ng-k {
    width: 97px;
    left: 1280px;
    position: absolute;
    height: 32px;
    top: 15px;
  }
  
  .desktop .div-wrapper {
    position: relative;
    width: 95px;
    height: 32px;
    background-color: #ec9595;
    border-radius: 30px;
    transition: background-color 0.3s;
  }
  
  .desktop .text-wrapper-3 {
    width: 80px;
    left: 8px;
    position: absolute;
    top: 1px;
    font-family: Manrope;
    font-weight: 400;
    color: #ffffff;
    font-size: 20px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  .text-wrapper-3 a{
    text-decoration: none;
    color: white;
  }

  .nt-ng-k:hover .div-wrapper {
    background-color:#c54040;
}

  
  .desktop .mail {
    position: absolute;
    width: 24px;
    height: 20px;
    top: 21px;
    left: 12px;
  }
  
  .desktop .box {
    position: absolute;
    width: 24px;
    height: 20px;
    top: 375px;
    left: 1851px;
  }
  
  .desktop .overlap-2 {
    position: absolute;
    width: 20px;
    height: 13px;
    top: 4px;
    left: 2px;
    background-image: url(./img/box.svg);
    background-size: 100% 100%;
  }
  
  .desktop .line {
    position: absolute;
    width: 7px;
    height: 6px;
    top: 6px;
    left: 12px;
  }
  
  .desktop .img {
    width: 7px;
    height: 6px;
    top: 6px;
    position: absolute;
    left: 1px;
  }
  
  .desktop .line-2 {
    width: 18px;
    height: 18px;
    position: absolute;
    left: 1px;
    border-radius: 50%;
  }
  
  .desktop .thanh-menu {
    position: absolute;
    width: 100%;
    height: 88px;
    top: 334px;
    left: 0;
  }
  
  .desktop .navbar {
    position: relative;
    width: 100%;
    height: 88px;
    background-color: #ec9595;
    border-radius: 10px;
  }
  
  .desktop .text-wrapper-4 {
    position: absolute;
    width: 163px;
    top: 24px;
    left: 42px;
    font-family: Genos;
    font-weight: Bold;
    font-size: 36px;
    color: #940f0f;    
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
.text-wrapper-4:hover{
  color:red;
}
  .desktop .text-wrapper-5 {
    position: absolute;
    width: 160px;
    top: 24px;
    left: 769px;
    font-family: Genos;
    font-weight: Bold;
    font-size: 36px;
    color: #940f0f; 
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }

  .text-wrapper-5 a{
    text-decoration: none;
    color:  #940f0f; 
  }
  
  .desktop .text-wrapper-6 {
    position: absolute;
    width: 138px;
    top: 24px;
    left: 1026px;
    font-family: Genos;
    font-weight: Bold;
    font-size: 36px;
    color: #940f0f;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .desktop .text-wrapper-7 {
    position: absolute;
    width: 110px;
    top: 24px;
    left: 549px;
    font-family: Genos;
    font-weight: Bold;
    font-size: 36px;
    color: #940f0f;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .desktop .text-wrapper-8 {
    position: absolute;
    width: 157px;
    top: 24px;
    left: 299px;
    font-family: Genos;
    font-weight: Bold;
    font-size: 36px;
    color: #940f0f;  
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .desktop .text-wrapper-9 {
    position: absolute;
    width: 157px;
    top: 25px;
    left: 1289px;
    font-family: Genos;
    font-weight: Bold;
    font-size: 36px;
    color: #940f0f;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }

.text-wrapper-6:hover{
  color:red;
}
.text-wrapper-7:hover{
  color:red;
}
.text-wrapper-8:hover{
  color:red;
}
.text-wrapper-9:hover{
  color:red;
}
  
  .desktop .image {
    width: 51px;
    height: 47px;
    top: 21px;
    left: 1234px;
    position: absolute;
    object-fit: cover;
    border-radius: 50%;
  }
  
  .desktop .danh-mc-sn-phm {
    position: absolute;
    width: 265px;
    height: 500px;
    top: 439px;
    left: 2px;
  }
  
  
  
  .desktop .rectangle-3 {
    width: 263px;
    height: 1561px;
    left: 0;
    background-color: #ec9595;
    border-radius: 10px;
    position: absolute;
    top: 0;
  }
  
  .desktop .group {
    position: absolute;
    width: 216px;
    height: 193px;
    top: 1419px;
    left: 24px;
  }
  
  .desktop .overlap-group-2 {
    position: relative;
    width: 214px;
    height: 193px;
  }
  
  .desktop .rectangle-4 {
    width: 214px;
    height: 113px;
    left: 0;
    position: absolute;
    top: 0;
  }
  
  .desktop .text-wrapper-10 {
    position: absolute;
    width: 185px;
    top: 15px;
    left: 15px;
    font-family: "Laila-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 27px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .text-wrapper-11 {
    position: absolute;
    width: 259px;
    top: 21px;
    left: 4px;
    font-family: "Lao Muang Khong-Regular", Helvetica;
    font-weight: 400;
    color: #211f1f;
    font-size: 26px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .group-2 {
    position: absolute;
    width: 215px;
    height: 1320px;
    top: 81px;
    left: 24px;
  }
  
  .desktop .overlap-group-wrapper {
    position: absolute;
    width: 216px;
    height: 400px;
    top: 0;
    left: 0;
  }
  
  .desktop .gundam-HG-RG-MG-PG-wrapper {
    position: relative;
    width: 214px;
    height: 350px;
    background-color: #c65656;
    border-radius: 10px;
  }
  
  .desktop .gundam-HG-RG-MG-PG {
    position: absolute;
    width: 152px;
    top: 22px;
    left: 10px;
    font-family: "Laila-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 25px;
    letter-spacing: 0;
    line-height: normal;
  }

  .gundam-HG-RG-MG-PG li:hover{
    color:#000000;
  }

  .desktop .overlap-wrapper {
    position: absolute;
    width: 214px;
    height: 366px;
    top: 400px;
    left: 1px;
  
  }
  
  .desktop .super-sentai-bi-n-h-wrapper {
    position: relative;
    width: 214px;
    height: 320px;
    background-size: 100% 100%;
    background-color: #c65656;
    border-radius: 10px;
    
  }
  
  .desktop .super-sentai-bi-n-h {
    position: absolute;
    width: 185px;
    top: 25px;
    left: 10px;
    font-family: "Laila-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 25px;
    letter-spacing: 0;
    line-height: normal;
  }

  .super-sentai-bi-n-h li{
    list-style-type: disc;
    padding: 10px;
    margin-left: 10%;
  }

  .super-sentai-bi-n-h li:hover{
    color:#000000;
  }
  
  .desktop .overlap-4 {
    position: absolute;
    width: 216px;
    height: 496px;
    top: 770px;
    left: 0;
  }
  
  /* .desktop .group-3 {
    position: absolute;
    width: 216px;
    height: 320px;
    top: 0;
    left: 0;
  } */
  
  .desktop .overlap-5 {
    position: relative;
    width: 214px;
    height: 320px;
    background-color: #c65656;
    border-radius: 10px;
  }
  
  .desktop .kamen-rider-belt {
    position: absolute;
    width: 185px;
    top: 20px;
    left: 10px;
    font-family: "Laila-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 25px;
    letter-spacing: 0;
    line-height: normal;
  }

  .kamen-rider-belt li{
    list-style-type: disc;
    padding: 10px;
    margin-left: 10%;
  }
  .kamen-rider-belt li:hover
  {
    color:black;
  }
  
  .desktop .group-4 {
    position: absolute;
    width: 216px;
    height: 216px;
    top: 380px;
    left: 0;
  }
  
  .desktop .TCG-pokemon-yugi-oh-wrapper {
    position: relative;
    width: 214px;
    height: 300px;
    background-color: #c65656;
    border-radius: 10px;
  }
  
.text-wrapper-10{
  position: absolute;
    width: 185px;
    top: 20px;
    left: 10px;
    font-family: "Laila-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 25px;
    letter-spacing: 0;
    line-height: normal;
}

.text-wrapper-10 li{
  list-style-type: disc;
  padding: 10px;
  margin-left: 10%;
}

.text-wrapper-10 li:hover{
  color: #000000;
}

  .desktop .tm-kim {
    position: absolute;
    width: 870px;
    height: 56px;
    top: 0px;
    left: 278px;
  }
  
  .desktop .overlap-6 {
    position: relative;
    width: 866px;
    height: 56px;
  }
  
  .desktop .rectangle-6 {
    width: 864px;
    height: 56px;
    left: 0;
    background-color: #ffd4d4;
    border-radius: 10px;
    position: absolute;
    top: 0;
  }
  
  .desktop .rectangle-7 {
    width: 154px;
    height: 56px;
    left: 712px;
    background-color: #ec9595;
    border-radius: 10px;
    position: absolute;
    top: 0;
  }
  
  .desktop .text-wrapper-12 {
    position: absolute;
    width: 125px;
    top: 13px;
    left: 736px;
    font-family: "Manrope-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 25px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
 
  .rectangle-7:hover{
    background-color:#c54040;
  }

  
  
  
  .desktop .b-n-c-n-t-m-g {
    position: absolute;
    width: 300px;
    top: 13px;
    left: 25px;
    font-family: Manrope;
    font-weight: 700;
    color: transparent;
    font-size: 25px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .desktop .span {
    color: #c65656;
  }
  
  .desktop .text-wrapper-13 {
    color: #000000;
  }
  
  .desktop .text-wrapper-14 {
    color: #c39d9d; 
    border-radius: 10px;
    padding: 12px 20px;
    width: 100%;
    max-width: 600px; 
    box-sizing: border-box;
  }
  .text-wrapper-14 input[type="text"] {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 20px;
    font-weight: bold;
    color: #333; 
    outline: none;
  }
  .text-wrapper-14 input::placeholder {
    color: #b88; 
    font-weight: bold;
  }
  
  .desktop .h-tr {
    position: absolute;
    width: 235px;
    height: 66px;
    top: 0px;
    left: 1173px;
  }
  
  .desktop .overlap-7 {
    position: relative;
    width: 233px;
    height: 60px;
    background-color: #ffd4d4;
    border-radius: 10px;
  }
  
  .desktop .element-h-tr {
    position: absolute;
    width: 154px;
    top: 0;
    left: 79px;
    font-family: "Manrope-Bold", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .text-wrapper-15 {
    font-weight: 700;
    color: #c65656;
  }
  
  .desktop .text-wrapper-16 {
    font-family: Manrope;
    font-weight: Medium;
    color: #ec9595;
  }
  
  .desktop .image-2 {
    width: 51px;
    height: 50px;
    top: 8px;
    left: 19px;
    position: absolute;
    object-fit: cover;
    border-radius: 50%;
  }
  
  .desktop .content {
    position: absolute;
    width: 1180px;
    height: 1500px;
    top: 70px;
    left: 275px;
    background-color: #ffd4d4;
    border-radius: 10px;
  }
  
  .desktop .sn-phm-mi-nht {
    position: absolute;
    width: 1144px;
    height: 788px;
    top: 47px;
    left: 13px;
  }
  
  .desktop .sn-phm-mi-nht-2 {
    position: absolute;
    width: 1146px;
    height: 56px;
    top: 0;
    left: 0;
  }
  
  .desktop .overlap-group-3 {
    position: relative;
    width: 1144px;
    height: 60px;
    background-color: #c54040;
    border-radius: 20px;
    

  }
  
  .desktop .text-wrapper-17 {
    position: absolute;
    width: 351px;
    top: 8px;
    left: 20px;
    font-family: Genos;
    font-weight: SemiBold;
    color: #ffffff;
    font-size: 36px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .sn-phm-nh {
    position: absolute;
    width: 353px;
    height: 332px;
    top: 85px;
    left: 764px;
  }
  
  .desktop .overlap-8 {
    position: relative;
    width: 351px;
    height: 332px;
    background-color: #fdc3c3;
    border-radius: 10px;
  }
  
  .desktop .HG-zaku-II-f-type {
    position: absolute;
    width: 245px;
    top: 238px;
    left: 23px;
    font-family: Manjari;
    font-weight: 400;
    color: #1e1e1e;
    font-size: 25px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .image-3 {
    position: absolute;
    width: 295px;
    height: 195px;
    top: 20px;
    left: 23px;
    object-fit: cover;
  }
  
  .desktop .sn-phm-nh-wrapper {
    position: absolute;
    width: 351px;
    height: 340px;
    top: 85px;
    left: 12px;
    background-color: #fdc3c3;
    border-radius: 10px;
  }
  
  .desktop .sn-phm-nh-2 {
    width: 353px;
    height: 340px;
  }
  
  .desktop .overlap-group-4 {
    position: relative;
    width: 351px;
    height: 340px;
    background-color: #fdc3c3;
    border-radius: 10px;
  }
 
  
  .desktop .text-wrapper-18 {
    position: absolute;
    width: 245px;
    top: 244px;
    left: 23px;
    font-family: Manjari;
    font-weight: 400;
    color: #1e1e1e;
    font-size: 25px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .image-4 {
    width: 295px;
    height: 200px;
    top: 21px;
    left: 23px;
    position: absolute;
    object-fit: cover;
  }
  
  .desktop .sn-phm-nh-3 {
    position: absolute;
    width: 351px;
    height: 340px;
    top: 448px;
    left: 7px;
    background-color: #fdc3c3;
    border-radius: 10px;
  }
  
  .desktop .sn-phm-nh-4 {
    position: absolute;
    width: 351px;
    height: 340px;
    top: 448px;
    left: 764px;
    background-color: #fdc3c3;
    border-radius: 10px;
  }
  
  .desktop .sn-phm-nh-5 {
    position: absolute;
    width: 351px;
    height: 340px;
    top: 448px;
    left: 390px;
    background-color: #fdc3c3;
    border-radius: 10px;
  }
  
  .desktop .image-5 {
    width: 295px;
    height: 200px;
    top: 20px;
    left: 23px;
    position: absolute;
    object-fit: cover;
  }
  
  .desktop .sn-phm-nh-6 {
    position: absolute;
    width: 360px;
    height: 340px;
    top: 85px;
    left: 390px;
  }
  
  .desktop .overlap-9 {
    position: relative;
    height: 340px;
  }
  
  .desktop .rectangle-8 {
    width: 351px;
    height: 340px;
    left: 0;
    background-color: #fdc3c3;
    border-radius: 10px;
    position: absolute;
    top: 0;
  }
  
  .desktop .HG-gquuuux {
    position: absolute;
    width: 245px;
    top: 244px;
    left: 23px;
    font-family: Manjari;
    font-weight: 400;
    color: #1e1e1e;
    font-size: 25px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .sn-phm-nh-7 {
    position: absolute;
    width: 360px;
    height: 340px;
    top: 0;
    left: 0;
  }
  
  .desktop .overlap-group-5 {
    position: relative;
    width: 358px;
    height: 340px;
  }
  
  .desktop .HG-mighty-strike {
    position: absolute;
    width: 351px;
    top: 235px;
    left: 20px;
    font-family: Manjari;
    font-weight: 400;
    color: #1e1e1e;
    font-size: 25px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .sn-phm-c-xem-nhiu {
    position: absolute;
    width: 1144px;
    height: 788px;
    top: 904px;
    left: 13px;
  }
  
  .desktop .p {
    position: absolute;
    width: 445px;
    top: 8px;
    left: 20px;
    font-family: Genos;
    font-weight: SemiBold;
    color: #ffffff;
    font-size: 36px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .shf-kamen-rider {
    position: absolute;
    width: 324px;
    top: 238px;
    left: 14px;
    font-family: Manjari;
    font-weight: 400;
    color: #1e1e1e;
    font-size: 25px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .DX-boonboomger-robo {
    position: absolute;
    width: 308px;
    top: 245px;
    left: 23px;
    font-family: Manjari;
    font-weight: 400;
    color: #1e1e1e;
    font-size: 25px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .sn-phm-nh-8 {
    position: absolute;
    width: 353px;
    height: 340px;
    top: 85px;
    left: 390px;
  }
  
  .desktop .sn-phm-nh-9 {
    position: absolute;
    width: 353px;
    height: 340px;
    top: 0;
    left: 0;
  }
  
  .desktop .DX-bitter-gavv {
    position: absolute;
    width: 277px;
    top: 229px;
    left: 7px;
    font-family: Manjari;
    font-weight: 400;
    color: #1e1e1e;
    font-size: 25px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .line-3 {
    position: absolute;
    width: 1109px;
    height: 1px;
    top: 866px;
    left: 19px;
    object-fit: cover;
  }


  .giatien{
    position: absolute;
    width: 277px;
    top: 300px;
    left: 20px;
    font-family: Manjari;
    font-weight: bold;
    color:#7b0f0f;
    font-size: 25px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  
  .footer {
        color: white;
        width: 100%;
        height: 50px;
        top: 2020px;
        left:0%;
        position: relative;
      }

      .overlap-10 {
        width: 100%;
        margin: 0 auto;
        background-color:#ec9595;
        padding: 30px;
        height: 800px;        

      }

      .text-wrapper-19 {
        font-family:Manrope ;
        font-size: 22px;
        font-weight: 600;
        color: #7b0f0f;
        text-align: center;
        margin-bottom: 25px;
        letter-spacing: 0;
        width: 100%;
        top: 1500px;
      }

      .h-kinh-doanh-t-qu-c {

        position: absolute;
        width: 875px;
        top: 100px;
        left: 30px;
        font-family: Manrope;
        font-weight: 400;
        color: #ffffff;
        font-size: 20px;
        letter-spacing: 0;
        line-height: normal;
      }
  

  .gundam-HG-RG-MG-PG-wrapper li{
    list-style-type: disc;
    padding: 5px;  
    margin-left: 10%;
  }

  .text-wrapper-5 a{
    color:#7b0f0f;
  }
  .text-wrapper-5 a:hover{
    color:red;
  }
  .desktop .line-9 {
    position: absolute;
    width: 1100px;
    height: 2px;
    top: 830px;
    left: 20px;
    object-fit: cover;
  }
.product-detail h1{
    font-family: Manjari;
    font-weight: 400;
}

  .product-detail {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  background-color:#fdc3c3;
  max-width: 1200px;
  margin: 30px auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 10px;
}

.product-image {
  flex: 1 1 40%;
  padding: 10px;
}

.product-image img {
  max-width: 100%;
  border-radius: 10px;
}

.product-info {
  flex: 1 1 60%;
  padding: 10px;
  position: relative;
  left: 50px;
  top: 50px;
}

.product-info h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

.price { 
  font-family: Manjari;
  font-weight: bold;
  color:#7b0f0f;
  font-size: 25px;
  letter-spacing: 0;
  line-height: normal;
}

.status,
.shipping {
  margin: 8px 0;
  color: #555;
}

input[type="number"] {
  width: 60px;
  margin-left: 10px;
}

.actions {
  margin-top: 20px;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  margin-right: 10px;
  cursor: pointer;
  font-weight: bold;
}

.add-to-cart {
  background-color:#c39d9d;
  border: 1px solid #7b0f0f;

}
.add-to-cart:hover{
  background-color: white;
}

.buy-now {
  background-color:#ec9595;
  color: white;
  border: 1px solid #7b0f0f;
}
.buy-now:hover{
  background-color: red;
}

input[type="number"] {
  width: 40px;
  height: 30px;
  margin-left: 10px;
  text-align: center;         
  background-color:#ec9595;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  line-height: 35px;
  position: relative;
  top: 10px;     
  left: 70px;     
}

.custom-number-input {
  display: flex;
  align-items: center;
}

.custom-number-input input[type="number"] {
  width: 50px;
  text-align: center;
  background-color:#ff9999;
  
  border-radius: 5px;
  font-size: 15px;
  position: relative;

}

.custom-number-input button {
  background-color: #ff9999; /* màu bạn muốn */
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 18px;
  border-radius: 5px;
  position: relative;
  top:10px;
  left: 80px;

}

.custom-number-input button:hover {
  background-color: #ff6666;
}

.soluong{
  position: relative;
  top: 30px;
  font-family: "Manrope-Bold", Helvetica;
}


.product-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .main-image {
      position: relative;
      width: 400px;
      height: 400px;
      object-fit: cover;
      border: 2px solid #c39d9d;
      margin-bottom: 20px;
    }

    .thumbnail-container {
      display: flex;
      gap: 10px;
      justify-content: center;
    }

    .thumbnail {
      width: 100px;
      height: 100px;
      object-fit: cover;
      cursor: pointer;
      border: 2px solid transparent;
      transition: border 0.3s;
    }

    .thumbnail:hover {
      border: 2px solid #ff0000;
    }


.product-description,
.product-rating {
  margin-top: 40px;
  padding: 20px;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
   line-height: 1.4;
}
.product-description{
  font-size: 15px;
}

.product-rating {
  margin-top: 20px;
}

.stars {
  font-size: 24px;
  /* color: #FFD700;  */
  color:#ff0000;
  
  
}

.rating-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.rating-buttons button {
  padding: 6px 12px;
  border: 1px solid #ddd;
  background-color:#ff9999;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.rating-buttons button:hover {
  background-color: #eee;
}


.shop-info {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 8px;
  width: 80%;
  margin-top: 20px;
  position: relative;
  top: 20px;
}

.shop-logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 16px;
}

.shop-details {
  flex: 1;
}

.shop-name {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.shop-status {
  color: #888;
  font-size: 14px;
  margin-top: 4px;
}

.shop-buttons {
  margin-top: 10px;
}

.shop-buttons button {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  margin-right: 10px;
  cursor: pointer;
  border: 1px solid #f44336;
  background-color: white;
  color: #f44336;
  transition: background-color 0.2s ease;
}

.shop-buttons .chat-button:hover {
  background-color: #f44336;
  color: white;
}

.view-shop-button {
  border: 1px solid #ccc;
  background-color: white;
  color: #333;
}

.view-shop-button:hover {
  background-color: #eee;
}

.desktop .line-9 {
    position: absolute;
    width: 1130px;
    height: 2px;
    top: 600px;
    left: 20px;
    object-fit: cover;
  }