@charset "utf-8";
/* -------------------------------------------------------
GUIDE
1. FONT
2. GLOBAL
------------------------------------------------------- */

/* -------------------------------------------------------
Font Settings
------------------------------------------------------- */
.yeseva-one-regular {
	font-family: "Yeseva One", serif;
	font-weight: 400;
	font-style: normal;
}
.be-vietnam-pro-thin {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 100;
	font-style: normal;
}

.be-vietnam-pro-extralight {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 200;
	font-style: normal;
}

.be-vietnam-pro-light {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 300;
	font-style: normal;
}

.be-vietnam-pro-regular {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.be-vietnam-pro-medium {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 500;
	font-style: normal;
}

.be-vietnam-pro-semibold {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 600;
	font-style: normal;
}

.be-vietnam-pro-bold {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.be-vietnam-pro-extrabold {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 800;
	font-style: normal;
}

.be-vietnam-pro-black {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 900;
	font-style: normal;
}

.be-vietnam-pro-thin-italic {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 100;
	font-style: italic;
}

.be-vietnam-pro-extralight-italic {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 200;
	font-style: italic;
}

.be-vietnam-pro-light-italic {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 300;
	font-style: italic;
}

.be-vietnam-pro-regular-italic {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 400;
	font-style: italic;
}

.be-vietnam-pro-medium-italic {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 500;
	font-style: italic;
}

.be-vietnam-pro-semibold-italic {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 600;
	font-style: italic;
}

.be-vietnam-pro-bold-italic {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 700;
	font-style: italic;
}

.be-vietnam-pro-extrabold-italic {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 800;
	font-style: italic;
}

.be-vietnam-pro-black-italic {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 900;
	font-style: italic;
}
/* ------------------------------------------------------- */
/* GLOBAL */
/* ------------------------------------------------------- */
BODY {
	background: #fff;
	margin: 0;
	padding: 0;
	overflow-y: scroll;	
	overflow-x: hidden;
}
BODY, td, div, pre {
	color: #000;
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: 16px;
}
pre {
	width: 100%;
	white-space: break-spaces;
}
* {
	transition: all .3s;	
}
form {
	transition: none;
}
option, input, textarea, select {
	 -moz-box-shadow:    inset 0 2px 4px rgba(0, 0, 0, .1);
	 -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .1);
	 box-shadow:         inset 0 2px 4px rgba(0, 0, 0, .1);
	 min-width: calc(8% - 8px);
	 min-height: 40px;
	 border: 1px solid #b1b1b1;
	 color: #333;
	 font-family: Roboto, sans-serif;
	 font-size: 1em;
	 padding: 8px;
	 border-radius: 8px;
	 -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	 box-sizing: border-box;
	 margin: 0 8px 0 0;
	 line-height: 120%;
 }
fieldset {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
}
textarea.html {
	cursor: not-allowed;
	background: #f0f0f0;
	font-size: .8em;
	color: #666;
	display: none;
}
input[type=text] {
	min-width: 20%;
}
input:focus,
textarea:focus {
	outline: none !important;
	border: 1px solid #ff6c00;
}
::-moz-selection {
	color: #fff;
	background: #ff6c00;
}

::selection {
	color: #fff;
	background: #ff6c00;
}
hr {
	background: #eaeaea;
	border: 0;
	height: 1px;
	margin: 10px 0 10px 0;
	clear: both;
}
img {
	max-width: 100%;
}
h1 {
	font-family: "Yeseva One", serif;
	font-size: 32px;
	font-weight: 100;
	color: #000;
	margin: 0;
	cursor: default;
	width: 100%;
	clear: both;
}
h2 {
	font-family: "Yeseva One", serif;
	font-size: 24px;
	font-weight: 100;
	line-height: 100%;
	color: #000;
	padding: 8px 0 4px 0;
	margin: 0 0 4px 0;
	cursor: default;
	display: inline-block;
}
h4 {
	font-size: 16px;
	color: #505050;
	padding: 8px 0 8px 0;
	margin: 0;
	font-weight: 100;
}
a { 
	color: #000;
	outline: none;
	text-decoration: none;
}
a:hover {
	color: #ff6c00;
}
/* Material icons */
.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'liga';
}
/* Scrollbar */
::-webkit-scrollbar {
	width: 8px;
	cursor: pointer;
}
::-webkit-scrollbar-track {
	background: rgba(0,0,0,0.1);
	border-radius: 16px;
}
::-webkit-scrollbar-thumb {
	background: rgba(0,0,0,0.1);
	border-radius: 16px;
	cursor: pointer;
}
/* Tooltip */
.tooltip {
	z-index: 1;
}
@keyframes tooltip {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.tooltip:before {
	content: attr(data-text);
	position: absolute;

	top: 50%;
	transform: translateY(-50%);

	left: 100%;
	margin-left: 6px;

	font-size: .9em;

	width: auto;
	min-width: 120px;
	padding: 8px;
	border-radius: 8px;
	background: rgba(0, 0, 0, .8);
	color: #fff;
	text-align: center;

	display: none;
	animation: tooltip .5s 1 ease-in-out;
}
.tooltip:hover:before {
	display: block;
}
.tooltip:after {
	content: "";
	position: absolute;

	left: 100%;
	margin-left: -6px;

	top: 50%;
	transform: translateY(-50%);

	border: 6px solid rgba(0, 0, 0, .8);
	border-color: transparent rgba(0, 0, 0, .8) transparent transparent;

	display: none;
	animation: tooltip .5s 1 ease-in-out;
}
.tooltip:hover:before, .tooltip:hover:after {
	display: block;
}
.tooltip-right:before {
	left: unset;
	margin-left: unset;
	right: 100%;
	margin-right: 6px;
}
.tooltip-right:after {
	left: unset;
	margin-left: unset;
	right: 100%;
	margin-right: -6px;
	border-color: transparent transparent transparent rgba(0, 0, 0, .8);
}
/* ------------------------------------------------------- */
/* Order */
/* ------------------------------------------------------- */
.order {
	width: 600px;
	margin: 8px auto 8px auto;
	background: #fff;
	border-radius: 16px;
}
@media screen and (max-width: 640px) {
	.order {
		width: 90%;
		margin: 0 auto 0 auto;
	}
}
.order .banner {
	width: 100%;
	text-align: center;
}
.order .banner img {
	height: 80px;
	border-radius: 50%;
}
.order .form {
	list-style: none;
	width: calc(100% - 48px);
	margin: 0 24px 0 24px;
	padding: 0;
}
.order .form li {
	margin: 0;
	padding: 4px 0 4px 0;
}
.order .form li input {
	width: 100%;
}
.order .form li input.submit {
	text-align: center !important;
	display: inline-block !important;
}
.order .label {
	display: block;
	margin: 0;
	padding: 8px 0 0 0 !important;
}
.order span.price {
	color: #fff;
	border-radius: 8px;
	padding: 4px 8px 4px 8px;
	display: inline-block;
	background: #ff6c00;
}

.order .description {
	color: #666;
	font-size: .9em;
}
.order .recommend {
	margin: 0 0 8px 0;
}
.order .recommend .tab-price {
	background: #eee;
	padding: 8px 16px 8px 16px;
	border-radius: 16px;
	display: inline-block;
	cursor: pointer;
}
.order .recommend .tab-price:hover {
	background: #ff6c00;
	color: #fff;
}
.order #bill {
	font-weight: bold;
	font-size: 1.2em;
}
/* Switcher */
.switcher {
	display: none;
}
@media screen and (max-width: 640px) {
	.switcher {
		width: 32px;
		height: 32px;
		background: #f9f9f9;
		display: block;
		position: fixed;
		top: 16px;
		right: 24px;
		cursor: pointer;
		transition: none;
		z-index: 998;
		text-align: center;
		border-radius: 8px;
	}
	.switcher i {
		position: absolute;
		top: 4px;
		left: 4px;
	}
	.switcher:hover {
		color: #ff6c00;
	}
}
#loader {
	z-index: 10000;
}
/* ------------------------------------------------------- */
/* Logo */
/* ------------------------------------------------------- */
.logo {
	width: 100%;
	text-align: center;
	margin: 16px 0 16px 0;
}
/* ------------------------------------------------------- */
/* Menu */
/* ------------------------------------------------------- */
menu {
	width: 100%;
	height: 48px;
	background: #fff;
	padding: 0;
	margin: 0 auto 0 auto;
	display: table;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
	z-index: 10;
}
menu .logo {
	display: none;
}
menu.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
menu.fixed .logo {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
menu ul {
	width: 1280px;
	padding: 0;
	margin: 0 auto 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
menu ul li {
	display: inline-block;
	height: 48px;
	overflow: hidden;
	vertical-align: center;
}
@media screen and (max-width: 1280px) {
	menu ul {
		width: 100%;
	}
}
menu a {
	color: #000;
	font-size: 1em;
	vertical-align: top;
	display: block;
	padding: 18px 8px 0 8px;
	height: 34px;
	margin: 0;
	border: 0;
	line-height: 100%;
}
@media screen and (max-width: 640px) {
	menu a {
		font-size: .9em;
	}
}
menu a:hover {
	color: #ff6c00;
}
menu span {
	padding: 0;
	margin: 0;
}
menu .logo {
	margin: 0;
	padding: 0;
	width: 48px;
	height: 48px;
	position: relative;
	top: unset;
	left: unset;
	right: unset;
	bottom: unset;
	border-radius: 0;
}
menu .logo img {
	position: absolute;
	top: 4px;
	left: 4px;
	margin: 0 auto 0 auto;
	width: 44px;
	height: 44px;
}

.float_submit {
	position: fixed;
	background: #ff6c00;
	text-align: center;
	bottom: 80px;
	right: 16px;
	width: 64px;
	height: 64px;
	border-radius: 32px;
	color: #fff;
	cursor: pointer;
	padding: 18px 0 0 0;
	box-sizing: border-box;
	box-shadow: 0 1px 5px #ccc;
	z-index: 9999999;
}
.div {
	margin: 16px 0 16px 0;
	width: 100%;
	clear: both;
}
/* Header */
header {
	width: 1280px;
	margin: 0 auto 0 auto;
}
@media screen and (max-width: 1280px) {
	header {
		width: 100%;
	}
}
header .page_title {
	width: calc(100% - 48px);
	background: #f9f9f9;
	border-radius: 8px;
	color: #666;
	padding: 8px;
	margin: 16px;
	text-align: center;
}
.page {
	width: 1280px;
	margin: 0 auto 0 auto;
}
@media screen and (max-width: 1280px) {
	.page {
		width: 100%;
	}
}
.empty {
	width: calc(100% - 64px);
	padding: 32px;
	text-align: center;
}
section.videos {
	width: 100%;
	background: #000;
	padding: 0;
	margin: 0 auto 0 auto;
	z-index: 1;
	position: relative;
	overflow: hidden;
	max-height: 640px;
}
section.videos video {
	opacity: .3;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
section.videos .slogan {
	z-index: 2;
	opacity: 1;
	font-family: "Yeseva One", Serif;
	font-size: 2.8em;
	color: #fff;
	position: absolute;
	top: 40%;
	left: 0;
	text-align: center;
	width: 100%;
	display: grid;
	padding: 0;
	margin: 0;
}
section.videos .slogan .description {
	min-height: 32px;
	font-size: .8em;
	padding: 0;
	margin: 0;
}
@media screen and (max-width: 640px) {
	section.videos .slogan {
		font-size: 1.7em;
		top: 25%;
	}
}
section.videos .button {
	font-size: .3em;
	padding: 8px 24px 8px 24px;
	width: auto;
	display: inline-block;
	color: #fff;
	background: #000;
	border-radius: 32px;
	border: 0;
	margin: 16px auto 0 auto;
	text-transform: uppercase;
	letter-spacing: 2px;
}
@media screen and (max-width: 640px) {
	section.videos .button {
		font-size: .5em;
	}
}
section.story {
	width: 1280px;
	padding: 0;
	margin: 0 auto 0 auto;
}
@media screen and (max-width: 1280px) {
	section.story {
		width: 100%;
	}
}
section.story h1 {
	font-size: 2.4em;
	width: calc(50% - 48px);
	padding: 4px 24px 4px 24px;
	margin: 24px auto 40px auto;
	text-align: center;
	position: relative;
}
@media screen and (max-width: 640px) {
	section.story h1 {
		font-size: 2.2em;
		width: calc(80% - 48px);
	}
}
section.story h1::after {
	position: absolute;
	bottom: -24px;
	left: 50%;
	content: " ";
	width: 10%;
	height: 1px;
	margin: 0 auto 0 auto;
	border-bottom: 3px solid #000;
	transform: translateX(-50%);
}
section.story h2 {
	width: calc(50% - 48px);
	padding: 4px 24px 4px 24px;
	margin: 24px auto 16px auto;
	text-align: center;
	display: block;
}
@media screen and (max-width: 640px) {
	section.story h2 {
		width: calc(80% - 48px);
	}
}
section.story p {
	width: 60%;
	padding: 4px 24px 4px 24px;
	margin: 0 auto 4px auto;
	line-height: 1.5em;
}
@media screen and (max-width: 640px) {
	section.story p {
		width: 80%;
	}
}
section.story ul {
	width: 60%;
	margin: 0 auto 4px auto;
}
@media screen and (max-width: 640px) {
	section.story ul {
		width: 80%;
	}
}
section.story blockquote {
	background: #f5f5f5;
	width: calc(60% - 104px);
	font-size: 1.1em;
	padding: 32px 16px 24px 40px;
	margin: 0 auto 16px auto;
	position: relative;
}
@media screen and (max-width: 640px) {
	section.story blockquote {
		width: calc(80% - 104px);
	}
}
section.story blockquote.story {
	font-size: .9em;
	color: #666;
}
section.story blockquote:after {
	content: "❝";
	font-size: 1.8em;
	color: #000;
	position: absolute;
	top: 16px;
	left: 16px;
}
section.story .image-block {
	max-width: 640px;
	margin: 16px auto;
	text-align: center;
	background: #f5f5f5;
}
section.story .image-block img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	max-width:100%;
}
section.story .image-block figcaption {
	padding: 8px 24px 8px 24px;
	font-size: .9em;
	background: #f5f5f5;
	color: #666;
	margin: 8px 0 16px 0;
}

section. {
	background: #ff6c00;
}

/* Product list */
.product-list {
	display: block;
	width: calc(100% - 32px);
	padding: 16px;
}
.product-list h3 {
	font-weight: 600;
	width: calc(100% - 32px);
	padding: 8px 16px 8px 16px;
	margin: 0;
}
.product-list ul {
	list-style: none;
	padding: 0;
	margin: 0 0 0 16px;
}
.product-list ul li {
	padding: 0;
}
.product-list .product {
	display: inline-block;
	vertical-align: top;
	background: #fff;
	width: calc(20% - 16px);
	border-radius: 18px 18px 16px 16px;
	margin: 0 16px 16px 0;
	position: relative;
	box-shadow: 0 0 4px rgba(0,0,0,0.1);
}
@media screen and (max-width: 980px) {
	.product-list .product {
		width: calc(33% - 16px);
	}
	.product-list .product:nth-child(3n) {
		margin: 0 0 16px 0;
	}
}
@media screen and (max-width: 640px) {
	.product-list .product {
		width: calc(50% - 8px);
	}
	.product-list .product:nth-child(3n) {
		margin: 0 16px 16px 0;
	}
	.product-list .product:nth-child(2n) {
		margin: 0 0 16px 0;
	}
}
.product-list .product .more {
	position: absolute;
	right: 20px;
	bottom: 20px;
	color: #252525;
	transform: scale(1.3);
}
.product-list .product .image img {
	width: 100%;
	border-radius: 16px 16px 0 0;
}
.product-list .product .select-btn {
	background: #252525;
	color: #fff;
	border-radius: 32px;
	margin: 8px 0 16px 16px;
	padding: 4px 16px 4px 16px;
	border: 0;
}
.product-list .product .select-btn:hover {
	background: #ff6c00;
}
.product-list .product .product-body {
	padding: 12px 16px 16px 16px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.product-list .product .product-body h3 {
	width: 100%;
	padding: 0;
	margin: 0 0 10px 0;
	font-weight: 700;
	text-align: left;
}
.product-list .product .product-body ul.price-list {
	list-style: none;
	padding: 0;
	margin: 0 0 14px 0;
	width: 100%;
}
.product-list .product .product-body ul.price-list li {
	padding: 6px 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: left;
	border-bottom: 1px dashed #f0f0f0;
}
.product-list .product .product-body ul.price-list li > span:first-child {
	text-align: left;
	padding-left: 0;
	margin-left: 0;
}
.product-list .product .product-body .product-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid #f5f5f5;
}
.product-list .product .product-body .product-actions .select-btn {
	margin: 0;
	flex-grow: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

#cart-icon {
	position: fixed;
	bottom: 24px;
	right: 24px;
	background: #fff;
	padding: 16px 44px 16px 0;
	border-radius: 50px;
	box-shadow: 0 0 12px rgba(0,0,0,0.1);
	cursor: pointer;
	z-index: 9000;
	align-items: center;
	gap: 10px;
	min-height: 20px;
	min-width: 8px;
}
#cart-icon a {
	color: #000;
}
#cart-icon .icon {
	position: absolute;
	top: 14px;
	right: 12px;
}
#cart-icon #cart-total {
	margin: 0 0 0 24px;
}
#cart-icon #cart-count {
	position: absolute;
	top: -4px;
	right: -8px;
	background: #fff;
	color: #000;
	border-radius: 50%;
	text-align: center;
	min-height: 22px;
	min-width: 24px;
	padding: 2px 0 0 0;
	overflow: hidden;
	box-shadow: 0 0 12px rgba(0,0,0,0.1);
}
#cart-icon #cart-count.orange {
	background: #ff6c00;
	color: #fff;
}
@keyframes blinkCart {
	0%, 100% { transform: scale(1); background-color: #ff5722; }
	25% { transform: scale(1.2); background-color: #ffa726; }
	75% { transform: scale(1); background-color: #ff7043; }
}

.cart-float-blink {
	animation: blinkCart 0.3s ease-in-out 2;
}

/* Search */
.top {
	background: #fff;
	width: 100%;
	height: 50px;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
	position: fixed;
	top: -50px;
	z-index: 9999998;
}
.search {
	width: 100%;
	padding: 0;
	margin: 0 0 8px 0;
	position: relative;
	box-sizing: border-box;
	clear: both;
}
.search a.remove {
	position: absolute;
	top: 0;
	right: 80px;
}
.search a.remove:hover,
.search a.remove:hover i {
	color: #ff6c00 !important;
}
.search input[name=search],
.search input[name=name] {
	min-width: calc(100% - 88px);
	height: 40px;
	border: 1px solid #ddd;
	font-size: 1em;
	margin-top: 4px;
	outline: none;
	z-index: 8;
	min-height: 36px;
	box-sizing: border-box;
}

.search input[type=submit] {
	width: 72px;
	position: absolute;
	top: 4px;
	right: 0;
}
.search i {
	position: absolute;
	top: 11px;
	right: 12px;
	color: #ccc;
}
.search_advanced input[name=search],
.search_advanced input[name=name] {
	min-width: calc(100% - 128px);
}
.search_advanced input[type=submit] {
	border-radius: 8px 0 0 8px;
	top: 4px;
	right: 36px;
}
.search_advanced div.options {
	margin: 8px 0 0 0;
}
.search_advanced div.options input,
.search_advanced div.options select {
	margin: 0 8px 8px 0;
}
.search_advanced div.advanced {
	width: 44px;
	height: 40px;
	background: #cf1634;
	color: #fff;
	border-radius: 0 8px 8px 0;
	cursor: pointer;
	position: absolute;
	top: 4px;
	right: 0;
}
.search_advanced div.advanced i {
	position: absolute;
	top: 8px;
	right: 8px;
	transform: scale(.8);
	color: #fff;
	opacity: .6;
}
.search_advanced div.advanced:hover i {
	opacity: 1;
}

.search_switch {
	position: fixed;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	text-align: center;
	box-sizing: border-box;
	padding: 14px 0 0 0;
	top: 8px;
	right: 16px;
	background: #fff;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
	z-index: 999999;
	cursor: pointer;
}
.filter_switch {
	position: fixed;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	text-align: center;
	box-sizing: border-box;
	padding: 0;
	top: 8px;
	left: 16px;
	background: #fff;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
	z-index: 999998;
	cursor: pointer;
}
.filter_switch a {
	display: block;
	padding: 14px 0 0 0;
	width: 48px;
	height: 48px;
	border-radius: 24px;
	box-sizing: border-box;
}
.filter_switch i {
	color: #666;
}
.filter span.label {
	display: block;
	margin: 5px 0 5px 0;
	font-size: 1.1em;
	color: #666;
}
.filter input[type=date]{
	min-height: 32px;
	margin: 0 0 10px 0;
}
.filter_expanded {
	width: 170px;
	border-radius: 24px;
}
.filter_expanded p {
	position: absolute;
	padding: 0;
	margin: 0;
	top: 18px;
	left: 40px;
	color: #ff6c00;
}
.filter_expanded i {
	color: #ff6c00;
}
#current_address {
	width: 100%;
	clear: both;
	padding: 5px 0 0 8px;
	box-sizing: border-box;
	background: #fff;
}
#current_address ul {
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
#current_address ul li {
	float: unset;
	width: 100%;
	margin: 0;
	cursor: pointer;
}

/* Search Results */
#search_results {
	background: #fff;
	box-shadow: 2px 2px 5px #ccc;
	overflow-x: hidden;
	position: absolute;
	top: 40px;
	max-height: calc(100vh - 50px);
	width: 100%;
	z-index: 10000;
}
.search_results {
	background: transparent;
	list-style: none;
	margin: 0;
	padding: 0;
	cursor: pointer;
}
.search_results li {
	width: 100%;
	position: relative;
	padding: 8px;
}
.search_results .customer_name {
	background: #f0f0f0;
}
.search_results ul.customer_address {
	background: #f9f9f9;
	padding: 0 0 0 24px;
}

.tag {
	border-radius: 16px;
	background: #eee;
	color: #252525;
	padding: 4px 16px 4px 16px;
}
.tag:hover {
	background: #ff6c00;
	color: #fff;
}
.product-image {

}
/* No image */
.no-image {
	width: 50px;
	height: 50px;
	border-radius: 8px;
	border: 1px solid #ddd;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.no-image:after {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	height: 50px;
	width: 50%;

	border-right: 1px solid #ddd;
	-webkit-transform: skew(-45deg);
	-moz-transform: skew(-45deg);
	transform: skew(-45deg);
	z-index: 2;
}
.no-image:before {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	height: 50px;
	width: 50%;

	border-right: 1px solid #ddd;
	-webkit-transform: skew(45deg);
	-moz-transform: skew(45deg);
	transform: skew(45deg);
	z-index: 2;
}

/* ------------------------------------------------------- */
/* BREADCRUMBS */
/* ------------------------------------------------------- */
ul.breadcrumb {
	width: 100%;
	position: relative;
	padding: 0;
	margin: 0;
	transition: none;
}
ul.breadcrumb::after {
	content: "";
	clear: both;
	display: table;
	margin: 0 0 16px 0;
}
ul.breadcrumb li {
	background: #f0f0f0;
	list-style: none;
	float: left;
	height: 48px;
	padding: 0;
	color: #252525;
	border: 1px solid #dedede;
	border-right: 0;
}
ul.breadcrumb li:hover {
	background: #ff6c00;
	border-color: #ff6c00;
}
ul.breadcrumb li:last-child {
	border-radius: 0 8px 8px 0;
	border-right: 1px solid #dedede;
}
ul.breadcrumb li:first-child {
	border-radius: 8px 0 0 8px;
}
ul.breadcrumb li:first-child a {
	padding: 12px 16px 8px 16px;
}
ul.breadcrumb li.one {
	border-right: 1px solid #dedede;
	border-radius: 8px;
}
ul.breadcrumb li a {
	display: block;
	font-size: 1em;
	padding: 16px 16px 4px 16px;
	color: #252525;
}
ul.breadcrumb li a:hover {
	color: #ff6c00;
	transition: none;
}
ul.breadcrumb li:hover a {
	color: #fff;
}

.checkbox {
	display: inline-block;
	position: relative;
	padding-left: 32px;
	margin: 0 16px 8px 0;
	cursor: pointer;
	font-size: 1em;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
	border-radius: 4px;
}
.checkbox:hover input ~ .checkmark {
	background-color: #ccc;
	border-radius: 4px;
}
.checkbox input:checked ~ .checkmark {
	background-color: #ff6c00;
	border-radius: 4px;
}
.checkbox input[type=radio] ~ .checkmark,
.checkbox:hover input[type=radio] ~ .checkmark,
.checkbox input[type=radio]:checked ~ .checkmark {
	border-radius: 50%;
}
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}
.checkbox input:checked ~ .checkmark:after {
	display: block;
}
.checkbox .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.checkbox input[type=radio] ~ .checkmark:after {
	border-radius: 50%;
	border: 0;
	left: 9px;
	top: 9px;
	width: 8px;
	height: 8px;
	background: #fff;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
}
.float_chat:hover {
	background: #ff6c00;
	color: #fff;
}
.float_chat:hover a {
	color: #fff;
}
.float_chat {
	position: fixed;
	bottom: 16px;
	left: 16px;
	background: #fff;
	padding: 8px 48px 8px 48px;
	border-radius: 16px;
}
.float_chat p {
	padding: 0;
	margin: 0;
	font-size: .9em;
}
.float_chat span {
	position: absolute;
	top: 12px;
	right: 12px;
}
.float_chat img {
	width: 32px;
	height: 32px;
	border-radius: 16px;
	position: absolute;
	top: 8px;
	left: 8px;
}
/* ------------------------------------------------ */
/* LOGIN */
/* ------------------------------------------------ */
.login_facebook {
	border-radius: 8px;
	background: #f9f9f9;
	padding: 8px;
	margin: 0 auto 0 auto;
}
#login {
	width: 100%;
	margin: 64px auto 0 -120px;
	padding: 0;
	box-sizing: border-box;
}
#login div.container {
	background: #fff;
	border: 1px solid #d4d4d4;
	border-radius: 12px;
	padding: 24px;
	box-sizing: border-box;
}
#login div.container input.input {
	width: 100%;
	margin: 0 0 10px 0;
	padding: 10px;
	font-size: 1.2em;
}
@media screen and (max-width: 640px) {
	#login {
		width: calc(100% - 32px);
		margin: 64px auto 0 auto;
	}
	#login div.container {
		padding: 20px;
	}
	#login div.container div {
		width: 100%;
	}
	#login div.container input.input {
		width: 100%;
		clear: both;
		display: inline-table;
		margin: 0 0 20px 0;
	}
}
/* Design */
ul.design {
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.design li {
	line-height: 160%;
	margin: 4px 0 8px 0;
	float: none !important;
}
ul.design li.images img {
	max-width: 150px;
	max-height: 250px;
	box-sizing: border-box;
	margin: 0 8px 0 0;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 4px;
	cursor: zoom-in;
}
ul.design li.label {
	background: #eee;
	color: #000;
	font-weight: 500;
	font-size: 1.3em;
	padding: 8px 8px 8px 16px;
	border-radius: 8px;
	margin: 16px 0 8px 0;
}
ul.design li.label p.description {
	color: #999;
	font-size: .8em;
	padding: 0;
	margin: 0 0 4px 0;
	line-height: 100%;
	display: block;
}
ul.design li.description {
	font-size: .9em;
	color: #999;
	margin: 0 0 16px 0;
}
ul.design li.question {
	color: #252525;
	font-size: 1.3em;
	line-height: 2.2em;
}
span.warning {
	background: transparent !important;
	color: #ff6c00;
	font-size: 1.1em;
	line-height: 1.3em;
}

div.warning {
	background: #ffecef;
	color: #ff6c00;
	font-size: 1.1em;
	line-height: 1.3em;
	padding: 16px;
	border-radius: 8px;
	margin: 16px 0 8px 0;
	clear: both;
}
.warning .icon {
	color: #ff6c00;
	display: block;
	margin: 24px;
	transform: scale(2);
}
.warning .description {
	padding: 0;
	margin: 4px 0 0 0;
	font-size: .85em;
}
.landing {
	width: calc(100% - 48px);
	margin: 0 auto 0 auto;
	text-align: center;
}
.landing .warning {
	width: auto;
	display: inline-block;
	margin: 24px auto 0 auto;
	padding: 24px;
	border-radius: 8px;
}
div.upload_image:hover {
	background: #e7e7e7;
}
div.upload_image {
	border: 1px solid #ccc;
	box-sizing: border-box;
	background: #eee;
	width: 150px;
	height: 250px;
	border-radius: 4px;
	padding: 100px 0 0 0;
	margin: 0 8px 0 0;
	overflow: hidden;
	text-align: center;
	cursor: pointer;
}
ul.design li.submit {
	margin: 4px 0 0 0;
	line-height: 350%;
}
ul.design li.upload {
	margin: 0 0 16px 0;
	clear: both;
}
ul.design li.upload:after {
	content: "";
	display: block;
	clear: both;
}
ul.design span.suggest {
	background: #dadada;
	border-radius: 24px;
	padding: 4px 16px 4px 16px;
	cursor: pointer;
	margin: 0 0 4px 0;
}
ul.design li input[type=radio],
ul.design li label {
	cursor: pointer;
}
:root {
	--pw: 1%;
}
@keyframes grow_right {
	0% {
		width: 1%;
	}
	100% {
		width: var(--pw);
	}
}
div.percent {
	background: #eee;
	border-radius: 16px;
	height: 12px;
	margin: 4px 0 16px 0;
	position: relative;
	border: 4px solid #eee;
}
div.percent div.current {
	width: var(--pw);
	background: #ff6c00;
	height: 12px;
	border-radius: 16px;
	animation: 2s ease-out 0s 1 normal grow_right;
}
#clear, .clear {
	clear: both
}
.link {
	padding: 16px 16px 16px 48px;
	margin: 4px auto 4px auto;
	background: #f0f0f0;
	width: calc(100% - 64px);
	position: relative;
	display: inline-block;
	border-radius: 8px;
	cursor: pointer;
	line-height: 100%;
}
.link:hover {
	background: #e8f2dd;
	color: #669933;
	cursor: pointer;
}
.link:active {
	background: #b2d68a;
}
.link i {
	position: absolute;
	top: 12px;
	left: 16px;
}
.link input {
	width: 1px;
	height: 1px;
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
}
/* ------------------------------------------------------- */
/* PAGE LAYOUT */
/* ------------------------------------------------------- */
.content {
	width: 100%;
	padding: 8px;
	margin: 0;
	overflow-x: hidden;
	box-sizing: border-box;
}
.block {
	background: #fff;
	margin: 8px 8px 8px 4px;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
	padding: 16px;
	line-height: 100%;
}
.block span.user {
	color: #ff6c00;
	display: block;
	clear: both;
	margin: 0 0 5px 0;
}
.block span.date {
	color: #ddd;
	clear: both;
	display: block;
	margin: 5px 0 0 0;
}
/* Wrapper */
.wrapper {
	background: #f9f9f9;
	width: 100%;
	margin: 0;
	padding: 0;
	z-index: 1;
}
@media screen and (max-width: 640px) {
	.wrapper {
		width: calc(100% - 32px);
		margin: 0 16px 0 16px;
	}
}
.wrapper:after {
	clear: both;
	display: block;
	position: relative;
	content: ' ';
	height: 8px;
	width: 100%;
}

div#left {
	background: #232323;
	position: fixed;
	top: 0;
	left: 0;
	width: 240px;
	height: calc(100vh);
	margin: 0;
	padding: 0;
	overflow-y: scroll;
	overflow-x: hidden;
	z-index: 10000;
}
div#left::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,0.3);
}
@media screen and (max-width: 640px) {
	div#left {
		width: 100%;
		float: none;
		clear: both;
	}
}
div#left ul {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
div#left li {
	padding: 0 16px 0 16px;
	width: calc(100% - 24px);
	cursor: pointer;
	position: relative;
	list-style: none;
	font-size: .9em;
}
div#left div.notification {
	background: #1a759a;
	color: #5d9eba;
	min-width: 1px;
	height: 20px;
	border-radius: 5px;
	position: absolute;
	top: 8px;
	right: 10px;
	padding: 0 5px 0 5px;
	text-align: center;
	line-height: 20px;
	font-size: .85em;
}
div#left div.notification i {
	line-height: 22px;
}
div#left div.new {
	background: #ff6c00;
	color: #ffe9ee;
	padding: 0 5px 0 5px;
}
div#left h1 {
	font-size: .9em;
	font-weight: bold;
	width: calc(100% - 32px);
	padding: 24px 16px 8px 16px;
	color: #808080;
	border: 0;
	margin: 0;
	text-transform: uppercase;
}
div#left div.close {
	position: fixed;
	top: 16px;
	right: 24px;
	cursor: pointer;
	background: #000;
	border-radius: 8px;
	width: 32px;
	height: 32px;
	text-align: center;
	z-index: 10000;
	overflow: hidden;
	display: none;
	transition: none;
	opacity: .8;
}
div#left div.close:hover {
	background: #ff6c00;
	color: #fff;
}
@media screen and (max-width: 640px) {
	div#left div.close {
		display: inline-block;
	}
}
div#left div.close i {
	position: absolute;
	top: 4px;
	left: 4px;
}
div#left ul.menu {
	background: #232323;
	list-style: none;
	margin: 0;
	padding: 0;
}
div#left ul.menu li i {
	color: #c2c2c2;
	position: absolute;
	top: 12px;
	left: 12px;
}
div#left ul.menu li a {
	font-size: 1em;
	padding: 16px 16px 16px 48px;
	color: #c2c2c2;
	width: calc(100% - 64px);
	display: block;
	position: relative;
	transition: none;
}
div#left ul.menu li a:hover,
div#left ul.menu li a:hover i,
div#left ul.menu li a.focus:hover {
	color: #fff;
	opacity: 1;
}
div#left ul.menu h1.focus {
	color: #fff;
	opacity: 1;
}
div#left ul.menu li a.focus {
	background: #343434;
	border-radius: 8px;
	color: #fff;
	opacity: 1;
}
div#left ul.menu li a.focus i {
	color: #fff;
	opacity: 1;
}
div#left ul.menu li .counter {
	background: #ff6c00;
	color: #fff;
	border-radius: 4px;
	font-size: .85em;
	position: absolute;
	top: 12px;
	right: 8px;
	padding: 4px 6px 4px 6px;
}
div#left ul.menu li .counter[data="0"] {
	background: #313131;
	color: #999;
}

/* Menu Switch On Off */
div.menu_switch {
	width: 50px;
	height: 50px;
	text-align: center;
	display: none;
	overflow: hidden;
}
div.menu_switch a {
	display: block;
	width: 50px;
	height: 50px;
	padding: 15px 0 0 0;
	color: #fff;
	background: #ffdd04;
}
div.menu_switch a:active {
	display: block;
	width: 50px;
	height: 50px;
	padding: 15px 0 0 0;
	color: #fff;
	background: #000  ;
}
@media screen and (max-width: 640px) {
	div.menu_switch {
		display: inherit;
		width: 50px;
		height: 50px;
	}
}
/* Right */
div#right {
	padding: 0 0 0 260px;
	width: calc(100% - 288px);
	float: left;
	display: table;
	position: relative;
	overflow-x: hidden;
}
@media screen and (max-width: 640px) {
	div#right {
		padding: 0;
		width: 100%;
		float: none;
		clear: both;
	}
}
.dialog {
	display: table;
	width: auto;
	padding: 32px;
	font-size: 1.5em;
	margin: 10% auto 0 auto;
	text-align: center;
	background: #e8f2dd;
	color: #669933;
	border-radius: 8px;
}
.dialog .submit {
	display: inherit;
	margin: 24px auto 0 auto;
	font-size: .8em;
	width: auto;
}
.dialog p.description {
	font-size: .8em;
	font-weight: normal;
}
span.countdown:after {
	content: "0";
	width: 1ch;
	animation: countdown 10s step-end normal;
}
@keyframes countdown {
	0% {
		content: "9";
	}
	10% {
		content: "8";
	}
	20% {
		content: "7";
	}
	30% {
		content: "6";
	}
	40% {
		content: "5";
	}
	50% {
		content: "4";
	}
	60% {
		content: "3";
	}
	70% {
		content: "2";
	}
	80% {
		content: "1";
	}
	90% {
		content: "0";
	}
	100% {
		content: "0";
	}
}
/* ------------------------------------------------------- */
/* BUTTON */
/* ------------------------------------------------------- */
.button,
button {
	background: #e9e9e9;
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: 1em;
	color: #666;
	cursor: pointer;
	line-height: 32px;
	min-height: 32px;
	padding: 8px 12px 4px 14px;
	border: 1px solid #e9e9e9;
	border-radius: 8px;
	white-space: nowrap;
	margin: 0 8px 8px 0;
	-webkit-appearance: none;
	display: inline-flex;
}
.button:hover,
button:hover {
	background: #333;
	border: 1px solid #333;
	color: #ccc;
}
.button:hover i,
button:hover i {
	color: #fff;
}
.button i,
button i {
	transition: none;
	padding: 0;
	margin: 2px 2px 2px 2px;
	display: inline-block;
}
.button .number {
	width: auto;
	height: 8px;
	display: inline-block;
	margin: 6px 0 0 8px;
	padding: 4px 8px 8px 8px;
	line-height: 100%;
	background: #ff6c00;
	border-radius: 24px;
	color: #fff;
	font-size: .9em;
}
.button:hover .number {
	background: #fff;
	color: #333;
}
button.focus {
	font-size: 11px;
	color: #fff;
}
button.focus:hover {
	background-position: 0 -60px;
	border: 1px solid #0e6a33;
}
a.submit,
button.submit,
input.submit {
	color: #fff;
	background: #ff6c00;
	border: 1px solid #ff6c00;
	border-radius: 8px;
	cursor: pointer;
	font-size: 1em;
	box-shadow: 0 1px 5px #eee;
	-webkit-appearance: none;
	min-width: unset;
}
a.submit:hover,
button.submit:hover,
input.submit:hover {
	min-width: unset;
	background: #c6551e;
	border: 1px solid #c6551e;
}
.disabled,
input.disabled,
input[disabled],
input[disabled]:hover {
	background: #eee;
	color: #666;
	cursor: not-allowed;
	border: 1px solid #ddd;
}
.error_log {
	font-family: 'Courier New', arial, sans-serif;
	background: #333;
	color: #ccc;
	width: 100%;
	height: 200px;
	padding: 10px;
	line-height: 200%;
	box-sizing: border-box;
}
.upload_image {
	display: block;
	float: left;
	width: 130px;
	height: 200px;
	position: relative;
}
.upload_image span {
	color: #ccc;
	display: block;
	background: #f0f0f0;
	width: 130px;
	height: 200px;
	text-align: center;
	padding: 60% 0 0 0;
	border: 1px solid #e5e5e5;
	box-sizing: border-box;
}
.upload_image img {
	width: 130px;
	height: 200px;
	border-radius: 3px;
}
.upload_image input#file {
	cursor: pointer;
	position: absolute;
	width: 130px;
	height: 225px;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
	filter: alpha(opacity=0);
}
.upload_image input.submit {
	display: block;
}
.post_type {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: table;
}
.post_type li {
	margin: 0 8px 0 0 !important;
	background: #f0f0f0;
	border-radius: 8px;
	text-align: center;
	width: 48px !important;
	height: 48px;
	cursor: pointer;
	display: inline-block;
	position: relative;
}
.post_type li i {
	position: absolute;
	top: 12px;
	left: 12px;
}
.post_type li:hover,
.post_type li.active {
	background: #ff6c00;
	color: #fff;
}

/* ------------------------------------------------------- */
/* LAYOUT */
/* ------------------------------------------------------- */
ul.layout {
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.layout li {
	width: 100%;
	clear: both;
	line-height: 30px;
	min-height: 30px;
}
.full-size {
	width: 100%;
}
ul.product {
	margin: 10px 0 10px 0;
	display: inline-block;
}
ul.product textarea.description {
	height: 150px;
}
ul.product li.import_date option,
ul.product li.import_date select {
	width: 80px;
	white-space: nowrap;
}
ul.size {
	width: 100%;
	clear: both;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid #ddd;
	border-top: 0;
	border-radius: 4px;
	display: table;
}
ul.size div.wrap_size {
	width: 100%;
	float: left;
	margin: 10px 0 10px 10px;
}
ul.size div.wrap_size input,
ul.size div.wrap_size select {
	cursor: not-allowed;
}
ul.size li {
	width: auto;
	float: left;
	clear: none;
	border: 0;

	border-radius: 4px 4px 4px 4px;
	min-width: 40px;
	text-align: center;
	padding: 0 !important;
	margin: 0 8px 0 0;
 	overflow: hidden;
}
ul.size li.input {
	border: 1px solid #ddd;
}
ul.size li:first-child {
	background: #f0f0f0;
	border: 1px solid #ddd;
	border-radius: 4px 0 0 4px;
	margin: 0;
}
ul.size li:nth-child(2) {
	border: 1px solid #ddd;
	border-radius: 0 4px 4px 0;
	border-left: 0;
	background: #fff;
	min-width: 50px;
	margin-right: 10px;
}
ul.size li.colors {
	border: 0;
	background: transparent;
	cursor: pointer;
	margin: 0 5px 0 0;
}
ul.size li.colors li {
	border: 0;
}
ul.size li input {
	border: 0;
	background: #fff;
	outline: none;
	width: 40px;
}
ul.size_choose {
	list-style: none;
	display: block;
	height: 40px;
	margin: 5px 0 0 0;
	padding: 0;
	width: 100%;
	position: relative;
	overflow: hidden;
	transition: none;
}
ul.size_choose li {
	width: auto;
	float: left;
	height: 38px;
	clear: none;
	border: 1px solid #f9f9f9;
	border-radius: 4px 4px 0 0;
	margin: 0 0 0 10px;
	padding: 0 15px 0 0 !important;
	cursor: pointer;
	z-index: 1;
	position: relative;
}
ul.size_choose:after {
	content: '';
	width: 100%;
	height: 1px;
	position: absolute;
	background: #ddd;
	margin: 0 3px 0 3px;
	bottom: 0;
	display: block;
	z-index: 2;
}
ul.size_choose li:last-child {
	float: right;
	padding: 0 !important;
	cursor: default;
}
ul.size_choose li:last-child:hover,
ul.size_choose li:last-child:active {
	border: 1px solid #f9f9f9;
	cursor: default;
	z-index: -1;
}
ul.size_choose li:last-child div {
	float: left;
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 4px 0 0 4px;
	padding: 0 15px 0 15px;
	margin: 0;
}
ul.size_choose li:last-child div:nth-child(2) {
	background: #fff;
	border: 1px solid #ddd;
	border-left: 0;
	border-radius: 0 4px 4px 0;
	color: #ff6c00;
	font-weight: bold;
	font-size: 1.1em;
}
ul.add-size {
	list-style: none;
	min-height: 100px;
	position: fixed;
	top: 40%;
	padding: 20px;
	background: #fff;
	z-index: 999999;
	box-shadow: 0 1px 5px #ccc;

}
ul.add-size li {
	margin: 0 0 5px 0;
}
ul.add-size label {
	background: #f0f0f0;
	border: 1px solid #ccc;
	border-radius: 4px 0 0 4px;
	padding: 6px 9px 6px 9px;
	margin: 0 -4px 0 0;
}
ul.add-size li.submit {
	clear: both;
}
ul.colors {
	float: left;
	box-sizing: border-box;
	list-style: none;
	overflow: hidden;
	padding: 0;
	margin: 0 0 0 0;
}
ul.colors li {
	float: left;
	width: 30px;
	clear: right;
	border: 0;
	background: transparent !important;
	margin-right: 0 !important;
	min-width: 10px !important;
}
ul.colors input {
	display: none;
}
ul.colors div.color_choose {
	width: 20px;
	height: 20px;
	border-radius: 20px;
	cursor: pointer;
	color: #fff;
	text-align: center;
	margin: 7px 0 3px 0;
}
ul.colors div.black_text {
	box-shadow: 0 0 3px #ccc;
	color: #252525;
}
ul.colors div.color_choose i {
	padding-top: 5px;
}
span.color,
ul.colors li span {
	width: 10px;
	height: 10px;
	border-radius: 10px;
	display: inline-block;
	border: 1px solid #fff;
}
ul.list_categories {

}
ul.list_categories li {
	min-height: 20px !important;
}
.search_category {
	margin: 0;
	position: relative;
}
.search_category input {
	width: 100%;
	border-radius: 8px 8px 0 0;
	border-bottom: 0;
}
.search_category .clear {
	width: 24px;
	height: 24px;
	position: absolute;
	top: 6px;
	right: 8px;
	cursor: pointer;
}
.search_category .clear i {
	color: #ccc;
}
.search_category .clear:hover i {
	color: #ff6c00;
}
ul.categories {
	border: 1px solid #999;
	background: #fff;
	width: 100%;
	height: 400px;
	padding: 8px;
	box-sizing: border-box;
	list-style: none;
	overflow: hidden;
	overflow-y: scroll;
	cursor: pointer;
	border-radius: 0 0 8px 8px;
}
ul.categories ul {
	list-style: none;
	padding: 0 0 0 24px;
}
ul.categories li:first-child {
	padding: 0 !important;
}
ul.categories li {
	width: 100%;
	font-size: .8em;
	position: relative;
}
ul.categories li:before {
	position: absolute;
	top: 10px;
	left: -12px;
	content: '';
	border-bottom: 1px dashed #ccc;
	width: 18px;
	height: 1px;
	z-index: 1;
}
ul.categories li:after {
	position: absolute;
	top: -24px;
	left: -12px;
	content: '';
	border-left: 1px dashed #ccc;
	width: 1px;
	height: 32px;
	z-index: 1;
}
ul.categories li label {
	z-index: 2;
}
ul.categories li:hover {
	color: #ff6c00;
	transition: none;
}
ul.categories li div.link-list {
	float: right;
	font-size: .9em;
}

ul.status div {
	float: left;
	margin: 5px 0 0 4px;
}
ul.status i {
	position: absolute;
	top: 4px;
	left: 4px;
}
ul.status a {
	margin: 0;
	height: 36px;
	font-size: .8em;
	padding: 8px 8px 8px 32px;
	border-radius: 8px;
	position: relative;
}
ul.status #confirmed a {
	padding: 8px 8px 8px 24px;
}
ul.status a.process {
	background: #f0f0f0;
	color: #ccc;
	border: 1px solid #eee;
	cursor: progress;
}
ul.status a.off {
	background: #f0f0f0;
	color: #ccc;
	border: 1px solid #eee;
}
ul.status a.on {
	background: #ff6c00;
	color: #fff;
	border: 1px solid #ff6c00;
}
div.progress-task div {
	background: #eee;
	float: left;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	margin: 0 16px 0 0;
	position: relative;
}
div.progress-task div::after {
	content: ' ';
	width: 16px;
	height: 1px;
	border-bottom: 1px dashed #eee;
	position: absolute;
	top: 13px;
	right: -16px;
}
div.progress-task div:last-child::after {
	border: 0;
}
div.progress-task div.current {
	background: #ff6c00;
}
ul.product ul.images {
	display: table;
	width: 200px;
	height: 200px;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.product ul.images li {
	display: table;
	width: 200px;
	height: 200px;
	float: left;
	clear: none;
	margin: 0 10px 0 0;
	padding: 0;
	text-align: center;
}
ul.product ul.images img {
	width: 200px;
	height: 200px;
	border: 0;
	margin: 0 0 10px 0;
}
ul.product ul.images input[type=text] {
	width: 200px;
	margin: 0 0 15px 0;
}
ul.product ul.images input[type=submit] {
	
}
ul.product li#load_product_images {
	padding: 0;
	width: 100%;
}
ul.product li#load_product_images iframe {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 400px;
	overflow: hidden;
	border: 0;
}
/* ------------------------------------------------------- */
/* SPLIT */
/* ------------------------------------------------------- */
ul.split {
	width: 100%;
	list-style: none;
	margin: 0 0 16px 0;
	padding: 0;
	display: table;
}
ul.split li {
	float: left;
}
ul.split li.w12 {
	width: 100%;
}
ul.split li.w8 {
	width: calc(80% - 16px);
	margin: 0 16px 0 0;
}
ul.split li.w7 {
	width: 70%;
}
ul.split li.w5 {
	width: 50%;
}
ul.split li.w4 {
	width: 40%;
}
ul.split li.w3 {
	width: 30%;
}
ul.split li.w2 {
	width: 20%;
}
ul.split .right {
	width: calc(100% - 16px);
	padding: 0 0 0 16px;
}
ul.split li.w5 .table {
	width: calc(100% - 16px);
	margin: 0 16px 0 0;
}
ul.split li.w5 .design {
	width: calc(100% - 8px);
	margin: 0 8px 0 0;
}
ul.split li.w5:last-child .design {
	margin: 0 0 0 8px;
}
/* Table */
ul.table {
	width: calc(100% - 2px);
	background: #fff;
	min-height: 30px;
	list-style: none;
	border: 1px solid #ddd;
	border-top: 0;
	margin: 0;
	padding: 0;
	clear: both;
	display: table;
	position: relative;
}
div.table_wrapper .table:last-child {
	border-radius: 0 0 8px 8px;
	margin: 0 0 16px 0;
}
ul.table_footer {
	border-radius: 0 0 8px 8px;
	margin: 0 0 16px 0;
}

ul.table li {
	min-width: 1%;
	line-height: 150%;
	padding: 16px 8px 8px 8px;
	float: left;
	min-height: 24px;
	color: #252525;
}
@media screen and (max-width: 640px) {
	ul.table li {
		padding: 4px 8px 8px 8px !important;
		min-height: unset;
	}
}
/* table_header */
ul.table_header li {
	min-height: 8px;
	padding: 8px 8px 8px 8px !important;
	font-size: .9em;
	cursor: pointer;
}
ul.table_header li i {
	font-size: .8em;
}
@media screen and (max-width: 640px) {
	ul.table_header li {
		min-height: unset;
		font-size: .8em;
	}
}
ul.table_header,
ul.table li.header {
	background: #f9f9f9;
}
ul.table_header {
	border: 1px solid #ddd;
	color: #252525;
	border-radius: 8px 8px 0 0;
	margin: 16px 0 0 0;
}
ul.table_board li {
	font-size: 2em;
	font-weight: normal;
}
ul.table li.number {
	font-size: 1em;
	min-width: 32px;
	clear: both;
	overflow: hidden;
	text-align: center;
	color: #ccc;
}
ul.table_board li.number {
	min-width: 24px;
}
ul.table li.nobody {
	color: #aaa;
	text-align: center;
	width: 100%;
	min-height: 32px;
}
ul.table li.image {
	text-align: center;
	width: 48px;
}
ul.table li.image .symbol {
	display: inline-block;
	text-align: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #f0f0f0;
	color: #ff6c00;
}
ul.table li.image .verified {
	background: #e8f2dd;
	color: #669933;
}
ul.table li.image div.symbol i {
	margin: 12px 0 0 0;
}
ul.table li.image img {
	max-width: 56px;
	max-height: 56px;
}
ul.table li.image img.product-image {
	border: 0;
}
ul.table li.image img.book {
	border: 0;
}
ul.table li.order {
	width: 5%;
	font-size: 14px;
}
ul.table_sub {
	background: #f9f9f9;
}
ul.table_sub li.order {
	padding: 10px 10px 10px 32px;
}
ul.table li.title {
	width: 20%;
	word-break: break-word;
}
ul.table li.title .description {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 240px;
}
ul.table li span.unknown {
	color: #666;
}
ul.table li.grade {
	width: 20%;
}
@media screen and (max-width: 640px) {
	ul.table li.grade {
		width: calc(100% - 32px);
	}
}
ul.table li.submit {
	text-align: right;
	width: 20%;
}
@media screen and (max-width: 640px) {
	ul.table li.submit {
		text-align: left;
		width: calc(100% - 32px);
	}
}
ul.table li.grade_willingness {
	min-width: 160px;
}
ul.table li.grade_minimize {
	width: 48px;
}
ul.table li.grade_results {
	width: 8%;
}

.point_good,
.point_normal,
.point_bad {
	font-size: 1em;
	border-radius: 4px;
	padding: 4px 8px 4px 8px;
	text-align: center;
	white-space: nowrap;
}
.point_good {
	background: #e8f2dd;
	color: #669933;
}
.point_normal {
	background: #f0f0f0;
	color: #333;
}
.point_bad {
	background: #f5e3e6;
	color: #ff6c00;
}
ul.table li.point {
	min-width: 48px;
}
ul.table li.order {
	width: 30%;
}
ul.table li.order a {
	background: #fff;
	border-radius: 24px;
	width: 24px;
	height: 24px;
	display: block;
}
ul.table li.order a:hover {
	background: #ff6c00;
	color: #fff;
}
ul.table li p.description {
	font-size: .95em;
	line-height: 150%;
	padding: 0;
	margin: 4px 0 0 0;
	color: #999;
}
ul.table li.title i,
ul.table li.month i {
	font-size: .8em;
	font-style: normal;
}
ul.table li.comment {
	width: 13%;
}
ul.table li.group {
	width: 10%;
	word-break: break-word;
}
ul.table li.voucher {
	width: auto;
}
@media screen and (max-width: 640px) {
	ul.table li.group {
		width: calc(50% - 32px);
	}
	ul.table li textarea {
		width: 100%;
	}
}
ul.table li.class {
	width: calc(100% - 32px);
}
@media screen and (max-width: 640px) {
	ul.table li.class {
		width: calc(100% - 32px);
	}
}
ul.table li.class .member_class {
	font-size: 1.1em;
	width: calc(100% - 32px);
	background: #f9f9f9;
	border-radius: 8px;
	padding: 16px 16px 16px 16px;
	margin: 4px 0 0 0;
	display: inline-block;
	position: relative;
}
ul.table li.class .member_class p {
	font-size: .8em;
	position: absolute;
	top: 0;
	right: 16px;
	background: #666;
	color: #fff;
	border-radius: 16px;
	padding: 4px 16px 4px 16px;
}
ul.table li.class .member_class:hover {
	background: #ff6c00;
	color: #fff;
}
ul.table li.class .member_class:hover p {
	background: #fff;
	color: #ff6c00;
}
ul.table li.month {
	min-width: 72px;
	cursor: pointer;
}
ul.table li.email {
	width: 10%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
ul.table li.type {
	width: 11%;
}
ul.table li.type b {
	text-transform: uppercase;
	font-weight: normal;
}
ul.table li.attendance {
	width: 15%;
}
@media screen and (max-width: 640px) {
	ul.table li.attendance {
		width: 100%;
	}
}
ul.table li.attendance span.off {
	color: #ccc;
}
ul.table li.attendance span.on {
	color: #4cd392;
	padding: 4px 0 0 32px;
	position: relative;
}
ul.table li.attendance span.on i {
	position: absolute;
	top: 0;
	left: 0;
}
ul.table li.attendance span.warning {
	color: #ff6c00;
	padding: 4px 0 0 32px;
	position: relative;
	line-height: 1.6em;
}
ul.table li.attendance span.warning i {
	position: absolute;
	top: 0;
	left: 0;
}
ul.table li.tools {

}
ul.table li.tools a {
	cursor: pointer;
}
ul.table li.tools .attendance {
	background: #4cd392;
	color: #fff;
	border: 1px solid #4cd392;
}
ul.table li.switch {
	width: 10%;
}
ul.table li.switch a i.off {
	color: #ccc !important;
}
ul.table li.free {
	width: auto;
}
ul.table li.chart {
	width: 320px;
}
@media screen and (max-width: 640px) {
	ul.table li.chart {
		width: calc(100% - 64px);
	}
}
ul.table li.leader {
	width: 15%;
}
ul.table li.leader a {
	color: #ccc;
}
ul.table li.leader a:hover,
ul.table li.leader a.active {
	color: #ff6c00;
}
ul.table li.active {
	width: 10%;
}
ul.table li.active i {
	color: #ccc;
	cursor: pointer;
}
ul.table li.active i.on {
	color: #ff6c00;
}
ul.table li.message {
	width: 40%;
}
ul.table li.answer {
	width: 35%;
	font-size: .9em;
}
ul.table li .unlink {
	padding: 4px 8px 8px 8px;
	min-height: 28px;
}
ul.table li.progress {
	width: 200px;
}
ul.table li.progress .bar {
	width: 100%;
	height: 8px;
	background: #f0f0f0;
}
ul.table li.progress .bar .current {
	width: 50px;
	height: 8px;
	background: #ff6c00;
	min-width: 1px;
}
ul.table li .category_name {
	padding: 4px 16px 4px 16px;
	margin: 0 8px 0 0;
	background: #f5f5f5;
	border-radius: 16px;
	display: inline-block;
	float: left;
	font-size: .9em;
}

.card {
	width: calc(100% - 48px);
	list-style: none;
	border-radius: 16px;
	margin: 8px 0 16px 0;
	padding: 16px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	position: relative;
}
.card .status {
	background: #f5f5f5;
	position: absolute;
	bottom: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	text-align: center;
}
.card .status_done {
	background: #e8f2dd;
	color: #669933;
}
.card .status i {
	margin: 4px 0 0 0;
}
.card .description {
	font-size: .9em;
	color: #999;
}

/* Sortable */
.sortable {
	list-style: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
.sortable li {
	width: 100%;
}

.delete {
	display: block;
	margin: 24px 0 0 0;
}
.image_upload {
	text-align: center;
	width: 48px;
	border: 1px solid #ccc;
	border-radius: 8px;
	padding: 16px;
	cursor: pointer;
	position: relative;
	z-index: 1;
	float: left;
}
.image_upload i {
	color: #ccc;
	opacity: 1;
}
.image_upload:hover,
.image_upload_active {
	background: #ff6c00;
	border: 1px solid #ff6c00;
	color: #fff;
	opacity: 1;
}
.image_upload_active i {
	color: #fff;
}
.image_upload_active a i {
	color: #ccc;
}
.upload .remove {
	width: 24px;
	height: 24px;
	z-index: 2;
	display: block;
	float: left;
	margin: 8px;
	text-align: center;
}
.upload .remove:hover {
	transition-duration: 1s;
	transform: rotate(360deg);
	transform-origin: center;
}
ul.orders input {
	width: 100%;
}
.orders {
	position: relative;
	cursor: pointer;
}
.orders .outstock {
	position: absolute;
	top: 14px;
	left: -8px;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background: #ff6c00;
	color: #fff;
	text-align: center;
	padding: 4px 0 0 0;
	box-sizing: border-box;
}
.orders .outstock i {
	color: #fff !important;
	font-size: .9em;
}
span.phone {
	color: #999;
	background: #f0f0f0;
	border-radius: 4px;
	font-size: .9em;
	box-sizing: border-box;
	padding: 3px 4px 2px 4px;
	display: inline-block;
}
.orders span.price {
	color: #ff6c00;
	display: block;
	clear: left;
	margin: 5px 0 0 0;
}
.orders span.price-float {
	position: absolute;
	top: 4px;
	right: 0;
}
.orders span.items {
	color: #666;
	margin: 8px 0 10px 0;
	display: block;
	clear: left;
}
.orders span.items p {
	font-size: .9em;
	padding: 0 0 5px 0;
	margin: 0;
}
.orders span.items p.shipped {
	color: #ccc;
}
.orders span.items p i {
	color: #ccc;
	font-style: normal;
}
.orders span.items p b {
	font-weight: normal;
	color: #ff6c00;
}
.orders span.ship {
	display: block;
	padding: 8px 0 0 0;
}
.orders span.address {
	color: #ccc;
	margin: 5px 0 10px 0;
	display: block;
	clear: left;
}
.orders i.on {
	color: #ff6c00;
}
.orders i.off {
	color: #ccc;
}
.orders div.status {
	position: absolute;
	bottom: 10px;
	right: 16px;
}
.orders div.comments {
	position: absolute;
	top: 10px;
	right: 16px;
	color: #ccc;
}
.orders div.comments i {
	font-size: 1em;
}
.add-more-item {
	background: #f0f0f0;
	padding: 16px 0 16px 0;
	border-radius: 8px;
	width: 100%;
	cursor: pointer;
	margin: 4px 0 0 0;
	color: #fff;
	text-align: center;
}
.add-more-item p {
	width: 24px;
	height: 24px;
	border-radius: 12px;
	background: #ff6c00;
	margin: 0 auto 0 auto;
}

#form-add-customer {
	background: #fff;
	padding: 8px;
	box-sizing: border-box;
}
#form-add-customer input,
#form-add-customer textarea {
	width: 100%;
	margin: 0 0 8px 0;
}

.comment {
	clear: both;
	width: 100%;
	margin: 0 0 20px 0;
	display: block;
}
.comment .owner {
	padding: 5px 0 5px 0;
	text-align: right;
}
.comment .user {
	color: #999;
}
.comment .text {
	background: #eee;
	border-radius: 2px 16px 16px 16px;
	padding: 8px 16px 8px 8px;
	float: left;
}
.comment .owner .text {
	background: #ff6c00;
	border-radius: 16px 2px 16px 16px;
	color: #fff;
	float: right;
	padding: 8px 8px 8px 16px;
}
ul.summary {
	background: #f9f9f9;
	border: 1px solid #eaeaea;
	border-bottom: 0;
	display: inline-block;
	padding: 0;
	margin: 0;
}
ul.summary_total {
	background: #fff;
	border-bottom: 1px solid #eaeaea;
}
ul.summary input {
	width: auto;
}
ul.summary li {
	float: left;
	width: 50% !important;
	min-height: 30px;
	clear: right !important;
	padding: 10px !important;
}
ul.summary li:first-child {
	width: 15% !important;
}
ul.summary li.total,
ul.prepare li.total {
	font-size: 1.2em;
	color: #ff6c00;
	float: right;
	text-align: right;
	width: 50% !important;
	white-space: nowrap;
}
ul.prepare {
	border: 0;
}
ul.prepare li {
	min-height: 30px;

}
/* ------------------------------------------------------- */
/* Popup & Specification Chips */
/* ------------------------------------------------------- */
.popup {
	display: none;
	position: fixed;
	width: 90%;
	max-width: 440px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	padding: 24px 22px;
	border: 0;
	border-radius: 16px;
	z-index: 10000;
	box-shadow: 0 10px 40px rgba(0,0,0,0.22);
	box-sizing: border-box;
}
@media screen and (max-width: 640px) {
	.popup {
		width: calc(100% - 32px) !important;
		max-width: 420px;
		padding: 20px 18px !important;
	}
}
.popup select,
.popup input {
	width: 100%;
	margin: 4px 0 4px 0;
}
.popup .close {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	text-align: center;
	background: #f3f4f6;
	border: 0;
	position: absolute;
	top: 18px;
	right: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	transition: all 0.15s ease;
}
.popup .close:hover {
	background: #e5e7eb;
	color: #111;
	transform: rotate(90deg);
}
.popup #add-to-cart {
	width: 100%;
	background: #ff6c00;
	color: #fff;
	text-align: center;
	border: 0;
	border-radius: 10px;
	padding: 14px 20px;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: all 0.2s ease;
	box-shadow: 0 4px 14px rgba(255, 108, 0, 0.35);
}
.popup #add-to-cart:hover {
	background: #e65c00;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(255, 108, 0, 0.45);
}
/* ------------------------------------------------ */
/* FOOTER */
/* ------------------------------------------------ */
footer {
	background: #0e0503;
	color: #fff;
	width: 100%;
	padding: 16px 0 0 0;
	margin: 48px 0 0 0;
}
footer a {
	color: #fff;
}
footer div.footer_links {
	width: 1280px;
	margin: 0 auto 0 auto;
}
@media screen and (max-width: 1280px) {
	footer div.footer_links {
		width: 100%;
	}
}
footer div.footer_links ul {
	font-size: .9em;
	vertical-align: top;
	list-style: none;
	margin: 16px 0 0 0;
	padding: 0;
	display: inline-block;
	width: 24%;
}
footer div.footer_links ul li {
	padding: 8px 0 0 0;
	color: #fff;
}
footer div.footer_links ul li.category {
	font-weight: bold;
}
@media screen and (max-width: 640px) {
	footer div.footer_links ul {
		width: 49%;
	}
	footer div.footer_links ul li {
		padding: 8px 24px 0 24px;
	}
}
footer div.footer_information {
	width: 1280px;
	margin: 0 auto 0 auto;
}
@media screen and (max-width: 1280px) {
	footer div.footer_information {
		width: 100%;
	}
}
/* ------------------------------------------------ */
/* COPYRIGHT */
/* ------------------------------------------------ */
.copyright {
	width: calc(100% - 48px);
	line-height: 120%;
	margin: 50px auto 0 auto;
	padding: 24px;
	overflow: hidden;
	font-size: .9em;
	color: #fff;
	text-align: center;
	clear: both;
}


/* ------------------------------------------------ */
/* HEADER CORNER AUTH (GOOGLE LOGIN & DIMMED FB & USER PILL) */
/* ------------------------------------------------ */
.header-corner-auth {
	position: absolute;
	top: 16px;
	right: 24px;
	z-index: 1001;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Nút Google Login (Chính thức, phong cách hiện đại) */
.header-corner-auth .btn-google-login {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #ffffff;
	color: #374151 !important;
	font-weight: 600;
	font-size: 13px;
	padding: 6px 14px;
	border-radius: 20px;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	border: 1px solid #d1d5db;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	line-height: 1.2;
}
.header-corner-auth .btn-google-login:hover {
	background: #f9fafb;
	color: #111827 !important;
	border-color: #9ca3af;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transform: translateY(-1px);
}
.header-corner-auth .btn-google-login .google-icon {
	flex-shrink: 0;
}

/* Nút Facebook Login (Tạm ẩn mờ, có nhãn Đang duyệt) */
.header-corner-auth .btn-fb-login {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #1877F2;
	color: #fff !important;
	font-weight: 600;
	font-size: 12px;
	padding: 6px 12px;
	border-radius: 20px;
	text-decoration: none;
	box-shadow: 0 1px 4px rgba(24, 119, 242, 0.2);
	transition: all 0.2s ease;
	line-height: 1.2;
}
.header-corner-auth .btn-fb-dimmed {
	opacity: 0.55;
	filter: grayscale(30%);
	cursor: not-allowed;
	border: 1px dashed rgba(255, 255, 255, 0.4);
}
.header-corner-auth .btn-fb-dimmed:hover {
	opacity: 0.75;
	filter: none;
}
.header-corner-auth .fb-pending-badge {
	font-size: 10px;
	background: rgba(255, 255, 255, 0.25);
	padding: 1px 5px;
	border-radius: 8px;
	font-weight: 500;
	color: #fff;
}

/* Pill người dùng đã đăng nhập */
.header-corner-auth .user-corner-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 24px;
	padding: 3px 6px 3px 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	font-size: 13px;
}
.header-corner-auth .user-corner-pill .user-info {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #1f2937;
	font-weight: 500;
}
.header-corner-auth .user-corner-pill .user-avatar-img {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	border: 1.5px solid #ff6c00;
	flex-shrink: 0;
}
.header-corner-auth .user-corner-pill .user-icon {
	color: #ff6c00;
	flex-shrink: 0;
}
.header-corner-auth .user-corner-pill .user-name {
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.header-corner-auth .user-corner-pill .btn-logout {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: #6b7280 !important;
	text-decoration: none;
	padding: 4px 10px;
	border-radius: 14px;
	font-size: 12px;
	transition: all 0.2s ease;
	background: #f3f4f6;
}
.header-corner-auth .user-corner-pill .btn-logout:hover {
	background: #fee2e2;
	color: #dc2626 !important;
}

@media screen and (min-width: 981px) {
	body.menu-is-fixed .header-corner-auth {
		position: fixed;
		top: 8px;
		right: 24px;
	}
}

@media screen and (max-width: 640px) {
	.header-corner-auth {
		top: 14px;
		right: 10px;
		gap: 6px;
	}
	.header-corner-auth .btn-google-login {
		padding: 5px 10px;
		font-size: 12px;
		gap: 5px;
	}
	.header-corner-auth .btn-fb-login {
		padding: 5px 8px;
		font-size: 11px;
	}
	.header-corner-auth .btn-fb-login .fb-text {
		display: none;
	}
	.header-corner-auth .user-corner-pill {
		padding: 2px 4px 2px 8px;
		font-size: 12px;
	}
	.header-corner-auth .user-corner-pill .user-name {
		max-width: 70px;
	}
	.header-corner-auth .user-corner-pill .logout-label {
		display: none;
	}
}

/* ------------------------------------------------------- */
/* FEATURED PRODUCTS SECTION (HOMEPAGE) */
/* ------------------------------------------------------- */
section.featured-products {
	max-width: 1280px;
	margin: 48px auto 64px auto;
	padding: 0 16px;
	box-sizing: border-box;
}
section.featured-products .section-header {
	text-align: center;
	margin-bottom: 36px;
}
section.featured-products .section-eyebrow {
	display: block;
	width: 100%;
	text-align: center;
	color: #ff6c00;
	font-size: 0.85em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 8px;
}
section.featured-products .section-title {
	font-family: 'Yeseva One', serif;
	font-size: 2.2em;
	color: #252525;
	margin: 0 0 12px 0;
	line-height: 1.25;
}
section.featured-products .section-subtitle {
	max-width: 680px;
	margin: 0 auto;
	font-size: 1.05em;
	color: #666;
	line-height: 1.6;
}
section.featured-products .product-list {
	width: 100%;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}
section.featured-products .product {
	width: calc(33.333% - 16px);
	max-width: 380px;
	margin: 0;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
	border: 1px solid #f0f0f0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
section.featured-products .product:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
section.featured-products .product .image {
	position: relative;
	width: 100%;
	padding-top: 75%;
	overflow: hidden;
	background: #f7f7f7;
	cursor: pointer;
}
section.featured-products .product .image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 18px 18px 0 0;
	transition: transform 0.3s ease;
}
section.featured-products .product:hover .image img {
	transform: scale(1.04);
}
section.featured-products .product-body {
	padding: 16px 18px 20px 18px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
section.featured-products .product h3 {
	font-size: 1.15em;
	font-weight: 700;
	color: #252525;
	margin: 0 0 10px 0;
	padding: 0;
	width: 100%;
	line-height: 1.35;
}
section.featured-products .product h3 a {
	color: #252525;
	text-decoration: none;
	transition: color 0.2s ease;
}
section.featured-products .product h3 a:hover {
	color: #ff6c00;
}
section.featured-products .product ul.price-list {
	list-style: none;
	padding: 0;
	margin: 0 0 16px 0;
	flex-grow: 1;
}
section.featured-products .product ul.price-list li {
	font-size: 0.92em;
	color: #4b5563;
	padding: 6px 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: left;
	border-bottom: 1px dashed #f1f1f1;
}
section.featured-products .product ul.price-list li > span:first-child {
	text-align: left;
	padding-left: 0;
	margin-left: 0;
}
section.featured-products .product ul.price-list li:last-child {
	border-bottom: none;
}
section.featured-products .product .price-amount {
	font-weight: 700;
	color: #ff6c00;
	font-size: 1.05em;
}
section.featured-products .product-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid #f5f5f5;
}
section.featured-products .select-btn {
	flex-grow: 1;
	background: #ff6c00;
	color: #fff;
	font-weight: 600;
	font-size: 0.95em;
	padding: 10px 16px;
	border-radius: 24px;
	border: none;
	cursor: pointer;
	text-align: center;
	box-shadow: 0 2px 8px rgba(255, 108, 0, 0.25);
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
}
section.featured-products .select-btn:hover {
	background: #e65c00;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(255, 108, 0, 0.35);
}
section.featured-products .detail-link {
	color: #4b5563;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #f3f4f6;
	transition: all 0.2s ease;
}
section.featured-products .detail-link:hover {
	background: #252525;
	color: #fff;
}
section.featured-products .badge-signature {
	position: absolute;
	top: 12px;
	left: 12px;
	background: linear-gradient(135deg, #ff6c00, #ff8a3d);
	color: #fff;
	font-size: 0.72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 4px 10px;
	border-radius: 20px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	z-index: 2;
}

@media screen and (max-width: 980px) {
	section.featured-products .product {
		width: calc(50% - 12px);
	}
}
@media screen and (max-width: 640px) {
	section.featured-products {
		margin: 32px auto 48px auto;
		padding: 0 12px;
	}
	section.featured-products .section-title {
		font-size: 1.6em;
	}
	section.featured-products .section-subtitle {
		font-size: 0.95em;
	}
	section.featured-products .product-list {
		gap: 12px;
	}
	section.featured-products .product {
		width: calc(50% - 6px);
		border-radius: 14px;
	}
	section.featured-products .product-body {
		padding: 12px 10px 14px 10px;
	}
	section.featured-products .product h3 {
		font-size: 0.95em;
		margin-bottom: 6px;
	}
	section.featured-products .product ul.price-list li {
		font-size: 0.82em;
		flex-direction: column;
		align-items: flex-start;
		padding: 2px 0;
	}
	section.featured-products .select-btn {
		font-size: 0.85em;
		padding: 8px 10px;
	}
	section.featured-products .detail-link {
		width: 32px;
		height: 32px;
	}
}

section.featured-products .view-all-wrap {
	text-align: center;
	margin-top: 40px;
}
section.featured-products .btn-view-all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 28px;
	background: #252525;
	color: #fff;
	font-weight: 600;
	font-size: 1em;
	border-radius: 30px;
	text-decoration: none;
	transition: all 0.25s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
section.featured-products .btn-view-all:hover {
	background: #ff6c00;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(255, 108, 0, 0.3);
}

/* ------------------------------------------------------- */
/* POPUP MODAL OVERLAY & MOBILE RESPONSIVENESS */
/* ------------------------------------------------------- */
.popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9998;
	backdrop-filter: blur(2px);
}
.popup-price-wrap {
	font-size: 1.1em;
	margin: 12px 0;
}
.popup-price-wrap strong {
	color: #ff6c00;
	font-size: 1.25em;
}
@media screen and (max-width: 640px) {
	.popup {
		width: calc(100% - 32px) !important;
		max-width: 420px;
		top: 15% !important;
		padding: 16px 20px 20px 20px !important;
	}
}

/* ------------------------------------------------------- */
/* STOCK BADGES & INVENTORY ALERTS (ĐỒNG NHẤT VỚI ADMIN)   */
/* ------------------------------------------------------- */
.badge-stock {
	position: absolute;
	top: 12px;
	right: 12px;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 20px;
	z-index: 5;
	letter-spacing: 0.2px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.badge-in-stock {
	background: #ecfdf5;
	color: #059669;
	border: 1px solid #a7f3d0;
}
.badge-preorder {
	background: #fff7ed;
	color: #c2410c;
	border: 1px solid #fed7aa;
}

/* ------------------------------------------------------- */
/* PRODUCT DETAIL PAGE (CHUYÊN NGHIỆP, CHUẨN SEO)         */
/* ------------------------------------------------------- */
.product-detail-wrapper {
	max-width: 1120px;
	margin: 20px auto 60px auto;
	padding: 0 16px;
	font-family: 'Be Vietnam Pro', sans-serif;
	color: #1f2937;
}

/* Breadcrumb */
.pd-breadcrumbs {
	margin-bottom: 24px;
	font-size: 13px;
}
.pd-breadcrumbs ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.pd-breadcrumbs li a {
	color: #6b7280;
	text-decoration: none;
	transition: color 0.15s;
}
.pd-breadcrumbs li a:hover {
	color: #ff6c00;
}
.pd-breadcrumbs .sep {
	color: #d1d5db;
}
.pd-breadcrumbs li.active {
	color: #111827;
	font-weight: 600;
}

/* Main Product Card */
.pd-main-card {
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05);
	padding: 32px;
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 40px;
	margin-bottom: 40px;
	border: 1px solid #f3f4f6;
}

/* Gallery Column */
.pd-gallery-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.pd-main-img-box {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: #fafafa;
	border: 1px solid #f0f0f0;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pd-main-img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.pd-main-img-box:hover img {
	transform: scale(1.03);
}
.pd-signature-tag {
	position: absolute;
	top: 16px;
	left: 16px;
	background: linear-gradient(135deg, #ff6c00, #ff8a00);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 20px;
	box-shadow: 0 2px 8px rgba(255, 108, 0, 0.35);
}

.pd-thumbnails {
	display: flex;
	gap: 10px;
	overflow-x: auto;
}
.pd-thumb-btn {
	width: 72px;
	height: 72px;
	border-radius: 10px;
	border: 2px solid #e5e7eb;
	background: #fff;
	padding: 2px;
	cursor: pointer;
	overflow: hidden;
	transition: all 0.15s;
}
.pd-thumb-btn.active, .pd-thumb-btn:hover {
	border-color: #ff6c00;
	box-shadow: 0 2px 8px rgba(255, 108, 0, 0.25);
}
.pd-thumb-btn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
}

.pd-trust-pill-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 6px;
}
.pd-trust-pill {
	background: #f9fafb;
	border: 1px solid #f3f4f6;
	border-radius: 10px;
	padding: 8px;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	color: #4b5563;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}
.pd-trust-pill .icon {
	font-size: 20px;
	color: #ff6c00;
}

/* Info Column */
.pd-info-col {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.pd-title {
	font-size: 28px;
	font-weight: 800;
	color: #111827;
	margin: 0;
	line-height: 1.3;
}
.pd-rating-sku-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 14px;
	border-bottom: 1px solid #f0f0f0;
}
.pd-rating-stars {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
}
.pd-rating-stars .stars {
	color: #f59e0b;
	letter-spacing: 1px;
}
.pd-rating-stars .rating-num {
	font-weight: 700;
	color: #111827;
}
.pd-rating-stars .review-count {
	color: #6b7280;
}
.pd-sku-tag {
	font-size: 12px;
	color: #6b7280;
}

/* Stock Notice Banner */
.pd-stock-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.5;
}
.pd-stock-notice .stock-icon {
	font-size: 22px;
	flex-shrink: 0;
	margin-top: 1px;
}
.pd-stock-notice.badge-in-stock {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: #166534;
}
.pd-stock-notice.badge-in-stock .stock-icon {
	color: #16a34a;
}
.pd-stock-notice.badge-preorder {
	background: #fff7ed;
	border: 1px solid #fed7aa;
	color: #9a3412;
}
.pd-stock-notice.badge-preorder .stock-icon {
	color: #ea580c;
}
.pd-stock-notice .stock-desc strong {
	display: block;
	margin-bottom: 2px;
}
.pd-stock-notice .stock-desc p {
	margin: 0;
	opacity: 0.9;
}

/* Price Box */
.pd-price-box {
	background: #fffaf5;
	border: 1.5px dashed #fed7aa;
	border-radius: 14px;
	padding: 14px 20px;
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}
.pd-price-box .price-prefix {
	font-size: 14px;
	font-weight: 600;
	color: #78350f;
}
.pd-price-box .pd-price-amount {
	font-size: 28px;
	font-weight: 900;
	color: #ff6c00;
}
.pd-price-box .pd-price-range {
	font-size: 13px;
	color: #9ca3af;
}

/* Spec Chips Selection */
.pd-spec-selection {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.pd-spec-selection .spec-label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	font-weight: 700;
	color: #374151;
}
.pd-spec-selection .spec-hint {
	color: #ff6c00;
	font-weight: 600;
}
.pd-spec-chips-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px;
}
.pd-spec-chip {
	border: 1.5px solid #e5e7eb;
	background: #ffffff;
	border-radius: 12px;
	padding: 10px 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: all 0.18s ease;
	user-select: none;
}
.pd-spec-chip:hover {
	border-color: #ff6c00;
	background: #fffaf5;
}
.pd-spec-chip.active {
	border-color: #ff6c00;
	background: #fff7ed;
	box-shadow: 0 0 0 1px #ff6c00;
}
.pd-spec-chip .chip-main {
	display: flex;
	flex-direction: column;
}
.pd-spec-chip .chip-name {
	font-size: 13px;
	font-weight: 700;
	color: #1f2937;
}
.pd-spec-chip .chip-price {
	font-size: 13px;
	color: #ff6c00;
	font-weight: 600;
	margin-top: 2px;
}
.pd-spec-chip .chip-icon {
	font-size: 18px;
	color: #d1d5db;
	transition: color 0.15s;
}
.pd-spec-chip.active .chip-icon {
	color: #ff6c00;
}

/* Stepper Quantity */
.pd-qty-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.pd-qty-row .qty-title {
	font-size: 14px;
	font-weight: 700;
	color: #374151;
}
.pd-qty-stepper {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid #d1d5db;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}
.pd-qty-stepper .btn-stepper {
	background: #f9fafb;
	border: 0;
	padding: 8px 16px;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	color: #4b5563;
	transition: background 0.15s;
	user-select: none;
}
.pd-qty-stepper .btn-stepper:hover {
	background: #f3f4f6;
	color: #111;
}
.pd-qty-stepper input {
	width: 48px;
	border: 0;
	text-align: center;
	font-weight: 700;
	font-size: 15px;
	outline: none;
	-moz-appearance: textfield;
}
.pd-qty-stepper input::-webkit-outer-spin-button,
.pd-qty-stepper input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.pd-qty-row .qty-unit-label {
	font-size: 14px;
	color: #6b7280;
}

/* Action CTA Buttons */
.pd-cta-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 8px;
}
.btn-add-cart-detail, .btn-buy-now-detail {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 20px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s;
	border: 0;
	font-family: inherit;
}
.btn-add-cart-detail {
	background: #fffaf5;
	border: 2px solid #ff6c00;
	color: #ff6c00;
}
.btn-add-cart-detail:hover {
	background: #ffedd5;
	transform: translateY(-1px);
}
.btn-buy-now-detail {
	background: #ff6c00;
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(255, 108, 0, 0.35);
}
.btn-buy-now-detail:hover {
	background: #e65c00;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(255, 108, 0, 0.45);
}

/* Policy Perks */
.pd-policy-perks {
	border-top: 1px solid #f0f0f0;
	padding-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 12px;
	color: #4b5563;
}
.pd-policy-perks .perk-item {
	display: flex;
	align-items: center;
	gap: 8px;
}
.pd-policy-perks .perk-icon {
	font-size: 18px;
	color: #059669;
	flex-shrink: 0;
}

/* Content Tabs Section */
.pd-content-tabs-section {
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05);
	padding: 32px;
	border: 1px solid #f3f4f6;
}
.pd-tabs-nav {
	display: flex;
	gap: 8px;
	border-bottom: 2px solid #f3f4f6;
	padding-bottom: 8px;
	overflow-x: auto;
}
.pd-tab-btn {
	background: none;
	border: 0;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 700;
	color: #6b7280;
	border-radius: 10px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.15s;
	white-space: nowrap;
	font-family: inherit;
}
.pd-tab-btn:hover {
	color: #ff6c00;
	background: #fffaf5;
}
.pd-tab-btn.active {
	color: #ff6c00;
	background: #fff7ed;
}

.pd-tab-panels {
	padding-top: 24px;
}
.pd-tab-panel {
	display: none;
}
.pd-tab-panel.active {
	display: block;
	animation: tabFadeIn 0.2s ease;
}
@keyframes tabFadeIn {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

.pd-editorial-content {
	line-height: 1.75;
	font-size: 15px;
	color: #374151;
}
.pd-editorial-content h2 {
	font-size: 20px;
	font-weight: 800;
	color: #111827;
	margin-top: 0;
	margin-bottom: 14px;
}
.pd-editorial-content h3 {
	font-size: 17px;
	font-weight: 700;
	color: #111827;
	margin-top: 24px;
	margin-bottom: 10px;
}
.pd-editorial-content p {
	margin-bottom: 14px;
}
.pd-highlight-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 24px;
}
.pd-highlight-grid .highlight-card {
	background: #f9fafb;
	border: 1px solid #f3f4f6;
	border-radius: 14px;
	padding: 20px;
}
.pd-highlight-grid .hl-icon {
	font-size: 28px;
	color: #ff6c00;
	margin-bottom: 10px;
}
.pd-highlight-grid h4 {
	font-size: 15px;
	font-weight: 700;
	color: #111827;
	margin: 0 0 6px 0;
}
.pd-highlight-grid p {
	font-size: 13px;
	color: #6b7280;
	margin: 0;
	line-height: 1.5;
}

.pd-guide-steps {
	padding-left: 20px;
	margin-bottom: 20px;
}
.pd-guide-steps li {
	margin-bottom: 14px;
}
.pd-guide-steps li p {
	margin: 4px 0 0 0;
	color: #555;
}
.pd-tip-box {
	background: #fffaf5;
	border: 1.5px solid #fed7aa;
	border-radius: 12px;
	padding: 16px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 20px 0;
	color: #9a3412;
	font-size: 14px;
	line-height: 1.6;
}
.pd-tip-box .tip-icon {
	color: #ea580c;
	font-size: 24px;
	flex-shrink: 0;
}
.pd-storage-list {
	padding-left: 20px;
	margin-bottom: 14px;
}
.pd-storage-list li {
	margin-bottom: 8px;
}

/* Reviews Breakdown */
.pd-reviews-container {
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.pd-reviews-header {
	display: grid;
	grid-template-columns: 200px 1fr 200px;
	gap: 24px;
	align-items: center;
	background: #fafafa;
	border-radius: 16px;
	padding: 24px;
	border: 1px solid #f0f0f0;
}
.review-score-box {
	text-align: center;
}
.review-score-box .score-large {
	font-size: 44px;
	font-weight: 900;
	color: #ff6c00;
	line-height: 1;
}
.review-score-box .score-stars {
	color: #f59e0b;
	font-size: 18px;
	margin: 6px 0 4px 0;
}
.review-score-box .score-meta {
	font-size: 12px;
	color: #6b7280;
}

.review-breakdown {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.breakdown-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: #6b7280;
}
.breakdown-row .progress-bar {
	flex: 1;
	height: 8px;
	background: #e5e7eb;
	border-radius: 10px;
	overflow: hidden;
}
.breakdown-row .progress-bar .fill {
	height: 100%;
	background: #ff6c00;
	border-radius: 10px;
}

.btn-write-review {
	width: 100%;
	background: #ffffff;
	border: 1.5px solid #d1d5db;
	color: #374151;
	padding: 12px 16px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: all 0.15s;
	font-family: inherit;
}
.btn-write-review:hover {
	border-color: #ff6c00;
	color: #ff6c00;
	background: #fffaf5;
}

.pd-review-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.review-item {
	border-bottom: 1px solid #f0f0f0;
	padding-bottom: 20px;
}
.review-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.review-user-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}
.user-avatar-placeholder {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #ff6c00;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
}
.review-user-row .user-name {
	font-size: 14px;
	color: #111827;
	display: block;
}
.verified-buyer {
	font-size: 11px;
	color: #059669;
	display: inline-flex;
	align-items: center;
	gap: 2px;
}
.verified-buyer .material-symbols-outlined {
	font-size: 14px;
}
.review-date {
	margin-left: auto;
	font-size: 12px;
	color: #9ca3af;
}
.review-stars {
	color: #f59e0b;
	font-size: 13px;
	margin-bottom: 8px;
}
.review-spec-tag {
	font-size: 11px;
	color: #6b7280;
	background: #f3f4f6;
	padding: 2px 8px;
	border-radius: 12px;
	margin-left: 6px;
}
.review-comment {
	font-size: 14px;
	color: #4b5563;
	line-height: 1.6;
	margin: 0;
}

/* Responsive Product Detail */
@media screen and (max-width: 900px) {
	.pd-main-card {
		grid-template-columns: 1fr;
		padding: 24px 20px;
		gap: 28px;
	}
	.pd-reviews-header {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.pd-highlight-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

@media screen and (max-width: 640px) {
	.product-detail-wrapper {
		margin-top: 10px;
		padding: 0 12px;
	}
	.pd-main-card {
		padding: 16px;
		border-radius: 16px;
	}
	.pd-title {
		font-size: 22px;
	}
	.pd-price-box .pd-price-amount {
		font-size: 24px;
	}
	.pd-cta-actions {
		grid-template-columns: 1fr;
	}
	.pd-trust-pill-row {
		grid-template-columns: 1fr;
	}
	.pd-content-tabs-section {
		padding: 20px 16px;
		border-radius: 16px;
	}
}