:root {
  --main_color:#006d30;
  --main_color_light: #41b24a;
  --gray_color:#f2f2f7;
  --gold_color: #F2AD09;

  --success_color:#219C90;
  --warning_color:#FACE15;
  --danger_color:#D83F31;
  --icon_color:rgba(255,255,255,.15);
  --icon_border_color:rgba(255,255,255,.15);
  --icon_bg:rgba(0,0,0,.18);
  --icon_hover:rgba(255,255,255,.6);
  --icon_bg_hover:rgba(255,255,255,.1);
  --text_color:#1c1c1e;

  --text_font: "Roboto", sans-serif;
  --title_font: "Roboto", sans-serif;
  --font_xl:20px;
  --font_lg:18px;
  --font_md:16px;
  --font_sm:14px;
  --clamp:3;
}

@media only screen and (max-width:600px) {
  :root {
    --font_xl:18px;
    --font_lg:16px;
    --font_md:14px;
    --font_sm:12px;
    --clamp:2;
  }
}


/*Reset CSS*/

* {
  padding:0;
  margin:0;
}

ol,
li {
  list-style:none;
}

template {
  display:none;
  visibility:hidden;
}

blockquote *{
  margin: 0px !important;
  padding: 0px !important;
}

ul,
ol {
  padding:0 !important;
  margin:0 !important;
}

a {
  text-decoration:none !important;
  text-transform:capitalize;
  color: rgb(43, 93, 185);
}

.list_seper a,.breadcrumb a, nav a,h1 a, h2 a, h3 a, h4 a, h5 a{
  color: #000;
}
a:hover {
  color: #0a58ca;
  text-decoration: underline !important;
}

body {
  overflow:auto;
  overflow-x:hidden;
}

h1,
h2,
h3,
h4,
h5,
a,
.h1,
.h2,
.h3,
.h4,
.h5,
.title {
  font-family:var(--title_font);
  font-weight:600 !important;
  text-transform:capitalize !important;
}

head,
main,
footer {
  transition:all 0.5 ease-in-out;
}

h1,
.h1 {
  font-size:calc(var(--font_xl) + 4px) !important;
}

h2,
.h2 {
  font-size:var(--font_xl) !important;
}

h3,
.h3 {
  font-size:var(--font_lg) !important;
}

h4,
.h4 {
  font-size:var(--font_md) !important;
}

h5,
.h5 {
  font-size:var(--font_sm) !important;
}

h6,
.h6 {
  font-size:calc(var(--font_sm) - 4px) !important;
}

.font_xl {
  font-size:var(--font_xl) !important;
}

.font_lg {
  font-size:var(--font_lg) !important;
}

.font_md {
  font-size:var(--font_md) !important;
}

.font_sm {
  font-size:var(--font_sm) !important;
}

svg, svg path {
  fill:var(--main_color);
}

img,iframe{
  max-width: 100%;
}

input.form-control {
  border-radius:2px;
  -webkit-border-radius:2px;
}

.modal {
  z-index:99999999;
}

.modal-backdrop {
  background:unset;
  backdrop-filter:blur(5px) brightness(.5);
  -webkit-backdrop-filter:blur(5px) brightness(.5);
  z-index:99999998;
}

.modal-backdrop.show {
  opacity:1;
}

.modal .btn-close {
  opacity:1;
  background:#FFF url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b52121'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  position:absolute;
  right:0;
  top:0;
  border-radius:50%;
  -webkit-border-radius:50%;
  padding:5px;
  transition:all .2s ease-in-out;
  z-index:1;
}

.form-control:focus,
.accordion-button:focus {
  background-color:#fff;
  border-color:#86b7fe;
  outline:0;
  box-shadow:0 0 0 1px rgba(13,110,253,.25);
}

.modal .btn-close:hover {
  background-color:#F1F1F1;
  transform:rotate(180deg);
}

.overflow_h {
  overflow:hidden !important;
  overflow-x:hidden !important;
  overflow-y:hidden !important;
}

.cursor_p {
  cursor:pointer;
}

::-webkit-scrollbar {
  width:8px;
  cursor:pointer;
}

::-webkit-scrollbar-track {
  background:var(--gray_color);
}

::-webkit-scrollbar-thumb {
  border-radius:1px;
  -webkit-border-radius:1px;
  background:#CCC;
}

::-webkit-scrollbar-thumb:hover {
  background:var(--main_color);
}

/*Primary class*/

.bg_primary {
  background:var(--main_color);
  background:linear-gradient(100deg,var(--main_color),var(--main_color_light));
  transition:transform .2s cubic-bezier(.4,0,.2,1);
}

.bg_gray {
  background:var(--gray_color);
}

.bg_gray_gdown{
  background: #FFFF;
  background-image: linear-gradient(var(--gray_color) , #FFF);
}

.bg_white {
  background:#FFF;
}

.bg_light {
  background:#F1F1F1;
}

.bg_pattern {
  background:url("../img/pattern_slash.png") repeat;
}
.border_gray{
  border: solid 1px var(--gray_color);
  border-radius: 1px;
}

.thumb img {
  max-width:100%;
  height:var(--h);
  object-fit:cover;
  border-radius:1px;
  -webkit-border-radius:1px;
}

.text_line {
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:var(--clamp);
  -webkit-box-orient:vertical;
}

a[more_text]:after {
  content:attr(more_text);
  font-size:var(--font_sm);
  margin-left:10px;
  color:var(--main_color);
}

.sticky {
  position:-webkit-sticky;
  position:sticky;
  top:10px;
}

.description {
  font-size:var(--font_sm);
  font-style:italic;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:var(--clamp);
  -webkit-box-orient:vertical;
}

.price {
  font-family:var(--title_font);
  font-weight:600;
  font-size: calc(var(--font_md) - 2px);
  position:relative;
  padding-right:10px;
  white-space:nowrap;
  color: red;
}

.price:after {
  content:attr(unit);
  font-size:calc(var(--font_xl) - 10px);
  position:absolute;
}

.price[old_price]:before {
  content:attr(old_price);
  font-size:calc(var(--font_xl) - 6px);
  text-decoration:line-through;
  margin-right:10px;
  color:#777;
  font-weight:300;
}

.label_success {
  border-left:solid 5px var(--success_color);
  background:#F1F1F1;
  padding:2px 2px 2px 6px !important;
  border-radius:1px;
  -webkit-border-radius:1px;
}

.label_warning {
  border-left:solid 5px var(--warning_color);
  background:#F1F1F1;
  padding:2px 2px 2px 6px !important;
  border-radius:1px;
  -webkit-border-radius:1px;
}

.label_danger {
  border-left:solid 5px var(--danger_color);
  background:#F1F1F1;
  padding:2px 2px 2px 6px !important;
  border-radius:1px;
  -webkit-border-radius:1px;
}

[open_modal] {
  cursor:pointer;
}

.tmp {
  min-height:unset;
}

body {
  color:var(--text_color);
  font-family:var(--text_font);
  font-size:var(--font_md);
  overscroll-behavior:contain;
  direction:ltr;
  -webkit-font-smoothing:antialiased;
}

.search_box {
  display:flex;
}

.search_box form {
  display:flex;
  height:30px;
  outline:solid var(--main_color) 1px;
  justify-content:space-between;
}

.search_box input {
  width:calc(100% - 30px);
}

.search_box select {
  width:calc(40% - 40px);
}

.search_box input,
.search_box select {
  border:none;
  padding:2px 5px 2px 5px;
}

.search_box select {
  border-left:solid 2px var(--gray_color);
}

.search_box input:focus-visible,
.search_box select:focus-visible {
  outline:none;
}

.search_box button {
  border:none;
  height:30px;
  width:30px;
  background:var(--main_color);
  outline:solid 1px var(--main_color);
}

.search_box button svg {
  width:auto;
  height:25px;
  color:#fff;
}

.search_box button svg path {
  fill:#fff;
}

/*.main_menu nav menu*/
.main_menu {
  position: relative;
  z-index: 99;
  background: var(--gray_color);
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
  border-top: solid 3px var(--main_color);
}
.main_menu .container{
  left: -5%;
  transition: left .2s ease-in-out;
}
.main_menu nav ul li{
  cursor: pointer;
  position: relative;
}
.main_menu nav ul li:hover {
  background: rgba(0, 0, 0, .1);
}
.main_menu nav > ul {
  display: flex;
  flex-wrap: wrap;
}
.main_menu nav > ul > li{
  padding: 0px 10px 0px 10px;
  height: 45px;
  display: flex;
  align-items: center;
}
.main_menu nav ul li *{
  font-size: var(--font_lg);
  font-weight: bold !important;
  display: block;
}

.main_menu nav > ul ul{
  position: absolute;
  top: 100%;
  left: 0px;
  background: var(--gray_color);
  z-index: 1;
  border: solid 1px #bbb;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  border-radius: 0px 0px 3px 3px;
  display: none;
}

.main_menu nav > ul ul li{
  padding: 3px 20px 3px 10px;
  min-width: 200px;
}
.main_menu nav > ul ul li *{
  white-space: nowrap;
  font-size: calc(var(--font_lg) - 2px);
}

.main_menu nav > ul li.sub:hover ul{
  display: block;
}

.main_menu nav > ul li.sub span{
  display: flex;
  align-items: center;
}
.main_menu nav > ul li.sub span:after{
  content: "";
  width: 0;
  height: 0;
  margin-left: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--text_color);
}
.main_menu .bottom{
  display: none;
}

.logo-box{
  position: relative;
}

.btn_open_menu {
  width: 35px;
  height: 35px;
  border: none;
  display: flex;
  background: #FFF;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: solid 1px #bbb;
}
.btn_open_menu_fix{
  width: 45px;
  height: 45px;
} 
.btn_open_menu svg{
  width: 25px;
  height: 25px;
}
.btn_open_menu svg path{
  fill: var(--text_color);
}
.close-mobile-menu {
  display: none;
  height: 45px;
  width: 45px;
  background: rgba(255, 255, 255, 0.2);
  border: solid 1px rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  position: absolute;
  top: 10px;
  right: 10px;
}
.close-mobile-menu:hover{
  background: rgba(255, 255, 255, 0.3);
  border: solid 1px rgba(255, 255, 255, 0.4);
}
.close-mobile-menu:before,.close-mobile-menu:after{
  content: "";
  width: 5px;
  height: 22px;
  position: absolute;
  top: 10px;
  left: 19px;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
}
.close-mobile-menu:before{
  transform: rotate(45deg);
}
.close-mobile-menu:after{
  transform: rotate(-45deg);
}

.nav-mobile-active .bottom{
  display: block;
}
.nav-mobile-active nav{
  display: block !important;
}
.nav-mobile-active .close-mobile-menu{
  display: block;
}

.nav-mobile-active .btn_open_menu,.nav-mobile-active .btn_open_menu_fix{
  display: none;
}
.nav-mobile-active {
  overflow: hidden;
}
.nav-mobile-active .main_menu {
  display: block !important;
}

.nav-mobile-active .main_menu {
  position: fixed;
  backdrop-filter: blur(5px) brightness(0.5);
  -webkit-backdrop-filter:blur(5px) brightness(0.5);
  background: unset;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.nav-mobile-active .main_menu .container{
  position: absolute;
  height: 100%;
  background: #FFF;
  width: auto;
  max-width: 70%;
  min-width: 50%;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 10px 20px 10px;  
  left: 0px;
}
.nav-mobile-active .main_menu .container *{
  color: var(--text_color);
}
.nav-mobile-active .main_menu nav > ul > li{
  border-top: solid 1px #CCC;
}
.nav-mobile-active .main_menu nav ul li {
  display: block;
  height: auto;
  padding: 5px;
}
.nav-mobile-active .main_menu nav ul li *{
  white-space: normal;
}
.nav-mobile-active .main_menu nav ul li:hover{
  background: var(--gray_color);
}
.nav-mobile-active .main_menu nav ul{
  display: flex;
  flex-direction: column;
}

.nav-mobile-active .main_menu nav ul ul{
  background: unset;
  position: relative;
  display: none;
  border: none;
  box-shadow: unset;
}
.nav-mobile-active .main_menu nav > ul li.sub:hover ul{
  display: none;
}
.nav-mobile-active .main_menu nav > ul li.sub.active span{
  margin-bottom: 10px;
}
.nav-mobile-active .main_menu nav > ul li.sub.active ul{
  display: block;
}
.nav-mobile-active .main_menu nav ul ul li:hover {
  background: #FFF;
}
.nav-mobile-active .main_menu nav > ul li.sub span{
  display: flex;
  align-items: center;
}
.nav-mobile-active .main_menu nav > ul li.sub span:after{
  content: "";
  width: 0;
  height: 0;
  margin-left: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--text_color); /* Thay đổi màu sắc tại đây */
}

.nav-mobile-active .main_menu.fixed{
  padding: 0px !important;
}
.nav-mobile-active .logo-box{
  justify-content:center !important;
  margin-bottom: 20px;
}

.main_menu.fixed{
  position: fixed !important;
  top: 0px;
  left: 0px;
  width: 100%;
  margin: 0px !important;
}


.category_child a {
    border: solid 1px #CCC;
    padding: 0px 15px;
    background: #f1f1f1;
    white-space: nowrap;
    height: 30px;
    margin-bottom: 5px;
    display: inline-flex;
    align-items: center;
}

/*Product List*/



/*Topic*/
.topic_garden {
    font-size: calc(var(--font_xl) + 3px) !important;
    text-transform: uppercase !important;
    text-align: center;
    color: var(--main_color);
    position: relative;
    margin-bottom: 40px;
}
.topic_garden:before {
    content: "";
    background-image: url("../img/title-divide.png");
    width: 275px;
    height: 27px;
    position: absolute;
    left: 50%;
    bottom: -30px;
    transform: translateX(-50%);
}
.topic,
.topic_s {
  border-left:solid 5px var(--main_color);
  position:relative;
}

.topic_s {
  padding-left:10px;
}

.topic:before {
  background-color:#e6e6ea;
  content:"";
  display:inline-block;
  height:1px;
  left:0;
  position:absolute;
  right:0;
  top:50%;
  -webkit-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  transform:translateY(-50%);
  z-index:1;
}

.topic a,
.topic span {
  font-family:var(--title_font);
  display:inline-block;
  position:relative;
  background:#fff;
  padding:2px 20px 2px 10px;
  z-index:2;
  transition:all 0.2s ease-in-out;
}

.topic_c {
  text-align:center;
  margin-bottom:20px;
}

.topic_c a[more_text] {
  position:relative;
}

.topic_c a[more_text]:after {
  position:absolute;
  bottom:-20px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
}


/* Collection*/

.collection .item {
  position:relative;
  margin-top:10px;
  margin-bottom:10px;
}

.collection .item img {
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:2px;
  -webkit-border-radius:2px;
  position:relative;
}

.collection .item .thumb {
  overflow:hidden;
  position:relative;
  transition:all 1s ease-in-out;
}

.collection .item .thumb:after {
  content:"";
  height:200%;
  width:15px;
  position:absolute;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,0.5),transparent);
  box-shadow:0 0 10px rgba(255,255,255,0.6);
  transform:rotate(45deg);
  top:-200%;
  right:50%;
  transition:all 1s ease-in-out;
}

.collection .item:hover .thumb:after {
  top:100%;
  width:30px;
}

.collection .item .title {
  font-size:14px;
  position:absolute;
  padding:5px;
  border-radius:2px;
  -webkit-border-radius:2px;
  background:var(--main_color);
  color:#FFF;
  bottom:-20px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
}

.collection .item .title a {
  color:#FFF;
}

/*Blog*/
.post_list .item{
  background: #f1f1f1;
}

.post_list .item .thumb {
  position:relative;
}

.post_list .item .thumb time {
  position:absolute;
  background:var(--main_color);
  font-size:12px;
  color:var(--gray_color);
  bottom:1px;
  right:1px;
  padding:1px 5px 1px 5px;
}

.post_list .item .title {
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.post_list .item img {
  width:100%;
  height:170px;
  object-fit:cover;
}

.post_detail .dx {
  font-size:var(--font_sm);
  display:flex;
}

.post_detail .dx * {
  margin-left:5px;
}

.post_detail .dx *:before {
  content:"/";
  margin-right:5px;
  color:var(--text_color);
  font-weight:bold;
}

.post_detail .dx *:first-child {
  margin-left:0;
}

.post_detail .dx *:first-child:before {
  content:unset;
}

.post_detail .description {
  background:#F1F1F1;
  padding:10px;
  border-radius:10px;
}

.post_detail .content img {
  max-width:100%;
  height:100%;
}

.post_detail ul,.post_detail ol{
  margin-left: 5px !important;
}

.post_detail .content h3, .post_detail .content h4, .post_detail .content h5{
  margin-top: 15px;
  border-left: solid 4px var(--main_color);
  padding-left: 10px;
}


.post_detail ul li{
  list-style: inside;
}

.post_side_bar img {
  width:100%;
  object-fit:cover;
  border-radius: 2px;
}

/*Product detail*/

.product_detail .asd {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}

.product_detail .asd .cs {
  padding:5px;
  background:var(--gray_color);
  border:solid 1px #F1F1F1;
  box-shadow:0 2px 5px #ccc;
}

.product_detail .inf .title {
  font-size:calc(var(--font_lg) + 10px);
}

.product_detail .inf .price {
  font-size:30px;
  font-weight:600;
  font-family:var(--title_font);
  padding-right:45px;
}

.product_detail .inf .price:after {
  content:attr(unit);
  font-size:14px;
  position:absolute;
}

.product_detail .inf .price:before {
  font-size:16px;
}

.product_detail .inf .product_option input{
  display: none;
}


.product_detail .inf .product_option label {
  padding: 2px 10px 2px 20px;
  border: solid 2px #CCC;
  background: #F1F1F1;
  border-radius: 2px;
  margin-right:10px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.product_detail .inf .product_option input:checked + .label{
  border: solid 2px red;
}

.product_detail button {
  border:none;
}

.product_detail .act {
  display:flex;
  flex-wrap:wrap;
}

.product_detail .act button {
  padding:8px 10px;
  display:flex;
  white-space:nowrap;
  align-items:center;
  margin-right:20px;
  font-family:var(--title_font);
  font-size:var(--font_md);
  font-weight:bold;
  border-radius:2px;
  -webkit-border-radius:2px;
  position:relative;
  margin-bottom:5px;
}

.product_detail .act button:last-child {
  margin-right:0;
}

.product_detail .act svg {
  width:20px;
  height:20px;
  margin-right:10px;
}

.product_detail .act .add_cart,
.product_detail .act .wish_list {
  background:#FFF;
  border:solid 1px #ccc;
  color:var(--main_color);
}

.product_detail .act .add_cart:hover,
.product_detail .act .wish_list:hover {
  background:var(--gray_color);
}

.product_detail .act .order_now {
  background:var(--main_color);
  color:#FFF;
}

.product_detail .act .order_now:hover {
  background:var(--main_color_light);
}

.product_detail .quantity input {
  max-width:170px;
  font-family:var(--title_font);
  font-size:var(--font_xl);
  line-height:var(--font_xl);
  font-weight:bold;
}

.product_detail .owl-dots {
  position:absolute;
  left:50%;
  bottom:5px;
  transform:translateX(-50%);
}

.product_detail .owl-dots button {
  width:12px;
  height:12px;
  border:solid 1px rgba(255,255,255,.5);
  background:rgba(0,0,0,.2);
  border-radius:50%;
  -webkit-border-radius:50%;
  margin-right:8px;
}

.product_detail .owl-dots button:last-child {
  margin-right:0;
}

.product_detail .owl-dots button.active {
  background:rgba(0,0,0,.5);
}

.product_detail .owl-dots button:hover {
  background:rgba(0,0,0,.5);
}

.product_detail .owl-dots:hover button:not(:hover) {
  background:rgba(0,0,0,.2);
}

.product_detail .content img {
  max-width:100%;
  height: auto;
}

.owl-carousel .owl-dots:hover button {
  opacity:unset;
}

.owl-carousel .owl-dots button:focus-visible {
  border:none;
  outline:none !important;
}

.media_frame .media_box {
  position:relative;
}

.media_frame .media_box .owl_next,
.media_frame .media_box .owl_prev,
.media_frame .media_box .owl_expand {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border-radius:50%;
  -webkit-border-radius:50%;
  background:unset;
  backdrop-filter:blur(2px) brightness(0.8);
  -webkit-backdrop-filter:blur(2px) brightness(0.8);
  border:1px solid var(--icon_border_color);
  justify-content:center;
  align-items:center;
  cursor:pointer;
  z-index:1;
  display:flex;
  opacity:0;
  visibility:hidden;
  transition:all .1s ease-in-out;
}

.media_frame .media_box:hover .owl_next,
.media_frame .media_box:hover .owl_prev {
  display:flex;
  opacity:1;
  visibility:visible;
}

.media_frame .media_box .owl_next:hover,
.media_frame .media_box .owl_prev:hover {
  background:var(--icon_bg_hover);
}

.media_frame .media_box .owl_next {
  right:5px;
}

.media_frame .media_box .owl_prev {
  left:5px;
}

.media_frame .media_box .owl_next svg path,
.media_frame .media_box .owl_prev svg path,
.media_frame .media_box .owl_expand svg path {
  fill:rgb(255,255,255,.8);
}

.media_frame .media_box .owl_expand {
  top:5px;
  right:5px;
  transform:unset;
  opacity:1;
  visibility:visible;
}

.media_frame.full {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  backdrop-filter:blur(5px) brightness(0.5);
  -webkit-backdrop-filter:blur(5px) brightness(0.5);
  z-index:999999999;
}

.media_frame.full .media_box {
  width:100%;
  max-height:100%;
  top:50%;
  transform:translateY(-50%);
  background:rgb(0,0,0,.2);
}

.media_frame.full .media_box img,
.media_frame.full .media_box picture {
  max-height:730px;  
  max-width:100%;
  width:auto;
  height: auto;
}

.media_frame.full .media_box .owl-item .item {
  display:flex;
  justify-content:center;
}

/*style content*/
.fm_content {
  padding-left: 10px;
}

.fm_content h1,.fm_content h2,.fm_content h3,.fm_content h4,.fm_content .show_more{
  margin-left: -10px;
}

.fm_content img{
  max-width: 100%;
  height: auto !important;
  margin-left: 50%;
  transform: translateX(-50%);
}
blockquote{
  border-left: solid 3px var(--main_color);
  background: #f1f1f1;
  padding: 5px 0px 5px 10px;
  display: flex;
  align-items: center;
}

.cke_editable{
  padding-left: 10px;
}

.cke_editable h1, .cke_editable h2, .cke_editable h3, .cke_editable h4{
  margin-left: -10px;
}


/*Footer*/

.copyright {
  text-align: center;
  background: var(--main_color);
  color: #FFF;
  padding: 5px;
  margin-top: 50px;
}

.context_menu {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 999999;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    font-size: 15px;
    display: none;
}
.context_menu li{
    padding: 1px 25px 1px 5px;
    min-width: 150px;
    border-left: solid 3px #FFF;
    cursor: pointer;
}
.context_menu li:hover {
    border-left: solid 2px var(--main_color);
    font-weight: 500;
}

/*SM_content*/

.sm_content {
  --h_content:350px;
  height:var(--h_content);
  overflow:hidden;
  position:relative;
  transition:all 0.5 ease;
}

.sm_content:after {
  content:"";
  position:absolute;
  bottom:-5px;
  background:linear-gradient(0deg,rgba(255,255,255,1),rgba(255,255,255,0.8),transparent);
  width:100%;
  height:calc(var(--h_content) / 3);
  max-height:200px;
  border-bottom:solid #F1F1F1 1px;
}

.sm_content .show_more {
  position:absolute;
  bottom:10px;
  left:50%;
  padding:2px 10px 2px 10px;
  transform:translateX(-50%);
  color: red;
  cursor: pointer;
  text-transform:uppercase;
  background:rgba(255,255,255,0.3);
  border:none;
  font-size:20px;
  font-family:var(--title_font);
  font-weight:600;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  padding-bottom:10px;
  z-index:1;
}

.sm_content .show_more:after {
  border:9px solid transparent;
  border-top:8px solid red;
  content:"";
  position:absolute;
  top:90%;
  left:50%;
  transform:translateX(-20%) translateY(-50%);
  animation:show_more 1s infinite ease-in-out;
}

.sm_content.show {
  height:auto;
  max-height:unset;
}

.sm_content.show:after {
  content:unset;
}

.sm_content.show .show_more {
  display:none;
}

/*Rating stars*/

.rating {
  --stars_w:20px;
  display:inline-flex;
  align-items:center;
}

.rating .stars {
  width:var(--stars_w);
  height:var(--stars_w);
  position:relative;
  margin-right:calc(var(--stars_w) / 4);
}

.rating svg {
  width:var(--stars_w);
  height:var(--stars_w);
  position:absolute;
  top:0;
  left:0;
}

.rating .stars .lit {
  overflow:hidden;
  width:var(--stars_w);
  height:var(--stars_w);
}

.rating .stars .lit svg {
  fill:var(--gold_color);
}

.rating .stars > svg {
  stroke:var(--gold_color);
}

.rating .stars .lit {
  position:absolute;
  top:0;
  left:0;
}

/*List seper*/

.list_seper {
  --seper_color:#CCC;
  --seper_w:5px;
  --seper_b:1px;
  display:inline-flex;
}

.list_seper > * {
  margin:unset;
  padding:unset;
  margin-right:calc(var(--seper_w) + var(--seper_b));
  padding-right:var(--seper_w);
  border-right:solid var(--seper_b) var(--seper_color);
}

.list_seper > *:last-child {
  padding-right:unset;
  margin-right:unset;
  border-right:unset;
}

.list_colum {
  display:flex;
  flex-direction:column;
}

.list_colum > * {
  padding-top:var(--seper_w);
  padding-bottom:var(--seper_w);
  position:relative;
}

.list_colum > *:after {
  content:"";
  width:100%;
  height:var(--seper_b);
  background:var(--seper_color);
  position:absolute;
  top:calc(var(--seper_b) / 2 * -1);
  left:50%;
  transform:translateX(-50%);
}

.list_colum > .row:after {
  width:calc(100% - 1.5rem);
}

.list_colum > *:first-child {
  padding-top:unset;
}

.list_colum > *:first-child:after {
  content:unset;
}

/*Social Icon*/

.social {
  --icon_w:15px;
  --icon_color:var(--main_color);
}

.social .item a {
  width:var(--icon_w);
  height:var(--icon_w);
  background: url(../img/pattern_slash.png) repeat;
  border-radius:50%;
  -webkit-border-radius:50%;
  transition:all 0.2s ease-in-out;
  border:solid 1px #CCC;
  box-shadow:0 0 3px rgba(255,255,255,0.5);
}

.social .item a {
  overflow:hidden;
  display:block;
  position:relative;
  color:transparent !important;
}

.social .item svg {
  width:50%;
  height:auto;
  position:absolute;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
}

.social .item svg path {
  fill: revert-layer;
}


.social .item:hover svg path {
  fill: var(--gold_color);
}

/*Cart */

.cart .table tr th {
  white-space:nowrap;
}

#cart_modal .table td img {
  width:30px;
  height:30px;
  object-fit:cover;
}

.cart .table tr td,
.cart .table tr th {
  vertical-align:middle;
  padding:5px;
}

.cart .table tr td:first-child label,
.cart .table tr th:first-child label {
  border:solid 1px #CCC;
  width:20px;
  height:20px;
  cursor:pointer;
  position:relative;
}

.cart .table tr td:first-child label:before,
.cart .table tr th:first-child label:before {
  content:"";
  position:absolute;
  width:20px;
  height:4px;
  border-radius:3px;
  -webkit-border-radius:3px;
  background:var(--main_color);
  transform:rotate(125deg);
  bottom:11px;
  left:4px;
  outline:solid 3px #FFF;
  display:none;
}

.cart .table tr td:first-child label:after {
  content:"";
  position:absolute;
  width:10px;
  height:4px;
  border-radius:3px;
  -webkit-border-radius:3px;
  background:var(--main_color);
  transform:rotate(45deg);
  bottom:8px;
  left:1px;
  display:none;
}

.cart .table tr.select td:first-child label:after,
.cart .table tr.select td:first-child label:before {
  display:block;
}

.cart .table .quantity {
  display:flex;
}

.cart .table .quantity input {
  width:35px;
  height:25px;
  text-align:center;
  font-weight:600;
  font-size:var(--font_md);
  border:solid 1px var(--main_color);
  border-radius:unset;
  -webkit-border-radius:unset;
  z-index:1;
}

.cart .table .quantity input::-webkit-outer-spin-button,
.cart .table .quantity input::-webkit-inner-spin-button {
  -webkit-appearance:none;
  margin:0;
}

.cart .table .quantity button {
  background:var(--main_color);
  border:solid 1px var(--main_color);
  height:25px;
  width:18px;
  font-weight:600;
  color:#FFF;
  cursor:pointer;
  z-index:2;
  position:relative;
  transition:all .5s ease-in-out;
}

.cart .table .quantity button.minus {
  border-radius:2px 0 0 2px;
  -webkit-border-radius:2px 0 0 2px;
}

.cart .table .quantity button.minus:before {
  content:"";
  position:absolute;
  width:10px;
  height:3px;
  background:#FFF;
  border-radius:2px;
  -webkit-border-radius:2px;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
}

.cart .table .quantity button.minus.delete {
  width:35px;
}

.cart .table .quantity button.minus.delete:before {
  display:none;
}

.cart .table .quantity button.minus.delete:after {
  content:"Xóa";
  font-size:10px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
}

.cart .table .quantity button.plus {
  border-radius:0 2px 2px 0;
  -webkit-border-radius:0 2px 2px 0;
}

.cart .table .quantity button.plus:before,
.cart .table .quantity button.plus:after {
  content:"";
  position:absolute;
  width:10px;
  height:3px;
  background:#FFF;
  border-radius:1px;
  -webkit-border-radius:1px;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
}

.cart .table .quantity button.plus:before {
  transform:translateX(-50%) translateY(-50%) rotate(90deg);
}

.cart .cart_fot .sum {
  font-size:calc(var(--font_xl) + 5px);
}

.cart .cart_fot {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

#cart_modal .btn {
  font-weight:600;
  color:#FFF;
  padding:8px 10px;
  background:var(--main_color);
  border:unset;
  border-radius:2px;
  -webkit-border-radius:2px;
  height:45px;
}

#cart_modal .btn path {
  fill:#FFF;
}

#cart_modal .btn.btn_back {
  padding:4px 5px;
  background:var(--main_color);
  height:35px;
}

#cart_modal[step="order"] .info {
  display:block;
}

#cart_modal[step="cart"] .order_only,
#cart_modal[step="cart"] .notify,
#cart_modal[step="cart"] .info,
#cart_modal[step="cart"] .cart_now,
#cart_modal[step="cart"] .btn_order_now_submit,
#cart_modal[step="order"] .cart_only,
#cart_modal[step="order"] .notify,
#cart_modal[step="order"] .cart_now,
#cart_modal[step="order"] tbody tr:not(.select),
#cart_modal[step="order"] .btn_order_now_submit,
#cart_modal[step="notify"] .cart,
#cart_modal[step="notify"] .cart_now,
#cart_modal[step="notify"] .info,
#cart_modal[step="cart_now"] .cart,
#cart_modal[step="cart_now"] .notify,
#cart_modal[step="cart_now"] .btn_back,
#cart_modal[step="cart_now"] .btn_order_submit {
  display:none;
}

#cart_modal form label[erro]:after {
  content:attr(erro);
  margin-left:4px;
  font-size:calc(var(--font_sm) - 2px);
  color:red;
}

#cart_modal form label[erro] + input,
#cart_modal form label[erro] + select {
  border-color:red;
}

.notify .success,
.notify .error {
  --w:150px;
  width:var(--w);
  height:var(--w);
  border:solid 10px;
  margin:0 auto;
  border-radius:50%;
  -webkit-border-radius:50%;
  position:relative;
  display:none;
}

.notify {
  min-height:200px;
}

.notify:before,
.notify:after {
  content:"";
  position:absolute;
  width:80%;
  left:50%;
  transform:translateX(-50%);
  background:#eee;
  background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);
  border-radius:5px;
  -webkit-border-radius:5px;
  background-size:200% 100%;
  -webkit-animation:1.5s shine linear infinite;
  animation:1.5s shine linear infinite;
}

.notify:before {
  height:50px;
}

.notify:after {
  top:85px;
  height:130px;
}

.notify .success svg,
.notify .error svg {
  position:absolute;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
  width:calc(var(--w) * 0.5);
  height:auto;
  animation:bounce 1s infinite alternate;
  -webkit-animation:bounce 1s infinite alternate;
}

.notify .success {
  border-color:var(--success_color);
}

.notify .success svg {
  width:calc(var(--w) * 0.6);
  height:auto;
}

.notify .success svg path {
  fill:var(--success_color);
}

.notify .error {
  border-color:var(--danger_color);
}

.notify .error svg path {
  fill:var(--danger_color);
}

.notify .mess {
  text-align:center;
  display:none;
}

.notify .mess h1,
.notify .mess h2,
.notify .mess h3 {
  margin-bottom:15px;
}

.notify .mess p {
  margin-bottom:5px;
}

.notify.success:before,
.notify.success:after,
.notify.error:before,
.notify.error:after {
  display:none;
}

.notify.success .success,
.notify.error .error,
.notify.success .mess,
.notify.error .mess {
  display:block;
}

/*WISH LIST CSS*/

#wish_list .table img {
  width:50px;
  height:50px;
  object-fit:cover;
}

#wish_list .modal-body.empty table {
  display:none;
}

#wish_list .modal-body.empty:after {
  content:"Bạn chưa có sản phẩm yêu thích nào.";
}

/*Reposive*/

/*col-sm*/

@media only screen and (max-width:576px) {
  .h_button svg {
    width:20px;
    height:20px;
  }
 
}

@media only screen and (max-width:450px) {
  .product_detail .act button {
    margin-right:5px;
  }
  .product_detail .list_seper {
    --seper_w:5px !important;
  }
}

/*Animation*/

@keyframes swing {
  0%,
  100% {
    transform:rotate(0deg);
  }
  50% {
    transform:rotate(20deg);
  }
}

@keyframes gold {
  0% {
    border-image-source:linear-gradient(0deg,#BF953F,#FCF6BA,#B38728,#FBF5B7,#AA771C);
  }
  50% {
    border-image-source:linear-gradient(90deg,#BF953F,#FCF6BA,#B38728,#FBF5B7,#AA771C);
  }
  100% {
    border-image-source:linear-gradient(180deg,#BF953F,#FCF6BA,#B38728,#FBF5B7,#AA771C);
  }
}

@keyframes show_more {
  0% {
    top:0;
  }
  100% {
    top:10px;
  }
}

@keyframes bounce {
  0% {
    transform:translateX(-50%) translateY(-45%);
  }
  100% {
    transform:translateX(-50%) translateY(-55%);
  }
}

@keyframes shine {
  to {
    background-position-x:-200%;
  }
}