html{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  body{
      background: #fff;
      color: #222;
      font-family: 'Roboto', sans-serif;
      font-size: 14px;
      width:100%;
      line-height: 1.2;
      margin: 0;
      padding: 0;
      overflow-x:hidden;
      text-align: center;
    }
    #header{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        text-align:center;
        z-index:22;
        padding:4px;
        background-color:#fff;
        border-bottom:1px solid lightseagreen;
    }
    #page-load{
        margin-top:50px;
        width:100%;
        padding:0;
        overflow-x:hidden;
        overflow-y:auto;
    }
    #footer{
        background-color:#222;
        color:#fff;
        width:100%;
        padding:0px;
    }
    .info{
        text-align:justify;
        width:auto;
        float:left;
        padding:5px 10px;
    }
    .title_info{
        text-transform:uppercase;
        font-weight:600;
        color:lightgreen;
        padding:6px 0px;
    }
    .logo_info{
        width:40px; height:40px;
        
    }
    .tb-noline{
        border-collapse: collapse;
        width:100%;
       
    }
    .tb-noline td{
        vertical-align: middle;
        
    }
    .logo-img{
        width:32px;
        height:32px;
        object-fit: cover;
    }
    .fll{
        float:left;
    }
    .flr{
        float:right;
        
    }
    .cl{
        clear:both;
    }
    a{
        text-decoration:none;
    }
    input,select,textarea{
        border-radius:6px;
        padding:6px;
        font-size:14px;
        color:#222;
        font-family:'Roboto', sans-serif;
    }
    .title-sk{
        width:100%;
        text-transform:uppercase;
        color:#9b0bac;
        font-weight:400;
        font-size:14pt;
        padding:4px 0px;
    }
    .btn_small{
        border-radius:4px;
        border:none;
        padding:4px 8px;
    }
.row_opa{
    position:absolute;z-index:1;opacity:0.5;background:#333;
    height:40px;
    width:100%;
}
.row_top{
    position:absolute;z-index:2;
    height:40px;
    width:100%;
}

    /*-------------------Style SLIDE------------------------*/
    .slides {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-points-x: repeat(300px);
    scroll-snap-type: mandatory;
  }
  .slides::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }
  .slides>.div-w{
    margin-right:3px;
    flex-shrink: 0;
    width: 100%;
    height:500px;
    transform-origin: center center;
    transform: scale(1);
    transition: transform 0.5s;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
  }
   .slides > .div-w:target {
    transform: scale(0.8);
  }
 
 .div_w1{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right:5px;
      flex-shrink:0;
      width:25%;
      padding:8px;
      
      border-radius:16px;
      border:1px solid #00f;
      color:#000;
       transform-origin: center center;
        transform: scale(1);
    transition: transform 0.5s;
    position: relative;
  }
  .bg2{
      background:#00f;
      border:1px solid #00f;
      color:#fff;
  }
  .slides > .div_w1:target {
    transform: scale(0.8);
  }
  .div_w2{
   
    margin-right:5px;
      flex-shrink:0;
      width:200px;
      padding:8px;
      border-radius:8px;
      border:1px solid #00f;
      color:#000;
       transform-origin: center center;
        transform: scale(1);
    transition: transform 0.5s;
    position: relative;
  }
  .div_w2>img{
      width:200px;height:200px;
      object-fit:cover
  }
  .div_w2>.order_dh{
      padding:5px 0px;
      width:200px;
      height:auto;
  }
  .slides > .div_w2:target {
    transform: scale(0.8);
  }
  .div_w3{
    margin-right:5px;
    flex-shrink:0;
    width:100px;
    border-radius:8px;
    border:1px solid gray;
    color:#000;
    transform-origin: center center;
    transform: scale(1);
    transition: transform 0.5s;
    position: relative;
    padding:3px;
  }
  .div_w3>img{
      width:100px;height:100px;
      border-radius:8px;
      object-fit:cover
  }
  .div_w3>.content_mh{
      padding:5px;
      width:100px;
  }
  .slides > .div_w3:target {
    transform: scale(0.8);
  }
  .name_sp2{
      font-size:12px;
      color:#3d428b;
      text-transform:uppercase;
      font-weight:600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .dg2{
      font-size:14px;
      color:#f00;
      font-weight:bold;
  }
  .name_sp{
      color:#3d428b;
      text-transform:uppercase;
      font-weight:600;
  }
  .dg1{
      font-size:18px;
      color:#f00;
      font-weight:bold;
  }
  .bd_line{
      display:flex;
      align-items:center;
      padding:5px;
      border:1px solid gray;
      color:#000;
      border-radius:4px;
  }
  .cln{
      border:none;
      padding:0px;
      color:#000;
  }
  .cln:focus{
       outline:none;
  }
  .btn_bgr{
      border-radius:16px;
      color:#fff;
      background:#f00;
      border:1px solid #f00;
      padding:8px 14px;
      display:flex;
      align-items:center;
      justify-content:center;
  }
  .btn_bggr{
      border-radius:16px;
      color:#fff;
      background:green;
      border:1px solid green;
      padding:8px 14px;
      display:flex;
      align-items:center;
      justify-content:center;
  }
  .btn_wn{
      border-radius:16px;
      color:#000;
      background:#fff;
      border:1px solid #f00;
      padding:8px 14px;
      display:flex;
      align-items:center;
      justify-content:center;
  }
  .btn_bln{
      border-radius:16px;
      color:#00f;
      background:#fff;
      border:1px solid #00f;
      padding:8px 14px;
      display:flex;
      align-items:center;
      justify-content:center;
  }
.bd_tt{
    padding:8px;
    border-radius:16px;
    color:#222;
}
  .tieude_sl>a{
      font-family:'Dancing Script';
      font-weight:600;
      position: absolute;
    bottom:4px;
    right:0px;
    color:#f3ab14;  
    font-size:18px;
    text-shadow: 5px 2px 4px black;
    padding:4px 4px 4px 30px; 
    text-align:right; 
  }
  .bd_green{
      border:1px solid green;
  }
  .bd_gray{
      border:1px solid lightgray;
  }
  .bdr{
      border-radius:6px;
  }
  .bdr50{
      border-radius:50%;
  }
  .bdn{
      border:none;
  }
  .bdbt{
      border-bottom:1px solid gray;
  }
  /*----------------------------------------------------*/
  #menu{
      display:none;
      position:fixed;
      right:0;
      top:50px;
      border-radius:6px;
      box-shadow:3px 3px 5px gray;
      max-width:70%;
      
      background:#fff;
      color:#333;
      line-height:1.5;
      z-index:9;
  }
  #menu>.sty{
      
      background-color:#fff;
      padding:5px 10px;
      width:100%; 
      text-align:left; 
      border-bottom:1px solid green;
  }
  #menu>.sty:nth-child(even){background-color: #f2e8f5;}
  .menu_toggle{
      font-family:'Dancing Script';
      font-size:18px;
      font-weight:600;
      margin-left:10px;
      display: flex;
      align-items:center;
  }
  .sty_menu_img{
      width:32px;
      height:32px;
      border-radius:50%;
      margin-right:10px;
  }
  .title_content{
      margin:10px 0px;
      text-align:center;
      width:100%;
      font-family:'Dancing Script';
      font-size:16pt;
      font-weight:600;
      color:#078d07;
      text-shadow:3px 3px 5px grey;
      background-color:#fff;
  }
  .sp_content{
      font-family: 'Roboto', sans-serif;
      font-size: 14px;
      width:100%;
      padding:0px 4px;
  }
  .content_nd{
      background-color:lightgray;
      width:100%;
      overflow-x:hidden;
  }
  .sanpham_l{
      width:100%;
      background-color:#fff;
      margin-bottom:5px;
  }
  .img-sp-small{
        width:150px;
        height:100px;
        object-fit: cover;
        border-radius:4px;
        box-shadow:3px 3px 5px grey;
  }
  .ten_sp{
      font-family:'Dancing Script';
      text-transform:uppercase;
      padding:4px;
      width:100%; 
      font-weight:600; 
      color:#b91cb9;
  }
  .ten_sp2{
      font-family:'Dancing Script';
      text-transform:uppercase;
      padding:4px;
      font-weight:600; 
      color:#b91cb9;
  }
  .img-full-w{
      width:100%;
      margin:4px 0px;
      box-shadow:3px 3px 5px grey;
      border-radius:4px;
      object-fit:cover;
  }
  .title-pic{
      font-style: italic;
      font-size:12px;
      color:grey;
      text-align:center;
      width:100%;
      padding:4px 0px;
  }
  .tieude{
      font-size:18px;
      font-weight:bold;
      padding:5px;
      color:#222;
      text-align:left;
      width:100%;
  }
  .detail{
      padding:5px;
      width:97%;
      text-align:justify;
  }
  
  .mypopup{
      display:none;
      position:fixed;
      width:100%;
      height:100%;
      top:0;
      left:0;
      margin:0;
      padding:0;
  }
  #sukien_vip{
      width:100%;
      padding:3px 0px;
      background:lightgray;
  }
  
.popup{
    display:none;
    position: fixed;
    top:50%;
    left:50%;
    width:95%;
    transform: translate(-50%,-50%);
    border:1px solid lightgray;
    border-radius: 6px;
}
.scroll{
    overflow:auto;
}
.nscroll{
   overflow:hidden; 
}
.zindex22{
    z-index:22;
}
.zindex23{
    z-index:23;
}
.zindex25{
    z-index:25;
}
.zindex26{
    z-index:26;
}
.zindex27{
    z-index:27;
}
#bkg_opacity{
    position: fixed;
    top:50px;
    left:0;
    bottom:0;
    width:100%;
    
    background-color: #333;
    opacity:0.7;
    z-index:24;
    overflow:hidden;
    display:none;
    }
 #Notice{
    display:none;
    position: fixed;
    top:50%;
    left:50%;
    width:85%;
    transform: translate(-50%,-50%);
    background-color: #e3efff;
    border:1px solid lightgray;
    border-radius: 6px;
    z-index:26;
}
#show_chat_box{
    display:none;
    position:fixed;
    z-index:22;
    background:#fff;
    color:#272727;
    top:50px;
    left:0px;
    right:0px;
    bottom:0px;
    overflow:hidden;
}
    .top-popup{
        background: rgb(11,150,186);
        background: linear-gradient(90deg, rgba(11,150,186,1) 35%, rgba(238,238,238,1) 100%);
        height:auto;
        width:100%;
        padding:6px 0px;
        color:#fff;
        font-size:16px;
    }
  .close_back{
      background:#fff;
      color:#333;
      width:100%;
      padding:6px 0px;
  }
  .notification{
      font-size:14px;
      font-style:italic;
      color:#ebc826;
      padding:4px 0px;
      text-align:center;
      width:100%;
  }
  .btn-close{
      border:none;
      border-radius:6px;
      padding:6px 15px;
      background:#a21010;
      color:#fff;
  }
  .shopping{
      position:fixed;
      right:3px;
      bottom:200px;
      width:40px;
      height:40px;
      border-radius:50%;
      background:lightgray;
      box-shadow:3px 3px 5px gray;
      text-align:center;
      z-index:25;
  }
  .form_user{
      height:90%;
      width:100%;
      background:lightgray;
  }
  .central{
     height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    }
.central-object{
    display: flex;
    justify-content: center;
    align-items: center;
}
  .box-connect{
      text-align:center;
      width:85%;
      padding:8px;
      border-radius:6px;
      box-shadow:3px 3px 5px gray;
      background:#fff;
  }
  .input_2{
        width:80%;
        border-radius:6px;
        border:1px solid green;
    }
.file-upload{
    position:relative;
    display:flex;
    justify-content:center;
    align-items: center;  
    overflow:hidden;
    transition: all 1s;
    color:#000; 
 }
input[type='file']{
      height: auto;
      width:auto;
      position:absolute;
      top:0;
      left:0;
      opacity:0;
      cursor:pointer;
    }
    
    .btn_yes{
        border-radius:6px;
        padding:6px 15px;
        background:green;
        color:#fff;
        border:none;
        font-size:12pt;
    }
     .btn_yes_orange{
        border-radius:6px;
        padding:6px 15px;
        background:orange;
        color:#fff;
        border:none;
        font-size:12pt;
    }
    .preview{
        width:100px;
        height:100px;
        border-radius:50%;
        
    }
    #search{
        width:100%;
        padding:4px 0px;
        text-align:center;
        display:none;
        position:fixed;
        top:49px;
        left:0;
        z-index:2;
        background:#fff;
        box-shadow:3px 3px 5px lightgray;
    }
    /*----------shopper----------------*/
    .shop-cart{
        background-color:#fff;
        font-size:14px;
        color:#000;
        padding:10px;
        text-align:center;
    }
    .title_shop{
        font-family:'Roboto',sans-serif;
        font-weight:600;
        font-size:16px;
        color:purple;
        text-transform:uppercase;
        padding:10px 0px;
    }
    .text_preview{
        font-size:14px;
        line-height:1.3;
    }
     .element{
        width:100%;
        text-align:left;
        height:60px;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .showall{
        max-height:180px;
        overflow-y:auto;
        text-align:justify;
    }
    .fb{
        font-weight:600;
        color:#eda01f;
    }
    .fup{
        text-transform:uppercase;
    }
    .click_new{
        font-style:italic; color:gray;text-align:right;
    }
    .demuc{
        text-align:left; 
        font-weight:600; 
        padding:4px 0px;
        margin-bottom:5px;
        border-bottom:1px solid green;
    }
    .tb-noline>td{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .add_cart{
        width:100%;
        padding:10px 0px;
    }
    .btn_w{
        width:40%;
        text-align:center;
        padding:8px;
        font-size:16px;
        border-radius:6px;
        
    }
    .cl_gray{
        background:lightgray;
        color:#000;
        
    }
    .cl_red{
        background:red;
        color:#fff;
    }
    .cl_green{
        background:#0b925e;
        color:#fff;
      }
    .boxsd{
        box-shadow:2px 2px 2px #272727;
    }
.tb-line {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;     
    border-collapse: collapse;
    width: 100%;
    background-color: #fff;
  }
  
.tb-line td {
    border: 1px solid #000;
    vertical-align: middle;
    padding:5px;
  }
.tb-line-child {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;     
    border-collapse: collapse;
    width: 100%;
    background-color: #f4f9ff;
  }
  
.tb-line-child td {
    border: 1px solid gray;
    vertical-align: middle;
    padding:3px 0px;
  }
.tb-line-child tr:nth-child(even){background-color: #fcf6fe;}
  
.tb-line-child tr:hover {background-color: #fff;}
  .num_count{
     
      background-color:red;
      padding:2px;
      width:12px;
      height:12px;
     
      border-radius:50%;
      font-size:10px;
      color:#fff;
  }
  #show_count{
    position:absolute;
    top:5px;
    margin-left:15px;
  }
  .top_bill{
      padding:10px 0px;
      width:100%;
      text-transform:uppercase;
      font-weight:600;
      font-size:16px;
      color:#00f;
      text-align:center;
  }
  .form_bill{
      width:100%;
      padding:6px 0px;
  }
  .input_none{
      width:90%;
      border:none;
      padding:2px;
      text-align:center;
  }
  .total{
      margin:10px 3px; text-align:right; font-size:14pt; font-weight:600;
  }
  .edithd{
      font-weight:400;
      font-size:14px;
      box-shadow:3px 3px 5px gray;
      border-radius:6px;
      padding:6px 10px;
      margin-right:6px;
     }
  .cl_lightblue{
      background:#b9dcff;
      color:#000;
  }
  .info_list{
      margin-bottom:5px;
      text-align:left;
      padding:8px 4px;
      font-size:16px;
      font-weight:600;
      color:#800040;
      border-bottom:1px solid green;
  }
  .info_add{
      padding:3px 20px;
      text-align:center;
  }
  .tb1{
      text-align:center; color:#00f;
  }
  .lb1{
      color:#800840; font-size:16px;
      font-weight:600;
  }
  .img-qr{
      width:350px;
      height:auto;
     }

.share_page{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    padding:0px;
    margin:0;
    background-color:#fff;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    z-index:22;
    display:none;
    border:1px solid green;
}
.btn_share{
        margin:0px 10px;
        width:32px;
        height:32px;
    }
#btn_call{
    display:none;
    position:fixed;
    bottom:100px;
    right:10px;
    z-index:99;
}
.div_box{
    width:30px;
    height:30px;
    background:green;
    color:#fff;
    border:1px solid #800040;
    font-size:1.3em;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:3px 2px 5px gray;
}
.div_box>a{
    color:#fff;
}
.btn_top_s{
    position:fixed;
    top:55px;
    left:5px;
    z-index:99;
}
.btn_bgrs{
    background-color:green;
    border-radius:8px;
    padding:5px 8px;
    color:#fff;
    border:none;
    border:1px solid green;
}
.btn_bgrs:hover{
    background-color:#fff;
    color:#000;
    
}
.btn_nbg{
    border:1px solid #00f;
    border-radius:8px;
    padding:5px 8px;
    
}
.bg{
    background:#fff;
    color:#000;
}
.bgred{
    background:#802907;
    color:#fff;
}
.bdb{
    border:1px solid #00f;
}
table{
    
    border-collapse: collapse;
}
td{
    padding:3px 0px;
    font-size: 12px;
    vertical-align: middle;
}
.w{width:100%;}
.img32{
        width:32px; height:32px; object-fit:cover;
        border:1px solid #00f;
        border-radius:3px;
    }
     .img32nbd{
        width:32px; height:32px; object-fit:cover;
    }
    #tb-line{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;     
        border-collapse: collapse;
        width: 100%;
    }
    
    .nameSP{
        font-size:16px;
        font-weight:600;
    }
    .ct{
        text-align:center;
    }
    .small_title{
        color:#cab709;
        text-transform:uppercase;
        font-weight:600;
    }
    .smallT{
        font-size:14px;
    }
    .inpG{
        padding:5px;
        border-radius:10px;
        font-size:15px;
    }
    .text-middle{
        display:flex;
        align-items:center;
    }
    .btn_ncl{
        padding:4px;
        border-radius:8px;
    }
    #form_yeucau_kh{
        position:fixed;
        top:51px;
        left:10px;
        right:10px;
        padding:10px;
        border-radius:6px;
        background:#fff;
        border:1px solid lightgray;
        box-shadow:2px 2px 5px #272727;
        z-index:3;
        padding-bottom:0px;
        display:none;
    }
    .content_yeucau{
        margin-top:5px;
        max-height:500px;
        overflow:auto;
        width:100%;
        padding-bottom:10px;
    }
    .boxMsg_bbt{
        margin-top:10px;
        float:left;
        border-radius:8px;
        padding:10px;
        max-width:85%;
        background:#dbebff;
        border:1px solid lightgray;
        box-shadow:1px 1px #272727;
    }
/*--------Danh Mục Sản Phẩm & DV------*/
.box_sp_dm{
        float:left;
        width:50%;
        
    }
    .box_sp_dm>.sp_box_content{
        padding:5px;
        
    }
    .bdr_box_sp{
        border-radius:6px;
        border:1px solid lightgray;
        padding:5px;
    }
    .bdr_box_sp>img{
        width:100%;
        height:auto;
        object-fit:cover;
    }
    .name_sp_box{
        width:100%;
        text-align:center;
        font-weight:600;
        color:#272727;
        padding-top:10px;
        display:flex;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .note_sp{
        display:flex;
        width:100%;
        padding-top:5px;
        color:#737f8d;
        text-align:left;
         white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }
     .price_sp{
        float: right;
        padding-top:5px;
        color:#b45340;
        text-align:left;
        font-weight:600;
    }
    .btn_shop{
        border-radius:12px;
        padding:5px 0px;
        width:90px;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#fff;
        background:#f00;
        border:none;
    }
    .input_sl_sp{
        width:45px;text-align:center;margin-right:10px;
        border:none;
        border-bottom:1px solid lightgray;
    }
    .input_sl_sp:focus{
        outline:none;
    }
    /*--------------------------------*/