/* Facebook-like scrollbar styling */
.scrollbar {
  overflow-y: scroll;
}

.scrollbar::-webkit-scrollbar {
  width: 9px; /* Thin scrollbar */
  height: 9px; /* Optional for horizontal scrollbars */
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #bcc0c4; /* Light gray thumb similar to Facebook */
  border-radius: 9px; /* Rounded edges for the scrollbar thumb */
}

.scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #bcc0c4; /* Slightly darker shade on hover */
}

.scrollbar::-webkit-scrollbar-track {
  background: transparent; /* Transparent track */
}

.scrollbar::-webkit-scrollbar-track:hover {
  background: #d0d3d7; /* Slightly visible track on hover */
}
/* end scrollbar */




/* style.css */

.x1dflw{
    background-color: #e2e5e9;
}
.imageContainer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000; /* Màu nền mờ */
  display: none;
  z-index:400;
}
.closeButton {
  color: white;
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}
.underline {
    text-decoration: underline !important;
}
.prevButton, .nextButton {
  color: white;
  position: absolute;
  top: 50%;
  cursor: pointer;
}
.prevButton {
  left: 20px;
}
.nextButton {
  right: 20px;
}
.xiz81{
    color:#65686c;
}
.border-shadow-model {
  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, .2), 0 2px 4px 0 rgba(0, 0, 0, .1), inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.x1mvi0mv{
  color:#0064d1;
}
.bg-model{
   background-color: rgba(244, 244, 244, .8);
}
.space-nowrap{
    white-space: nowrap;
}
.image160{
    height:160px !important; 
    width:160px !important;
}
.image62{
    height:62px !important;
    width:62px !important;
}
.borderbox{
    box-shadow: 1px 1px 0 0 rgba(0, 0, 0, .08), 1px 1px 4px 0 rgba(0, 0, 0, .1);
}

.border-box-shadow {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* VIDEO */
.video-container {
  position: relative;
  cursor: pointer;
}

.video-thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: white;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.video-container:hover .play-icon {
  opacity: 1;
}

.video_duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
}

.video-container:hover video {
  filter: brightness(0.7);
}





.paginationButton{ 
        height:34px;
        padding: 5px 12px 6px;
        margin:6px;
        display: inline;
    }
.status {
    background-color: rgba(10, 10, 20, 0.6);
    border-radius: 999px;
    color: rgb(255, 255, 255);
    display: inline-block;
    padding: 2px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    text-transform: none;
    font-family: Inter, "Adjusted Arial", Tahoma, Geneva, sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    right:8px;
    top:8px;
}

.grid-posts {
      display: grid; 
      grid-template-columns: repeat(2, 1fr); 
      grid-gap: 0px;
}

.two_grid {
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  grid-gap: 14px;
}


.reel-grid{
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-gap: 14px;
}

.statusView {
    background-color: rgb(208, 60, 11);
    border-radius: 999px;
    color: rgb(255, 255, 255);
    display: inline-block;
    padding: 2px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    text-transform: none;
    font-family: Inter, "Adjusted Arial", Tahoma, Geneva, sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    left:8px;
    top:8px;
}

.new {
    background-color: rgb(208, 60, 11);
    border-radius: 999px;
    color: rgb(255, 255, 255);
    display: inline-block;
    padding: 2px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    text-transform: none;
    font-family: Inter, "Adjusted Arial", Tahoma, Geneva, sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    right:8px;
    top:8px;
}
.save {
    color: rgb(255, 255, 255);
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    text-transform: none;
    font-family: Inter, "Adjusted Arial", Tahoma, Geneva, sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    right:8px;
    top:8px;
}
.active {
     color: #0866ff; /* Ví dụ: Màu đỏ cho thẻ active */
     font-weight: 500;
}    
.imageNumber {
    align-items: center;
    background: url(https://static.chotot.com/storage/chotot-icons/svg/number-image.svg) no-repeat;
    color: #fff;
    display: flex;
    font-weight: 700;
    height: 20px;
    justify-content: center;
    left: 8px;
    position: absolute;
    top: 8px;
    width: 24px;
}

/* slideImage */
.slideInner {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.slideImage {
  float: left;
  width: 100%;
  display: none;
}
.slideImage img {
  width: 100%;
  height: 100%;
}
.dotSlide {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  margin: 0 5px;
}
.dotSlide.active {
  background: #0866ff;
  border: 2px solid #0866ff; /* Màu viền bạn muốn */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Hiệu ứng bóng (tuỳ chọn) */
}
/* End slideImage*/

.border-shadow{
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}
.border-shadow1{
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .1), 0px 8px 16px rgba(0, 0, 0, .1);
}
.height-auto{
  height:auto;
}
.widht-auto{
  width:auto;
}
.boxshadowView{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
.boxshadow0{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
.boxshadow{
  box-shadow:0 12px 28px 0 rgba(0, 0, 0, .2), 0 2px 4px 0 rgba(0, 0, 0, .1);
}
.lineheight24{
    line-height:24px;
}
.lineheight20{
    line-height:20px;
}
.bgheader{
    background-color: #f8f9fa;
}
.bghead{
   background-color: #f1f6f6;
}
.bgmodal{
    background: rgba(0, 0, 0, 0.5);
}
.bgthumbnail{
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  background-image: url(https://static.chotot.com/storage/default_images/c2c_ad_image.jpg);
  background-size: cover!important;
  border-radius: 2px;
  display: inline-block;
  overflow: hidden;
  position: relative;
  width: 100%;
  background-position: 50% 50%;
  overflow:hidden;
  background-color:#f4f4f4;
}
.bgcover{
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  background-image: url(https://cnd.zinail.com/image/default/bgavatar.png);
  background-size: contain;
  background-position: 50% 50%;
  text-indent: 100vw;
}
.bgavatar{
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  background-image: url(https://files.naibook.net/image/default/bgavatar.png);
  background-size: contain;
  background-position: 50% 50%;
  text-indent: 100vw;
}
.dropdownIcon {
    display: block;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: #000;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='1em' height='1em' %3E%3Cpath d='M10 14a1 1 0 0 1-.755-.349L5.329 9.182a1.367 1.367 0 0 1-.205-1.46A1.184 1.184 0 0 1 6.2 7h7.6a1.18 1.18 0 0 1 1.074.721 1.357 1.357 0 0 1-.2 1.457l-3.918 4.473A1 1 0 0 1 10 14z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat;
	   background-position: right .7em top 50%, 0 0;
	   background-size: 1.2em auto, 100%;
}
.xaj1gnb {
     background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=) no-repeat 50%;
}
.xnzfen{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAOBAMAAAD3WtBsAAAAFVBMVEUAAAAAAAAAAAAAAAAAAAAAAAD29va1cB7UAAAAB3RSTlMCCwQHGBAaZf6MKAAAABpJREFUCNdjSGNIY3BhCGUQBEJjIFQCQigAACyJAjLNW4w5AAAAAElFTkSuQmCC);
}
.x1wbvgsv {
     background-size: 1px 7px;
}
.x1w3jsh0 {
  background-repeat: repeat-x;
}
.x10l6tqk {
     position: absolute;
}
.xsugpx9 {
  bottom: -6px;
}
.x1hagigm {
  height: 7px;
}
/* selectOption */
.selectOption {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #000;
    background-color: #fff;
    border: 1px solid #c0c0c080;
    border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='1em' height='1em' %3E%3Cpath d='M10 14a1 1 0 0 1-.755-.349L5.329 9.182a1.367 1.367 0 0 1-.205-1.46A1.184 1.184 0 0 1 6.2 7h7.6a1.18 1.18 0 0 1 1.074.721 1.357 1.357 0 0 1-.2 1.457l-3.918 4.473A1 1 0 0 1 10 14z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: 1.2em auto, 100%;
}
.selectOption:hover {
    cursor: pointer; /* Sử dụng con trỏ kiểu "pointer" (bàn tay) */
}
/*  */



/*  */
._9dls ._6s5d {
    overflow-y: visible!important;
}
.minheight{
  min-height:74vh;
}
._6s5d {
    background-color: #f2f4f7 !important;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;
    min-height: 100vh;
}
._9dls {
    overflow-y: scroll!important;
}
.iconloading {
  background-image: url();
  height: 24px;
  width: 24px;
}
.borderright{
   border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.borderleft{
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.h60{
  height:56px;
}
.h70{
  height:70px;
}
.top60{
  top:56px;
}

.top74{
  top:74px;
}

.top120{
  top:120px;
}
.transform-capitalize{
  text-transform: capitalize  
}
.background000{
  background:#000;
}
.border_box{
   border: 2px solid rgb(0, 106, 255);
}
.x1mvi0{
  color:#0866ff;
}
.xlhe6ec{
     background-color:#f8f9fb;
}
.x1ncir08 {
    max-width: 240px;
}

.x1ncir09 {
    max-width: 340px;
    width:100%;
}

.x1e56ztr {
  margin-bottom: 8px;
}
.minwidth240{
  min-width:240px;
}

.maxwidth340{
    max-width:340px;
    width:100%;
}
.h_slide{
    height:300px;
}

.maxwidth240{
  max-width:260px;
  width:100%;
}
.maxwidth-dropdown{
      max-width:340px;
      width:100vw;
}
.bgcolor0{
    background: #0866ff !important; color:#fff;
}
.bg000{
    background-color:#000 !important;
    color:#fff;
    font-weight:600;
}
.maxwidth640{
  max-width:640px;
  width:100%;
}

.maxwidth695{
    max-width:695px;
    width:100%;
}

.maxwidth685{
    max-width:685px;
    width:100%;
}

.minwidth120{
   min-width:120px;
}
.minwidth80{
  min-width:84px;
}
.maxwidth500{ 
  max-width:500px;
  width:100%;
}
.maxwidth600{ 
  max-width:600px;
  width:100%;
}
.maxwidth700{ 
    max-width:700px;
    width:100%;
}
.maxwidth740{ 
    max-width:740px;
    width:100%;
}
.maxwidth300{ 
    max-width:300px;
    width:100%;
}
.paddingtop0{
  padding-top:0px !important;
}
.paddingtop14{
    padding-top:14px;
}
.padding7{
    padding:7px !important;
}
.margin7{
    margin:7px !important;
}
.not-cursor{
    cursor: not-allowed !important;
}
.paddingbottom64{ 
  padding-bottom:64px;
}
.paddingbottom0{
    padding-bottom:0px !important;
}
.maxwidth540{ 
  max-width:540px;
  width:100%;
}
.maxwidth400{
  max-width:400px;
  width:100%;
}
.padding140{
  padding: 12px 0px;
}
/* HEN VALUE IMGAE NONE OR UNDIFINE */
.icon140{
  height:104px;
  width:104px;
}
.objectfit{
  object-fit:cover;
}
/*  */
.icon20{
  height:20px; 
  width:20px;
}
/* focusin  and focusout*/
.padding0{
  padding:0px;
}
.displaygrid {
  display: grid !important;
}
.grid2{
    grid-template-columns: calc(100%/2 - 6px) calc(100%/2 - 6px);
    display: grid !important;
}
.gridtemplatecolumns_3 {
  grid-template-columns: calc(100%/3) calc(100%/3) calc(100%/3);
}
.gridtemplatecolumns_2 {
  grid-template-columns: calc(100%/2 - 7px) calc(100%/2 - 7px);
}
.maxheight400{
  max-height:400px; 
  height:100%;
}
.flexrow {
  flex-direction: row !important;;
}
.textarea, .inputtext, .inputpassword {
  -webkit-appearance: none;
  border: 1px solid #ccd0d5;
}
.right14{ 
   right:14px;
}
.left14{
    left:14px;
}
.top14{
    top:14px;
}
.bottom14{
    bottom:14px;
    
}
.bottom6{
    bottom:6px;
}
.right6{
    right:6px;
}
.border2-fff{
    border:2px solid #fff;
}
.select_icon_hide{
  -webkit-appearance: none;
}
.index14{ 
  z-index:14;
}
/*  */
.alert-error{
    border-radius:2px; 
    text-align: center;
    overflow: hidden;
    padding:12px;
    line-height: 15px;
    border: 1px solid #dd3c10;
    background: #ffebe8;
    margin-bottom:14px;
}
.fielderror {
  border: 1px solid #d0120b!important;
  border-color: #CC0C39 !important; 
  box-shadow: 0 0 0 1px #cc0c39 inset !important;
}
.fieldclick{
    border:2px solid #0866ff !important;
}
.bordercolor{ 
   border: 1px solid #ced0d4;
}
.bordercolorthin{ 
   border: 0.1px solid rgba(0, 0, 0, .1);
}
.borderstory{
    border:3px solid #0866ff !important;
}
.borderimage{
    border:1px solid rgba(0, 0, 0, .1) !important;
}
/* header css */
.displaynone{
  display:none; 
}
.buttonsubmit {
font-size: 20px;
line-height: 48px;
padding: 0 16px;
}
.font16{ 
  font-size:16px;
}
.font15{ 
  font-size:15px;
}
.font24{ 
  font-size:24px;
}
.font34{ 
    font-size:34px;
}
.font28{ 
    font-size:28px;
}
.font20{ 
    font-size:20px;
  }
.margintop4{ 
  margin-top:4px;
}
.margintop40{
    margin-top:40px;
}
.margin14{
    margin:14px;
}
.margin014{
    margin:0px 14px;
}
.font34{
  font-size:34px;
}
.header_color{
  background:#fff;
}
.header_background {
  background:#fff;
}
.maxwidth1000 {
  width:100%;
  max-width:1000px;
}
.maxwidth1200 {
    width:100%; 
    max-width:1200px;
}
.maxwidth1240 {
    width:100%; 
    max-width:1240px;
}
.maxwidth1024{ 
    max-width:940px;
    width:100%;
}
.grid_column{
   grid-template-columns:calc(100%/4) calc(100%/4) calc(100%/4) calc(100%/4);
}
.grid_column2{
    grid-template-columns:calc(100%/2) calc(100%/2) ;
 }
.padding140 {
  padding: 14px 0px;
}
.a_color{ 
  color:#111;
  font-size:14px;
  font-weight:600;
}
.backgroundnone{
  background: none;
}
.marginleft14{
  margin-left:14px;
}
.marginauto{ 
  margin:auto;
}
.margintop14{
  margin-top:14px;
}
.margintop14-mobile{
    margin-top:12px; 
}
.margintop24{
  margin-top:24px;
}
.marginright14{
  margin-right:14px;
}
.media-marginleft14{
    margin-left:12px;
}
.sticky{
  position:sticky;
}
.stickyall{
    position:sticky;
}
.font17{
  font-size:17px;
}
.backgroundfff{
  background: #fff;
}
.cursor{
  cursor:pointer;
}
.marginleft{
  margin-left:8px;
}
.marginleft4{
  margin-left:4px;
}
.padding4{ 
  padding:4px;
}
.linkmore{
  color:#0866ff; 
  font-weight:500;
  font-size:18px;
}
.marginleft{
  margin-left:8px
}
.padding014{
  padding: 0px 12px;
}
.padding010{
  padding: 0px 10px;
}
/* CSS FOR MODAL */
/*  */
.padding14{
  padding:14px;
}
.icon32{
  height:32px;
  width:32px;
}
.buttoncolor{
  background: #0866ff !important;
  font-weight: 600;
  color:#fff;
}
.radius8{
  border-radius:8px;
}
.radius4{
  border-radius:4px;
}
.radius24{
border-radius:24px;
}
.radius2{
  border-radius:2px;
}
.w100{
  width:100%;
}
.bordernone{
  border:none;
}
.linkbackground{
  border:none;
  border-radius:8px;
  overflow:hidden;
  background:#0066c0;
  padding:10px; 
  color:#fff;
  font-weight:600;
}
.h34{
  height:34px;
}
.h30{
  height:30px;
}
.linkcolor{
  color: #0866ff;
}
.texterror{
  color: #c40000 !important;
}
.borderformtext{
  border-radius:4px;
  overflow:hidden;
  border:1px solid #dee0e1;
  background:#fff;
  width:100%;
}
.padding24{
  padding:24px;
}
.name_post{
font-size:14px;
color:#606060;
margin-left:4px;
}
.date_time_post{
  font-size:12px;
  color:#606060;
}
.name_post_view{
font-weight:600;
margin-left:4px;
font-size:18px;
}
.date_post_view{
  font-size:18px;
  color:#606060;
  font-weight:600;
}
.line1{
    display: -webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient: vertical;
    overflow:hidden;
    text-overflow:ellipsis;
}
.line2{
  display: -webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}
.line4{
    display: -webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient: vertical;
    overflow:hidden;
    text-overflow:ellipsis;
}
/* stylepages */
.positionfixed{
  position:fixed;
}
.input_checkbox_icon {
  height: 20px; 
  width: 20px;
  border: 2px solid rgb(167, 166, 171); 
  position: absolute;
  left: 14px; 
 }
.position_relative {
  position:relative; 
 }
.position_absolute {
 position:absolute; 
}
.position_fixed{
  position:fixed;
}
.padding044 {
 padding:0px 44px;
}
.itempropertys{
 width: 240px;
 overflow:hidden;
 background: #FFF;
 flex-grow: 1;
 flex-shrink: 1;
 flex-basis: auto;
}
.itempropertys_one{
box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
border-radius:2px;
overflow:hidden;
background: #FFF;
border-bottom: 4px solid #1b74e4;
 flex-grow: 1;
 flex-shrink: 1;
 flex-basis: auto;
 margin-bottom:14px;
}
.note {
  color: #be4b49;
  font-weight: 700;
}
.marginbottom14{ 
    margin-bottom:14px;
}
.bordertop{
  border-top: 1px solid #f0f1f1;
}

.marginbottom1{ 
    margin-bottom:1px;
}

.borderbottom{
  border-bottom: 1px solid rgb(140 140 140/.2);
}
.border-box-bottom{
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.08);
}
.borderbottom-bold{
   border-bottom: 1px solid rgb(140 140 140/.2);
}
.bordertop-bold{
   border-top: 1px solid rgb(140 140 140/.2);
}
.marginbottom24{ 
  margin-bottom:24px;
}
.marginright4{
  margin-right:4px;
}
.marginbottom4{
  margin-bottom:4px;
}
.font14{
  font-size:14px;
}
.font11{
  font-size:11px;
}
.flex{
  display:flex;
}
.colorfff{ 
  color:#fff;
}
.color0{ 
    color:#000;
  }
.colortext{
    color: #65676B;
}
.lincolor1 {
  color: #65676b;
  font-weight: 600
}
.linkhover:hover{
  color:#c45500;
}
.bgfff{
    background-color:#fff;
}
.menuhover:hover{
    background-color:#f7f7f7 !important;
}
.menuhover2:hover{
    background-color:#d8dadf !important; 
}
.menuhover3:hover{
    background-color:#f7ca00 !important;
}
.textcolor{
    color: rgb(83, 100, 113);
}
.texthover:hover{
    color:#f86300  !important;
   }
.itemhover:hover {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 4px 0px;
    z-index: 10;
}
.marginright{
  margin-right:8px;
}
.flexaligncenter{
  display:flex;
  align-items:center;
}
.contentspacebetween{
  justify-content:space-between;
}
.contentcenter{
  justify-content:center
}
.contentstart{
    justify-content: flex-start; 
}

.contentend{
     justify-content:flex-end;
}
.flexstart{
  justify-content:flex-start;
}
.flexend{
  justify-content:flex-end;
}
.flexcolumn{ 
    flex-direction:column;
} 


.flexend-items{
    align-items: flex-end;
}

.textaligncenter{ 
  text-align:center;
}
.flexwrap{
    flex-wrap: wrap;
}
.paddingbottom14{
  padding-bottom:12px;
}
.top8{
  top:8px;
}
.left8{
  left:8px;
}
.right8{
  right:8px;
}

.top0{
  top:0px;
}
.right0{
  right:0px;
} 
.left0{
  left:0px;
}
.bottom0{
  bottom:0px;
}
.h50{
    height:50px;
}
.h44{
    height:44px;
}
.h40{ 
  height:40px;
}
.h100{
   height:100%;
}
.vh100{
  height:100vh;
}
.vw{
  width:100vw;
}
.font12{
  font-size:12px;
}
.selectbox{
  appearance: none;
  outline: none; 
}
.icon24{
height:24px;
width:24px;
}
.icon94{
    height:94px;
     width:94px;
}
.icon34{
  height:34px;
  width:34px;
}
.icon40{
  height:40px;
  width:40px;
}
.x1nci43g{
    max-width:624px;
    width:100%;
}
.icon50{
     height:50px;
     width:50px;
}
.icon64{
  height:64px;
  width:64px;
}
.icon124{
    height:124px;
    width:124px;
}
.iconbrand{
  border-radius:8px !important;
}
.bordercolorfff{
   border: 4px solid #fff !important;
}
.margin4{
  margin:4px;
}
.circle{
  border-radius: 50%; /* the magic */
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  text-align: center;
  overflow:hidden;
  display:flex; 
  justify-content:center;
  align-items:center;
}
.circlecolor{
  background-color:#e4e6eb;
}
.colorprice{
  color: #d0021b;
}
.vipcolor{
  color: #bb2c2c!important;
}
.hrline{
  border: 0;
  display: block;
  height: 1.4px;
  margin: 1rem 0 14px;
  padding: 0;
  border-color:  #ced0d4; 
  border-top: 1px solid  #ced0d4;
}
.contentspacearound{
   justify-content:space-around;
}
.bordertop4{
  border-top: 4px solid rgb(244, 244, 244);
}
.borderbottom4{
    border-bottom: 4px solid rgb(244, 244, 244);
}
.buttonfilter{
    background-color: #fff; 
    border-radius: 2px;
    color: #111;
    height: 32px;
    padding: 8px;
    outline: none;
    overflow: hidden;
    padding: 0px 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
    border: 1px solid rgb(209, 209, 213);
    font-weight:600;
}
.ahover:hover{
  background:#e4e6e9;
}
.ahover{
   border-radius:8px; 
   padding: 4px;
}
/* style for lable and form*/
.flexwrap{
  flex-wrap: wrap;
}
.font18{
  font-size:18px;
}
.fontweight{
  font-weight:600;
}
.fontweight500{
  font-weight:500;
}
.padding00014 {
  padding:0px 0px 0px 14px;
}
.margintop8{
    margin-top:8px;
}
.marginbottom8{
    margin-bottom:8px;
}
.marginleft8{
    margin-left:8px;
}
.marginright8{
    margin-right:8px;
}
/* CSS CREATE PROPERTY */
.h40{
  height:40px;
}
.zindex400{
  z-index:400;
}
.zindex444{
    z-index:444;
  }
.zindex40{
  z-index:40;
}
.zindex20{
    z-index:20;
  }
.content_dropdown_box{
  overflow-x:hidden;  
  overflow-y:auto; 
  box-shadow: 0 2px 4px rgb(0 0 0 / 40%);
}

/* Trạng thái được chọn checked */
.input-radio:checked {
     border-color: #0866ff;
     border-width: 6px;
}

/*css mặt định cho radio */
.input-radio {
    appearance: none;
    box-sizing: border-box;
    display: inline-block;
    height: 20px;
    width: 20px;
    background: rgb(255, 255, 255);
    border: 2px solid rgb(167, 166, 171);
    border-radius: 50%;
    cursor: pointer;
    margin: 0px;
    transition: border-color 200ms ease-in-out, background-color 200ms ease-in-out;
    outline: none;
    box-shadow: none;
}
.overflowauto{
  overflow:auto;
}
.overflowhidden{
    overflow:hidden;
}
.overflowx{
    overflow-y: hidden;
    overflow-x: auto;
}
.overflowy{
    overflow-x: hidden;
    overflow-y: auto;
}
.border{
	border: 1px solid #dee0e1;
}
.flexbasis{
    flex-basis: 25%;
}
.display{
    display:block;
}
.x1e56z93{
  display: grid; 
  grid-template-columns: 240px auto; /* Cột đầu 200px, cột thứ hai chiếm phần còn lại */ 
  grid-gap: 14px;
}
.xmjcpbm{ 
     background-color: #f0f2f5;
}


/* MOBILE  max-width: 980px*/
@media screen and (max-width: 980px) {
/* Đối với màn hình nhỏ hơn hoặc bằng 768px */
.grid-posts {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 0px;
}
.two_grid {
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  grid-gap: 14px;
}
.x1e56z93{
     display: grid; 
     grid-template-columns: 240px auto; /* Cột đầu 200px, cột thứ hai chiếm phần còn lại */ 
     grid-gap: 14px;
}
.reel-grid{
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    grid-gap: 14px;
}
.media-contentstart{
    justify-content: flex-start !important; 
}
.media-top{
    top:94px!important;
}
.borderleft{
        border-left: 0px solid rgba(0, 0, 0, 0.1) !important;
}
.h_slide{
    height:240px !important;
}
.media-minwidth{
    min-width:100% !important;
}
.flexbasis{
    flex-basis: 33%;
}
.mobile{
    display:none !important;
}
.mobile-block{
    display:block !important;
}
.mobile_displayblock{
      display:block !important;
}
.maxwidth600{
    max-width:100%;
    width:100%;
}
.maxwidth400{
    max-width:100%;
    width:100%;
}
.maxwidth700{
    max-width:100%;
    width:100%;
}
.maxwidth300{
    max-width:100%;
    width:100%;
}
.maxwidth740{ 
    max-width:740px;
    width:100%;
}
.sticky {
    position: initial;
}
.display{
    display:none;
}
.margintop14-mobile{
    margin-top:0px; 
}
.media-marginleft14{
    margin-left:0px;
}
.media-right0{
   right:0px !important;
}
.media-left0{
   left:0px !important;
}

}

/* MOBILE  max-width: 560px*/
@media screen and (max-width: 560px) {
    /* Đối với màn hình nhỏ hơn hoặc bằng 560px */
.grid-posts {
    grid-template-columns: 1fr;
}
.two_grid {
      display: grid; 
      grid-template-columns: repeat(1, 1fr); 
      grid-gap: 14px;
}
.reel-grid{
      display: grid; 
      grid-template-columns: repeat(1, 1fr); 
      grid-gap: 14px;
}
.mobile-maxwidth {
   max-width: 100% !important;
}
.media-contentstart{
    justify-content: flex-start !important; 
}
.flexbasis{
  flex-basis: 50%;
}
.media-right0{
  right:0px !important;
}
.media-left0{
  left:0px !important;
}
.borderleft{
   border-left: 0px solid rgba(0, 0, 0, 0.1) !important;
}
.h_slide{
    height:240px !important;
}
.maxwidth600{
        max-width:100%;
        width:100%;
}
.maxwidth400{
        max-width:100%;
        width:100%;
}
.maxwidth700{
        max-width:100%;
        width:100%;
}
.maxwidth300{
        max-width:100%;
        width:100%;
}
.maxwidth740{ 
        max-width:740px;
        width:100%;
}
.sticky {
        position: initial;
}
.display{
        display:none;
}
.margintop14-mobile{
        margin-top:0px; 
}
.media-marginleft14{
        margin-left:0px;
}

.x1e56z93 {
     grid-template-columns: 1fr; /* Chuyển thành một cột */
     grid-gap: 14px;
}

}