/*
Theme Name: VietCoder Theme
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.18.6
*/

@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--color-primary: 6, 67, 190;
	--color-secondary: 62, 72, 39;
	--color-secondary-light: 254, 212, 130;
	--color-secondary-lighter: 248, 227, 186;	
	--color-alert: 236, 69, 60;
	--color-sucess: 74, 159, 83;
	--color-process: 63, 162, 246;
	--color-warning: 255, 175, 0;
	--color-border-1: 33, 35, 34;
	--color-border-opposite: 255, 255, 255;
	--bg: 255, 255, 255;
	--bg-2nd: 247, 247, 247;
	--bg-opposite: 33, 34, 38;
	--color-text-sub: 33, 35, 34;
	--color-text-title: 33, 35, 34;

	--price-color: rgb(var(--color-text-title));
	--price-sale-color: rgb(var(--color-alert));

	--ff-body: "Lexend Deca", sans-serif;
	--ff-display: "Montserrat", sans-serif;
	--ff-material-outline: 'Material Symbols Outlined';
	--ff-material-round: 'Material Symbols Rounded';

	--blog-img-ratio: 75%;
	
	--radius-1: 8px;
	--radius-2: 14px;
	--radius-3: 28px;
	--radius-sm: 4px;

	--size-ratio: 1.175;
	--size-small: calc(1rem - 1px);
	--size-small-a: calc(var(--size-small) - 1px);
	--size-2: calc(1rem * var(--size-ratio) - 1px);
	--size-3: calc(var(--size-2) * var(--size-ratio));
	--size-4: calc(var(--size-3) * var(--size-ratio));
	--size-5: calc(var(--size-4) * var(--size-ratio));
	--size-6: calc(var(--size-5) * var(--size-ratio));
	--size-7: calc(var(--size-6) * var(--size-ratio));
	--size-8: calc(var(--size-7) * var(--size-ratio));

	--sketch-loading-bg: linear-gradient(90deg, #ececec 8%, #f7f7f7 18%, #ececec 33%);
	--sketch-loading-bg-size: 200% 100%;
	--sketch-loading-animetion: 1.5s sketchloading linear infinite;
}

.dark,
.dark p,
.dark td {
  color: #fff;
}


body {
  max-width: 100vw;
  min-height: 100vh;
  background-color: rgb(var(--bg));
  overflow: visible !important;
}



p {
  margin-bottom: 16px;
}

ol,
ul {
  list-style-position: inside;
}

.text-justify .text-left {
  text-align: justify;
}

.overflow-hidden {
  overflow: hidden;
}

.is-email {
  word-break: break-word;
}

/* Ux - Button -- */
#wrapper .button.btn {
  --btn-shadown: unset;
  --btn-shadown-hover: unset;
  --btn-bg: rgb(var(--color-primary));
  --btn-bg-hover: rgb(var(--bg));
  --btn-color: rgb(var(--bg));
  --btn-color-hover: rgb(var(--color-text-title));
  --btn-border: 1px solid rgb(var(--color-primary));
  --btn-border-hover: 1px solid rgb(var(--color-text-title));

  box-shadow: var(--btn-shadown) !important;
  background-color: var(--btn-bg) !important;
  color: var(--btn-color) !important;
  border: var(--btn-border) !important;
}

#wrapper .button.btn:hover {
  box-shadow: var(--btn-shadown-hover) !important;
  background-color: var(--btn-bg-hover) !important;
  color: var(--btn-color-hover) !important;
  border: var(--btn-border-hover) !important;
}

#wrapper .button.btn:not(.is-link, .is-underline) {
  font-size: 1rem;
  letter-spacing: 0;
  min-height: unset;
  line-height: 1.2;
  padding: 8px 22px 10px;
}



/* --------- */
#wrapper .button.btn.is-underline {
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  min-height: unset;

  padding: 0;
  line-height: 1.5;
  font-weight: 500;
  font-size: 1rem;
  text-transform: unset;
  letter-spacing: 0;
}

#wrapper .button.btn.is-underline:before {
  display: none;
}

#wrapper .button.btn.is-underline span {
  text-decoration: underline 1px;
  text-underline-offset: 3px;
}

#wrapper .button.btn.is-underline.white {
  --btn-color: rgb(var(--bg));
  --btn-color-hover: rgb(var(--bg), 80%);
}


/* Plugin - Contact form 7 */
.wpcf7 .wpcf7-spinner {
  display: none;
}

.wpcf7 .wpcf7-not-valid-tip {
  margin-bottom: 10px;
}

.wpcf7 form .wpcf7-response-output {
  margin: 1rem 0 1rem;
}

label .required {
  color: rgb(var(--color-alert));
}

/* Ux - Search */
.searchform {
  --input-height: 42px;
}

.searchform span.amount {
  color: rgb(var(--color-text-sub));
  font-size: 1rem;
}

.searchform .flex-row {
  background-color: rgb(var(--bg-2nd));
  border-radius: calc(var(--border-radius) / 2);
}

.searchform .search-field {
  background: transparent;
  box-shadow: none;
  font-size: 16px;
  height: var(--input-height);
  border: 0;
  color: rgb(var(--color-text-title));
}

.searchform .search-field:focus,
.searchform .search-field:hover {
  box-shadow: none;
  background: transparent;
}

.searchform .flex-col .submit-button:not(.is-outline) {
  background-color: transparent;
  box-shadow: none;
  font-size: 14px;
  height: var(--input-height);
  width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  color: rgb(var(--color-text-title));
}

.searchform .flex-col .submit-button:not(.is-outline):hover {
  color: rgb(var(--color-primary));
}

.searchform .autocomplete-suggestions {
  background: rgb(var(--bg));
  color: rgb(var(--color-text-sub));
  font-size: 0.95rem;
}

.searchform .autocomplete-suggestion {
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr;
  font-size: var(--size-small);
}

.searchform .autocomplete-suggestion img {
  height: 60px;
  margin: 0 0 12px;
  width: 60px;
  object-fit: cover;
}



/* Header ------------- */
.header {
  --color-menu: rgb(var(--bg));
  --color-menu-hover: rgb(var(--bg),80%);
}

.header-wrapper.stuck {
  box-shadow: 1px 1px 18px rgb(0 0 0 / 5%);
}

.header-wrapper.stuck .top-divider {
  display: none;
}


#header .header-top .menu-item>a,
#header .header-nav-main>li>a,
#header .header-bottom-nav>li>a,
#header .mobile-nav>li>a {
  color: var(--color-menu);
}

#header .header-top .menu-item>a:hover,
#header .header-nav-main>li>a:hover,
#header .header-bottom-nav>li>a:hover,
#header .mobile-nav>li>a:hover {
  color: var(--color-menu-hover);
}

/* Header - Main ------- */
.header.transparent {
  --color-menu: rgb(var(--bg));
  --color-menu-hover: rgb(var(--bg), 0.7);
}

.header-main .header-inner {
    justify-content: center;
	max-width: 768px;
}

.header-main .flex-col {
	flex: unset;
	margin: 0;
}

.header-main .flex-col:has(.header-hotline) {
	padding-left: 70px;
}

.header-main .header-nav {
	gap: 5px 40px;
}

.header-main .nav > li > a {
	font-size: 1rem;
    font-weight: 500;	
}

.header-main .nav > li > a svg {
	display: none;
}


.header-block:has(.header-hotline) {
	width: fit-content;
}

.header-hotline.icon-box {
    align-items: center;
    color: var(--color-menu);	
	flex-wrap: nowrap;
    width: fit-content;	
}

.header-hotline.icon-box p {
    color: currentColor;
    line-height: 1.2;
    font-size: var(--size-small);
    transition: 320ms all;	
}

.header-hotline.icon-box .icon-box-text {
	padding-left: 10px;
}

.header-hotline.icon-box .icon-inner {
    color: currentColor!important;	
}


/* Handle width js hidden when overflow  ------*/
/* 
.header .flex-left > .header-bottom-nav {
	flex-wrap: nowrap;
	max-width: 100%;
}

.header .header-bottom-nav > .menu-item > a  {
	width: max-content;
} 

.header .header-bottom-nav > .menu-item.hidden {
	display: none;
}

.header-bottom .flex-right {
	display: none;
}

.header-bottom .flex-left {
	flex: 1 1 ;
	max-width: calc(100% - 20px);
}

*/

/* Custom nav dropdown ---- */
/* 
#header .nav-dropdown .header-search-form {
	padding: 0 12px;
}

#header .sub-menu,
#header .nav-dropdown {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 12px 0;
  min-width: 260px;
  background-color: rgb(var(--bg-opposite));
  border-top: 1px solid rgb(var(--bg), 20%);
}

header .nav .nav-dropdown li {
  width: 100%;
  margin: 0;
  border: 0;
  padding: 10px 20px;
  position: relative;
  transition: 300ms all;
}

header .nav .nav-dropdown li+li {
  border-top: 0px;
}

#header .sub-menu>li>a,
#header .nav-dropdown>li>a {
  padding: 0;
  margin: 0;
  border: 0px;
  text-transform: capitalize;
  color: rgb(255, 255, 255);
  font-size: 0.95rem;
  font-weight: 500;
  position: relative;
}

#header .sub-menu>li>a:hover,
#header .nav-dropdown>li>a:hover {
  color: rgb(255, 255, 255, 70%);
}

header .menu-item-design-default .nav-dropdown-col>a:after {
  content: '\e5e1';
  font-family: var(--ff-material-round);
  float: right;
  margin-left: 5px;
  font-size: 1em;
  line-height: 1;
  vertical-align: text-top;
  transform: translateY(2px);
  display: inline-block;
}

header .menu-item-design-default .sub-menu .sub-menu {
  position: absolute;
  left: 80%;
  top: -1px;
  opacity: 0;
  visibility: hidden;
  transition: 300ms all;
  border-top: 0px;
  border-left: 1px solid rgb(var(--bg), 20%);
}

#header .sub-menu .sub-menu a {
  font-weight: 400;
}

header .menu-item-design-default .sub-menu li:hover>.sub-menu {
  left: 100%;
  opacity: 1;
  visibility: visible;
} */


/* Header - Dropdown Container width */
/* 
#header .menu-item-design-container-width>ul.sub-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: fit-content;
  max-height: 60vh;
  overflow: auto;
  padding: 30px;
  border-top: 1px solid rgb(var(--bg), 20%);
  gap: 20px 30px;
}

#header .menu-item-design-container-width .sub-menu {
  border-top: 0px;
  min-width: unset;
  padding: 0;
}

#header .menu-item-design-container-width li {
  padding: 0;
}

#header .menu-item-design-container-width li a {
  padding: 7px 0px;
  font-size: var(--size-small);
  font-weight: 400;
}

#header .menu-item-design-container-width>ul>li>a {
  font-size: 1rem;
  font-weight: 700;
  border-bottom: 1px solid rgb(var(--bg), 20%);
  margin-bottom: 15px;
  padding: 0 0 10px 0;
} */

/* Custome icon  */
.header-cart-icon {
  display: flex;
}

.nav-small .image-icon.header-cart-icon {
  height: unset;
  margin: unset;
  width: unset;
}

.header-cart-icon .cart-img-icon {
  display: none;
}

.header-search>a>.icon-search {
  display: none;
}

.header-search>a .icon-search {
  transition: unset;
}

.header-search>a svg {
  width: 22px;
  height: 22px;
}

.account-item i {
  display: none;
}

.nav-icon .icon-menu {
  display: none;
}

.nav-icon .qodef-m-lines {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 23px;
  height: 21px;
  padding: 0;
}

.nav-icon .qodef-m-line {
  display: block;
  height: 1px;
  width: 100%;
  background-color: var(--color-menu);
}

.nav-icon .qodef-m-lines:hover .qodef-m-line {
  background-color: var(--color-menu-hover);
}

/* Menu - Aside ------------ */
.off-canvas-left .mfp-content {
  background-color: var(--background);
  width: 100%;
  max-width: var(--drawer-width, 500px);
  --background: rgb(var(--bg));
  --on-background: rgb(var(--color-text-title));
  --color-border: rgb(var(--color-border-1));
}

/* Menu toggle ----- */
/* Menu toggle ----- */
.mfp-content .nav-sidebar li+li {
  border-top: 0;
}

.mfp-content .nav-sidebar>li.menu-item.active,
.mfp-content .nav-sidebar>li.menu-item:hover {
  background-color: transparent;
}

.mfp-content .nav-sidebar .children {
  padding-bottom: 20px;
  padding-left: 15px;
}


.mfp-content .nav .menu-item {
  padding: 0 10px;
  margin-bottom: 5px;
}

.off-canvas .mfp-content .nav .menu-item>a {
  color: var(--on-background);
  font-size: 1rem;
  font-weight: 500;
  text-transform: capitalize;
  transition: 300ms all;
  padding: 8px 15px;
  border-radius: 8px;
}

.off-canvas .mfp-content .nav .menu-item>a:hover {
  background-color: rgb(var(--bg-2nd));
}

.off-canvas .mfp-content .nav .menu-item .menu-item>a {
  font-weight: normal;
  font-size: 0.95rem;
  text-transform: capitalize;
  justify-content: center;
  text-align: center;
  width: 100%;
  padding: 10px 0px;

}

.off-canvas .mfp-content .nav .menu-item .menu-item {
  margin: 0;
  padding: 0;
}

/* Home - Hero -------- */
.home-hero {
	overflow: hidden;
	min-height: calc(100vh  - 250px);
}

.home-hero h6 {
    opacity: 1;
    font-size: var(--size-3);
    text-transform: unset;
    margin-bottom: 12px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    background: -webkit-linear-gradient(0deg, var(--color-edged), var(--color-center), var(--color-edged));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	--color-edged: rgb(var(--color-secondary-light));
    --color-center: rgb(var(--color-secondary-lighter));
}

.home-hero p {
    color: rgb(var(--color-secondary-light));	
}


/* Ux - Spin lucky ---- */
.spin-lucky {
	
}

.spin-lucky .el-wrap-inner {
    backdrop-filter: blur(4px);
    background: linear-gradient(150deg, rgb(var(--bg), 40%), rgb(var(--bg), 12%));
    border-radius: var(--radius-2);
    overflow: hidden;
    border: 2px solid rgb(var(--bg), 20%);
    padding: 40px 60px;
}

.spin-lucky .el-section {
	display: none;
}

.spin-lucky .el-section.active {
	display: block;
}

.spin-lucky .el-spin {
	position: relative;
    padding-top: 100%;
    border-radius: 50%;
    background: linear-gradient(90deg, #930600, #BC100A);	
	height: 0;
}

.spin-lucky .el-spin-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 50;	
	pointer-events: none;
}

.spin-lucky .el-spin-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 35%;
    height: 35%;
    object-fit: contain;
    object-position: center;
    z-index: 50;
    transform: translate(-50%, -50%);	
}

.spin-lucky .el-spin-body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: #fffdf1;
    border-radius: 50%;
    z-index: 20;	
    background: var(--sketch-loading-bg);
    background-size: var(--sketch-loading-bg-size);
    animation: var(--sketch-loading-animetion);	
	
	--color-text: #0583FF;
	--color-bg: #FFFAD0;
	--item-h: 30%;
	--item-rotate: 0deg;
	--item-shadow-rotate: 0deg;
}

.spin-lucky .el-spin-items {
    position: relative;
    width: 100%;
    padding-top: 100%;
    height: 0;
}

.spin-lucky .el-spin-item {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50%;
    height: var(--item-h);
    transform-origin: left center;
    transform: translateY(-50%) rotate(var(--item-rotate));
}

.spin-lucky .el-spin-item:nth-child(even){
	--color-text: #FFFAD0;
	--color-bg: #0583FF ;
}





.spin-lucky .el-spin-item-inner {
	position: relative;
    color: var(--color-text);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.1;
    width: 100%;
    height: 100%;
    padding: 0px 6% 0 34%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
	isolation: isolate;
}

.spin-lucky .el-spin-item-inner:before {
	content: '';
    background-color: var(--color-bg);
	display: block;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
	position: absolute;
	left: 0;
	top: 0;
	z-index: -10;
}


.spin-lucky .el-spin-item-inner:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 50%;
    left: 0;
    transform-origin: left center;
    transform: rotate(var(--item-shadow-rotate));
    z-index: -5;
    background: var(--color-text);
    box-shadow: 0 5px 5px rgb(0 0 0 / 60%);
}

.spin-lucky .el-spin-item-img {
    object-fit: contain;
    object-position: center;
    width: auto;
    height: 16%;	
	z-index: 20;
}

.spin-lucky .el-spin-item-text {
	display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;	
	z-index: 20;
	position: relative;
}

.spin-lucky .el-spin-star {
	position: absolute;
    left: 23%;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    color: white;	
}

.spin-lucky .el-spin-area {
    display: grid;
    grid-template-columns: 45% 1fr;
	align-items: center;
    gap: 20px;	
}

.spin-lucky .el-result-area {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 30px 20px;
    align-items: center;	
}

.spin-lucky .el-gift-inner {
	padding-top: 100%;
	height: 0;
	position: relative;
	isolation: isolate;
}

.spin-lucky .el-section.active .el-gift-inner {
	animation: 800ms scale-gift ease-in-out;
}

@keyframes scale-gift {
	0% {
		transform: scale(0);
	}
	70% {
		transform: scale(1.12);
	}
	100% {
		transform: scale(1);
	}
}

.spin-lucky .el-gift-decor {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
	position: absolute;
	left: 0;
	top: 0;
    z-index: -10;
}

.spin-lucky .el-img-gift {
width: 70%;
    height: 70%;
    object-fit: contain;
    object-position: center;
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(2px 2px 30px rgb(0, 0, 0, 16%));
}

.spin-lucky .el-display {
    color: #fff1d9;
    filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 10%));
text-shadow: var(--outline-color) 0px 0px var(--outline-width), var(--outline-color) 0px 0px var(--outline-width), var(--outline-color) 0px 0px var(--outline-width), var(--outline-color) 0px 0px var(--outline-width), var(--outline-color) 0px 0px var(--outline-width), var(--outline-color) 0px 0px var(--outline-width);
	
	--outline-width: 3px;
	--outline-color: #1184e2;
}

.spin-lucky .el-display-lv1 {
	font-size: var(--size-8);
    line-height: 1.15;
    font-weight: 900;
    margin-bottom: 10px;	
	--outline-width: 4px;
}

.spin-lucky .el-display-lv2 {
    font-size: var(--size-7);
    line-height: 1.2;
    margin-bottom: 14px;
    font-weight: 800;
    --outline-width: 4px;
}

.spin-lucky .el-display-lv3 {
    font-size: var(--size-4);
    line-height: 1.2;
    margin-bottom: 14px;
    font-weight: 800;
}


.spin-lucky label {
    display: flex;
    background: rgb(var(--bg));
    color: rgb(var(--color-text-title));
    line-height: 1.2;
	margin: 0;
    border-radius: var(--radius-1);
    border: 4px solid rgb(var(--bg));
    box-shadow: inset 10px -10px 14px rgb(var(--bg-opposite), 11%);
    padding: 4px 0;
}

.spin-lucky label + label {
	margin-top: 24px;
}

.spin-lucky .el-label-text {
    flex-basis: 240px;
    min-width: 143px;
    text-align: left;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    font-weight: 400;
    border-right: 1px solid rgb(var(--color-border-1), 20%);
    color: rgb(var(--color-text-title), 70%);
    text-transform: capitalize;
    font-size: 1rem;
}

.spin-lucky input ,
.spin-lucky select  {
    box-shadow: none;
    font-size: 16px;
    margin: 0;
    border: 0;
    padding: 5px 15px;
    height: 36px;
	background-color: transparent;
	font-weight: 400;
}

.spin-lucky input::placeholder {
	color: rgb(var(--color-text-title),0.24);
}

.spin-lucky input:hover,
.spin-lucky input:focus {
    box-shadow: none;
	background: transparent;
}


.spin-lucky label.error .el-label-text {
	color: rgb(var(--color-alert));
    border-color: currentColor;
}

.spin-lucky .el-mess-error {
	text-align: left;
	display: block;
	margin: 7px 0 18px;
}


.spin-lucky .el-note {
    color: rgb(var(--bg));
    font-size: var(--size-2);
    margin-top: 24px;
    text-align: center;
    font-style: italic;	
}

.spin-lucky .el-form {
	margin: 0;
}

.spin-lucky .el-form .btn-3d {
	margin-top: 24px;
}

.spin-lucky .btn-3d {
    margin: 16px 0 0;
	
}

#wrapper .btn-3d  {
    border-radius: var(--radius-1);
    border: 1px solid rgb(var(--bg), 70%);
    font-size: var(--size-3);
    line-height: 1.2;
    min-height: unset;
    padding: 8px 20px;
    transition: 320ms all;
    position: relative;
    color: #05509E;
    font-weight: 700;	
	display: inline-block;
	width: fit-content;
    background: linear-gradient(90deg, var(--bg-edge), var(--bg-center), var(--bg-edge), var(--bg-center), var(--bg-edge));
	
    --bg-center: #e9f4fa;
    --bg-edge: #43b0f7;
}

.btn-3d > span {
	display: flex;
    align-items: center;
    gap: 6px;	
}

.btn-3d:before {
	content: '';
    position: absolute;
    height: 10px;
    width: 100%;
    display: block;
    background: linear-gradient(90deg, var(--bg-edge), var(--bg-center),var(--bg-edge), var(--bg-center),var(--bg-edge), var(--bg-center), var(--bg-edge), var(--bg-center), var(--bg-edge));
    left: 0px;
    top: calc(100% - 4px);
    z-index: -10;
    border-radius: 0 0 var(--radius-1) var(--radius-1);
    border-bottom: 1px solid rgb(var(--bg-opposite), 14%);
    box-shadow: inset 4px 0px 5px rgba(0, 0, 0, 30%);

}

.btn-3d:hover {
    box-shadow: inset 0 0 200px rgb(var(--bg), 50%);	
}

#wrapper .btn-3d.btn-3d_success {
    color: #ff0000;
    --bg-center: #fffaf0;
    --bg-edge: #ffd378;	
}



























/* Ux - Loader ------- */

.sketch-loading {
  background: var(--sketch-loading-bg);
  background-size: var(--sketch-loading-bg-size);
  animation: var(--sketch-loading-animetion);
}

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

.loader {
    width: 24px;
    height: 24px;
    border: 3px solid #FFF;
    border-bottom-color: rgb(255 55 55);
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Single Post -------------- */
.entry-header .is-divider {
  display: none;
}

.entry-header .entry-header-text {
  padding-bottom: 0;
}

.entry-header .entry-category {
  margin-bottom: 12px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgb(var(--color-text-sub));
}

.entry-header .entry-category a,
.entry-header .entry-meta a {
  text-transform: capitalize;
  font-weight: inherit;
  color: inherit;
  text-underline-offset: 2px;
}

.entry-header .entry-category a:hover,
.entry-header .entry-meta a:hover {
  text-decoration: underline 1px;
}

.entry-header .entry-title {
  font-size: var(--size-5);
  font-weight: 500;
  color: rgb(var(--color-text-title));
  line-height: 1.3;
  margin-bottom: 14px;
}

.entry-header .entry-meta {
  font-size: 1rem;
  text-transform: unset;
  letter-spacing: 0;
  color: rgb(var(--color-text-sub));
}

.blog-share .is-divider {
  display: none;
}

.blog-share .button.icon {
  margin-left: 0;
  margin-right: 0;
  min-width: 36px;
  min-height: 36px;
  padding-left: 0.6em;
  padding-right: 0.6em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  border-width: 1px;

}

.blog-share .social-icons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px 15px;
  flex-wrap: wrap;
  margin: 40px 0 0;
}


.single-post .entry-content {
  padding-bottom: 0;
}

.single-post .post {
  margin-bottom: 0;
}

.single-blog_release h3 {
  font-size: var(--size-6);
  line-height: 1.3;
  margin-bottom: 20px;
}


/* Footer - Info ------ */
footer .absolute-footer {
	display: none;
}

.footer-info .ux-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;
    gap: 10px 40px;	
}

.footer-info .ux-menu-link__link {
    padding: 0;
    min-height: unset;
    line-height: 1.4;
    text-align: center;
    position: relative;	
	padding-bottom: 8px;
	text-transform: capitalize;
}

.footer-info .ux-menu-link__link:before {
	content: '';
    position: absolute;
    height: 1px;
    width: 80px;
    display: block;
    max-width: 80%;
    background-color: currentColor;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
	transition: 320ms all;
}


.footer-info .ux-menu-link__link:hover:before {
    max-width: 100%;
	width: 100%;
}

.pt-socials {
	display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 30px;	
}

.pt-socials .icon-box-img {
	width: 46px !important;
	margin: 0;
}

.pt-socials svg {
    display: flex;
    width: 46px;
    height: 46px;
    border: 1px solid currentColor;
    padding: 10px;
    border-radius: 50%;
    transition: 320ms all;
}

.pt-socials svg:hover {
	border-color: rgb(var(--bg));
    background-color: rgb(var(--bg));
    color: rgb(var(--color-primary));
}







/* Responsive ---------------- */
@media only screen and (min-width: 1025px) and (max-width: 1600px) {}

@media only screen and (max-width: 1024px) {}

@media only screen and (max-width: 849px) {
  :root {
    font-size: 15px;
  }
	
	.header-main .nav > li > a svg {
		display: block;
	}
	.header-main .nav > li > a {
		font-size: 0; 
	}
	.header-main .flex-col:has(.header-hotline) {
		padding-left: 30px;
	}
	.transparent .header-main {
		height: 70px;
	}
	
	.home-hero p br{
		display: none;
	}

  .container-width,
  .ubermenu-nav,
  .container,
  .row:not(.row-full-width) {
    max-width: 650px !important;
  }
	
	.footer-info .ux-menu {
		gap: 30px 20px;
		flex-wrap: nowrap;
		flex-direction: column;
		align-items: center;
	}
	
	.pt-socials {
		gap: 10px 20px;	
	}
	
	.spin-lucky .el-wrap-inner {
		padding: 24px 20px 34px;
	}
	.spin-lucky .el-result-area {
		grid-template-columns: 1fr; 
	}
	.spin-lucky .el-gift {
		width: 80%;
		margin: auto;
	}
	.spin-lucky .el-display-lv3 {
		font-size: var(--size-3); 
	}
	.spin-lucky .el-display-lv1 {
		font-size: var(--size-6);
		line-height: 1.2; 
	}
	.spin-lucky .el-display-lv2 {
		font-size: var(--size-5); 
	}
	.spin-lucky .btn-3d {
		margin: 10px 0 0;
	}
	.spin-lucky .el-spin-area {
		grid-template-columns: 1fr;
	}
	.spin-lucky label + label {
		margin-top: 20px;
	}
	.spin-lucky .el-form .btn-3d {
		margin-top: 20px;
	}

 	
}

@media only screen and (max-width: 549px) {

  /* Small space product/post-col with class .row-loop */
  body .row-loop:not(.row-collapse) {
    --m-x: 8px;
    padding-left: var(--m-x);
  }

  body .row .row-loop:not(.row-collapse) {
    margin-left: calc(var(--m-x) * -0.5);
    margin-right: calc(var(--m-x) * -0.5);
    padding-left: 0;
  }

  .row-loop:not(.row-collapse) .col {
    padding-left: var(--m-x);
    padding-right: var(--m-x);
  }
}