@charset "UTF-8";

/* @font-face {
	font-family: 'sans-serif';
	src: url('../fonts/Montserrat/Montserrat-Regular.ttf');
	font-display: swap;
}

@font-face {
	font-family: 'sans-serif';
	src: url('../fonts/Montserrat/Montserrat-Medium.ttf');
	font-display: swap;
}

@font-face {
	font-family: 'sans-serif';
	src: url('../fonts/Montserrat/Montserrat-Bold.ttf');
	font-display: swap;
} */

/* Main */
:root {
	--color-red: #ec2d3f;
	--color-medium-red: #cc2c32;
	--color-dark-red: #c31829;
	--color-green: #28a745;
	--color-dark-green: #207d36;
	--color-black: #212529;
	--color-gray: #6c757d;
	--font-title: 'Plus Jakarta Sans', 'sans-serif', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-menu:
		'Inter', 'sans-serif', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--max-width: 1220px;
	--font-body:
		'Inter', 'sans-serif', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-title-card: 'Plus Jakarta Sans', 'sans-serif', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--color-title: #004d99;
	--color-bg-hover: #17324b;
	--color-hover-text: #1565c0;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
	font-weight: 600;
}
body {
	font-size: 16px;
	font-family: var(--font-body);
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: top
}

a,
input,
textarea {
	outline: none;
	padding: 0px;
}

a,
a:hover {
	color: unset;
	text-decoration: none;
}

p,
h3 {
	margin-bottom: 0;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.w-clear:after {
	display: block;
	content: "";
	clear: both;
}

.hidden {
	display: none;
}

.clear {
	clear: both;
}

.none {
	display: none;
}

.hidden-seoh {
	visibility: hidden;
	height: 0px;
	margin: 0px;
	overflow: hidden;
}

b,
strong {
	font-family: var(--font-title);
}

.wrap-main,
.wrap-content {
	max-width: var(--max-width);
	margin: 0px auto;
	padding: 0px 10px;
}

.wrap-home {
	max-width: 100%;
	padding: 0px;
}

.wrap-content {
	margin: auto;
}

.wap-all-page {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.wap-top {
	width: 100%;
}

.wap-hearder {
	width: 100%;
	/* background-color: #fff; */
}

.wap-menu {
	/* Was its own position:sticky;top:0 nested inside #siteHeader,
	   which is ALSO position:sticky;top:0. Two overlapping sticky
	   contexts recalculating independently right at the exact scroll
	   position where the outer header finishes sticking is what was
	   producing the flicker reported "right as scroll passes the
	   header" — not a JS timing issue at all (three scroll-event-timing
	   fixes couldn't touch it because the conflict is structural). The
	   outer #siteHeader being sticky already pins this as part of it;
	   it doesn't need its own independent stickiness. */
	background-color: #dbdbdb;
	width: 100%;
	z-index: 100;
}

.wap-slider {
	width: 100%;
}

.wap-main {
	width: 100%;
}

.wap-footer {
	width: 100%;
}

.block-page {
	width: 100%;
	max-width: var(--max-width);
	margin: 0px auto;
	padding: 30px 10px;
}

/* share */
.share {
	padding: 10px;
	line-height: normal;
	margin-top: 15px;
	border-top: 1px solid #ededed;
}

.share b {
	display: block;
	margin-bottom: 5px;
}

/* owl control */
.control-owl {
	position: absolute;
	width: 100%;
	z-index: 2;
	left: 0px;
	top: calc(50% - 45px/2);
}

.control-owl button {
	opacity: 0.5;
	top: 0px;
	position: absolute;
	outline: none;
	border: 0px;
	padding: 0px;
	margin: 0px;
	display: block;
	cursor: pointer;
	color: #ffffff;
	width: 45px;
	height: 45px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 25px;
	margin: 0px;
	background-color: #000000;
	border-radius: 3px;
	-webkit-transition: 0.3s ease-out;
	-moz-transition: 0.3s ease-out;
	-o-transition: 0.3s ease-out;
	transition: 0.3s ease-out;
}

.control-owl button:hover {
	opacity: 1;
}

.control-owl button.owl-prev {
	left: 20px;
}

.control-owl button.owl-next {
	right: 20px;
}

/* bootstrap custom */
.form-control,
.form-control-plaintext:not(textarea),
.custom-select {
	height: calc(1em + 1.25rem + 8px);
	background: transparent;
	padding: 10px;
	padding-left: 20px;
	color: #495057;
}

.text-sm {
	font-size: .875rem !important;
}

/* news detail */
.time-main {
	margin-bottom: 20px;
	margin: 10px 0;
	color: #333333ad;
	font-size: 14px;
}

/* Lazyload */
img.lazy {
	opacity: 0;
}

img:not(.initial) {
	transition: opacity 1s;
}

img.initial,
img.loaded,
img.error {
	opacity: 1;
}

img:not([src]) {
	visibility: hidden;
}

.top {
	background-color: #fff;
}

/* hover_sang2 */
.hover_sang2:before {
	position: absolute;
	top: 0;
	left: -85%;
	z-index: 10;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
	z-index: 1;
}

.hover_sang2 {
	position: relative;
	overflow: hidden;
}

.hover_sang2:hover:before {
	transition: 1s;
	left: 100%;
}

/* HEADER */
.header {
	width: 100%;
}

.top {
	background-color: #dbdbdb;
	color: #000;
}

.top .wrap-content {
	display: flex;
	padding: 5px 10px;
	justify-content: space-between;
	align-items: center;
}

.header-bottom {
	display: flex;
	padding: 10px;
	max-width: var(--max-width);
	margin: 0 auto;
	align-items: center;
	justify-content: space-between;
}

.logo-header {
	position: relative;
	justify-content: center;
	display: flex;
	align-items: center;
}

.header-search {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 30px;
	background: #ccc;
	overflow: hidden;
	max-width: 274px;
	width: calc(100% - 800px);
}

.header-search input {
	background: none;
	border: none;
	outline: none;
	height: 40px;
	text-indent: 10px;
	color: var(--color-title);
	width: calc(100% - 45px);
}

.header-search p {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	background: var(--color-title);
	cursor: pointer;
	transition: all .2s;
}

.header-search p:hover {
	transition: all .2s;
	background-color: var(--color-bg-hover);
}

.header-holine {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.header-holine .content {
	padding-left: 10px;
}

.header-holine .content h3 {
	font-size: 16px;
	font-family: 'Arial';
	color: red;
}

.header-holine .content p {
	text-align: left;
}

/* animation color linear text */
.bm-animate-text-1 {
	text-transform: uppercase;
	background: linear-gradient(to right, #0c7714 0%, #00bf0c 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: rainbow-animation 200s linear infinite;
}

@keyframes rainbow-animation {
	100% {
		background-position: 4500vh;
	}
}

/* MENU */
.menu {
	transition: all 0.6s;
	box-shadow: 0px 1px 2px #0000003d;
	font-family: var(--font-menu);
}

.menu ul {
	list-style: none
}

.menu.sticky {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 9000;
}

.menu .item-big {
	text-align: center;
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	padding-inline-start: 0;
	width: 100%;
	margin: 0 auto;
}

.menu .item-big .nav-item {
	display: inline-block;
	position: relative;
	font-size: 0;
	transition: all 0.4s;
}

.menu .item-big .nav-item.active>a,
.menu .item-big .nav-item:hover>a {
	transition: all 0.4s;
	color: var(--color-title);
}

.menu .item-big .nav-item>a {
	padding: 10px;
	display: inline-block;
	text-align: center;
	font-size: 16px;
	text-decoration: none;
	color: #333;
	position: relative;
	text-transform: uppercase;
}

.menu .item-big .nav-item>.item_small {
	overflow: hidden;
	display: block;
	max-height: 0px;
	max-width: 0px;
	opacity: 0;
	-webkit-transform: perspective(600px) rotateX(-90deg);
	-moz-transform: perspective(600px) rotateX(-90deg);
	-ms-transform: perspective(600px) rotateX(-90deg);
	-o-transform: perspective(600px) rotateX(-90deg);
	transform: perspective(600px) rotateX(-90deg);
	-webkit-transition: -webkit-transform 0.25s ease, opacity 0.3s ease, max-height 0.3s step-end, max-width 0.3s step-end, padding 0.3s step-end;
	-o-transition: -o-transform 0.25s ease, opacity 0.3s ease, max-height 0.3s step-end, max-width 0.3s step-end, padding 0.3s step-end;
	transition: transform 0.25s ease, opacity 0.3s ease, max-height 0.3s step-end, max-width 0.3s step-end, padding 0.3s step-end;
	position: absolute;
	top: 100%;
	left: 0px;
	width: 250px;
	padding: 0;
	background-color: #fff;
	-webkit-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-o-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
	z-index: 999;
	box-shadow: 0px 10px 21.6px 2.4px rgba(0, 0, 0, 0.06);
	border-radius: 4px;
}

.menu .item-big .nav-item:hover>ul {
	overflow: visible;
	max-height: 3000px;
	max-width: 3000px;
	min-width: 250px;
	opacity: 1;
	-webkit-transform: perspective(600px) rotateX(0deg);
	-moz-transform: perspective(600px) rotateX(0deg);
	-ms-transform: perspective(600px) rotateX(0deg);
	-o-transform: perspective(600px) rotateX(0deg);
	transform: perspective(600px) rotateX(0deg);
	-webkit-transition: -webkit-transform 0.25s ease, opacity 0.2s ease, max-height 0s step-end, max-width 0s step-end, padding 0s step-end;
	-o-transition: -o-transform 0.25s ease, opacity 0.2s ease, max-height 0s step-end, max-width 0s step-end, padding 0s step-end;
	transition: transform 0.25s ease, opacity 0.2s ease, max-height 0s step-end, max-width 0s step-end, padding 0s step-end;
}

.menu .item-big .nav-item ul li:hover>a {
	color: var(--color-title);
}

.menu .item-big .nav-item>ul li a {
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
	display: block;
	padding: 7px 5px 7px 0px;
	position: relative;
	border-bottom: 1px solid #d7d7d73b;
	text-align: left;
	padding-left: 15px;
	text-decoration: none;
}

.menu .item-big .nav-item>ul li:last-child>a {
	border-bottom: 0;
}

.menu .item-big .nav-item>ul li a i {
	position: absolute;
	right: -10px;
	padding: 0px 10px;
	top: 0;
	line-height: 38px;
}

.menu .item-big .nav-item>ul li {
	padding: 0px;
}

.menu .item-big .nav-item li {
	position: relative;
}

.menu .item-big .nav-item>ul li ul {
	visibility: hidden;
	opacity: 0;
	margin-top: 20px;
	left: 100%;
	top: 0px;
	position: absolute;
	width: 250px;
	padding: 0;
	background-color: #fff;
	z-index: 99;
	box-shadow: 0px 10px 21.6px 2.4px rgba(0, 0, 0, 0.06);
	-webkit-box-shadow: 0px 10px 21.6px 2.4px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 10px 21.6px 2.4px rgba(0, 0, 0, 0.06);
	-o-box-shadow: 0px 10px 21.6px 2.4px rgba(0, 0, 0, 0.06);
	-os-box-shadow: 0px 10px 21.6px 2.4px rgba(0, 0, 0, 0.06);
	transition: all 0.3s;
	border-radius: 4px;
}

.menu .item-big .nav-item>ul li:hover>ul {
	visibility: visible;
	opacity: 1;
	margin-top: 0px;
}

/* Search menu */
.menu .search {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.menu .search:hover .icon-search,
.icon-cart-menu:hover {
	transform: scale(1.1);
	transition: transform 0.3s;
}

.menu .search .icon-search,
.icon-cart-menu {
	transition: transform 0.3s;
}

.menu .search p {
	width: 32px;
	height: 32px;
	line-height: 32px;
	cursor: pointer;
	text-align: center;
	margin: 0px;
	font-size: 16px;
	border-radius: 50%;
	transition: background 0.4s;
}

.menu .search input {
	width: calc(100% - 35px);
	height: 38px;
	outline: none;
	padding: 0px;
	border: 0px;
	background: transparent;
	text-indent: 0px;
	font-size: 14px;
	color: #fff;
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
	font-style: italic;
}

.menu .search input::-webkit-input-placeholder {
	color: #fff;
}

.menu .search input:-moz-placeholder {
	color: #fff;
}

.menu .search input::-moz-placeholder {
	color: #fff;
}

.menu .search input:-ms-input-placeholder {
	color: #fff;
}

.menu .search.active {
	visibility: visible;
	opacity: 1;
	transition: all 0.6s;
}

.menu .search-grid {
	position: absolute;
	top: -5px;
	right: calc(100% + 5px);
	width: 0;
	overflow: hidden;
	background: grey;
	z-index: 2;
	opacity: 0;
	color: #fff;
	border-radius: 25px;
	line-height: normal;
	box-shadow: 1px 1px 2px grey;
}

.menu .search-grid p {
	width: 35px;
	height: 38px;
	cursor: pointer;
	outline: none;
	border: none;
	margin: 0px;
	font-size: 14px;
	display: block;
	color: #fff;
	line-height: 40px;
	text-align: center;
}

.menu .search-grid input {
	width: calc(100% - 35px);
	float: right;
	line-height: 38px;
	outline: none;
	border: none;
	color: #fff;
	font-size: 14px;
}

.menu .search-grid input::-webkit-input-placeholder {
	color: #ccc;
	font-size: 14px;
}

.menu .search-grid input:-moz-placeholder {
	color: #ccc;
	font-size: 14px;
}

.menu .search-grid input::-moz-placeholder {
	color: #ccc;
	font-size: 14px;
}

.menu .search-grid input:-ms-input-placeholder {
	color: #ccc;
	font-size: 14px;
}

.menu .icon-search i,
.menu .search-grid i {
	text-shadow: 0.3px 0.3px 0.5px grey;
}

/* mmenu */
#hamburger {
	display: block;
	position: relative;
	float: left;
}

#hamburger i {
	color: #fff;
	font-size: 25px;
	padding: 5px 7px;
	border-radius: 5px;
}

.menu-text {
	color: #fff;
	font-size: 18px;
	font-weight: bold;
}

#menu {
	display: none;
}

.mm-menu_opened {
	display: block !important;
}

.mm-wrapper_opening .mm-menu_offcanvas~.mm-slideout {
	background: #000000ad;
}

.menu-res {
	display: none;
	z-index: 10;
	background: #245a00;
	position: relative;
	line-height: normal;
	position: sticky;
	z-index: 999;
	overflow: hidden;
	top: 0;
	box-shadow: 0px 1px 2px;
}

.menu-bar-res {
	padding: 5px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.menu-res .search {
	width: 100%;
	background: none;
	display: flex;
	border-radius: 40px;
	position: relative;
	transition: all 0.6s;
	background-color: #fff;
	border: 1px solid #fff;
}

.menu-res .search p {
	width: 32px;
	height: 32px;
	line-height: 35px;
	cursor: pointer;
	text-align: center;
	margin: 0px;
	color: #fff;
	font-size: 16px;
	background: #84100b;
	border-radius: 50%;
	margin-right: 3px;
	margin-top: 3px;
}

.menu-res .search p:hover {
	background-color: #245a00;
	color: #fff;
}

.menu-res .search input {
	width: calc(100% - 35px);
	height: 38px;
	outline: none;
	padding: 0px;
	border: 0px;
	background: transparent;
	text-indent: 10px;
	font-size: 12px;
	color: #245a00;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
}

.menu-res .search input::-webkit-input-placeholder,
.menu-res .search input:-moz-placeholder,
.menu-res .search input::-moz-placeholder,
.menu-res .search input:-ms-input-placeholder {
	color: #245a00;
}

.menu-res .search.active {
	visibility: visible;
	opacity: 1;
	transition: all 0.6s;
}

.menu-res .icon-search1 {
	width: 35px;
	line-height: 12px;
	color: #fff;
	border-left: 1px solid #fff;
	display: inline-block;
	cursor: pointer
}

/* Search in mmenu */
.search-res {
	position: relative;
	width: calc(100% - 120px);
	max-width: 550px;
}

.search-res .icon-search {
	width: 40px;
	height: 40px;
	cursor: pointer;
	text-align: center;
	line-height: 42px;
	color: #fff;
	font-size: 17px;
	margin: 0px;
}

.search-res .icon-search.active {
	color: var(--color-red);
	background: #fff;
	border-radius: 100%;
}

.search-res .search-grid {
	position: absolute;
	top: 0px;
	right: calc(100% + 5px);
	width: 0;
	overflow: hidden;
	height: 40px;
	background: rgb(95, 95, 95);
	display: flex;
	border-radius: 40px;
	transition: all 0.6s;
	box-shadow: 1px 1px 1px;
	z-index: 2;
}

.search-res .search-grid p {
	width: 32px;
	height: 32px;
	line-height: 32px;
	cursor: pointer;
	text-align: center;
	margin: 0px;
	color: #ea5f33;
	font-size: 16px;
	background: #ffffffc4;
	border-radius: 50%;
	margin-right: 3px;
	margin-top: 4px;
	transition: background 0.4s;
}

.search-res .search-grid p:hover {
	background: #fff;
	transition: background 0.4s;
}

.search-res .search-grid input {
	width: calc(100% - 35px);
	height: 38px;
	outline: none;
	padding: 0px;
	border: 0px;
	background: transparent;
	text-indent: 10px;
	font-size: 14px;
	color: #fff;
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
	font-style: italic;
}

.search-res .search-grid input::-webkit-input-placeholder {
	color: #fff;
}

.search-res .search-grid input:-moz-placeholder {
	color: #fff;
}

.search-res .search-grid input::-moz-placeholder {
	color: #fff;
}

.search-res .search-grid input:-ms-input-placeholder {
	color: #fff;
}

.search-res .search-grid.active {
	visibility: visible;
	opacity: 1;
	transition: all 0.6s;
}

.search_mobile_menu {
	width: 100% !important;
}

.menu_mobile_btn {
	width: 30% !important;
}

/* Partner */
/* .wrap-partner {
	padding: 0px 15px;
	width: 100%;
}

.wrap-partner .wrap-content {
	position: relative;
}

.partner {
	display: block;
	border: 1px solid #eee;
	max-width: 175px;
	margin: 0px auto;
} */

/* Breadcrumb */
.breadCrumbs {
	background-color: #f4f4f4;
}

.breadCrumbs .wrap-content {
	padding: 10px;
	max-width: var(--max-width);
}

.breadCrumbs .wrap-content .breadcrumb {
	padding: 0;
	margin-bottom: 0;
	background-color: transparent;
	border-radius: 0;
}

.breadCrumbs .wrap-content .breadcrumb-item a {
	color: var(--color-black);
}

.breadCrumbs .wrap-content .breadcrumb-item.active span {
	color: var(--color-hover-text);
}

.breadcrumb-item span {
	font-size: 14px;
}

.breadcrumb-item:hover span {
	color: var(--color-hover-text);
}

ol.breadcrumb {
	position: relative;
	z-index: 1;
}

.breadcrumb-item+.breadcrumb-item::before {
	content: '|';
}

/* Intro */
.news-scroll:before,
.news-scroll:after {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	left: 85px;
	border-radius: 100%;
	background-color: #CACACA;
}

.news-scroll:before {
	top: 10px;
}

.news-scroll:after {
	bottom: 40px;
}

.news-control {
	left: 85px;
	font-size: 13px;
	opacity: 0.5;
	z-index: 1;
	cursor: pointer;
}

.news-control:hover {
	opacity: 1;
	color: var(--color-title);
}

.news-control#up {
	top: -10px;
}

.news-control#down {
	bottom: 20px;
}

.news-shadow {
	padding-bottom: 30px;
}

.news-shadow-time {
	font-size: 13px;
	width: 75px;
	margin-right: 45px;
}

.news-shadow-time:after {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	top: calc(50% - 20px/2);
	right: -26px;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(../images/pattern-news.png);
}

.news-shadow-article {
	width: calc(100% - 120px);
	padding: 14px 15px;
	border-radius: 10px;
	background-color: #ffffff;
	border: 1px solid #cecabb;
}

.news-shadow-article:before {
	content: '';
	position: absolute;
	top: calc(50% - 26px/2);
	left: -13px;
	z-index: 0;
	border-top: 13px solid transparent;
	border-right: 13px solid #cecabb;
	border-bottom: 13px solid transparent;
}

.news-shadow-article:after {
	content: '';
	position: absolute;
	top: calc(50% - 24px/2);
	left: -11px;
	z-index: 1;
	border-top: 12px solid transparent;
	border-right: 11px solid #ffffff;
	border-bottom: 12px solid transparent;
}

.news-shadow-image {
	margin-right: 10px;
	width: 90px;
}

.news-shadow-info {
	width: calc(100% - 100px);
}

.news-shadow-name {
	height: 36px;
	font-size: 15px;
	font-weight: 700;
}

.news-shadow-name a {
	color: #222222;
}

.news-shadow-name a:hover {
	color: var(--color-title);
}

.news-shadow-desc {
	height: 38px;
	font-size: 13px;
}

.news-shadow-name a.text-split,
.news-shadow-desc.text-split {
	-webkit-line-clamp: 2;
}

/* Video */
.video {
	cursor: pointer;
	margin-bottom: 1rem;
}

.video-image {
	position: relative;
	margin-bottom: 0.75rem;
}

.video-image:before {
	content: "";
	position: absolute;
	width: 50px;
	height: 35px;
	top: calc(50% - 50px/2);
	left: calc(50% - 35px/2);
	z-index: 1;
	background-repeat: no-repeat;
	background-image: url(../images/play.png);
}

.video-name {
	text-align: center;
	font-size: 16px;
	color: var(--color-black);
	margin-bottom: 0px;
}

/* Album */
.album {
	cursor: pointer;
	margin-bottom: 1rem;
}

.album-image {
	margin-bottom: 0.75rem;
}

.album-name {
	margin-bottom: 0px;
	text-align: center;
}

.album-name a {
	display: block;
	font-size: 16px;
	color: var(--color-black);
	margin-bottom: 0px;
}

/* Brand */
.wrap-brand {
	margin-bottom: 50px;
	padding: 0px 15px;
	width: 100%;
}

.wrap-brand .wrap-content {
	position: relative;
}

.brand {
	display: block;
	border: 1px solid #eee;
	max-width: 160px;
	margin: 0px auto;
}

/* Product */
#sort-by {
	text-align: left;
	width: 100%;
}

#sort-by span.show-sort-by::after {
	content: '\f107';
	font-family: 'Font Awesome 5 Light';
	position: absolute;
	top: 0px;
	right: 5px;
}

#sort-by label {
	font-family: var(--font-title-card);
	font-weight: 400;
	line-height: 33px;
	font-size: 14px;
	margin-right: 10px;
	margin-bottom: 0;
	color: #222;
	display: inline-block;
}

#sort-by ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline;
}

#sort-by>ul {
	padding: 0px 5px 0 10px;
	border: 1px solid #dcdcdc;
	border-radius: 4px;
	position: relative;
	width: 180px;
}

#sort-by>ul>li {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-indent: .01px;
	cursor: pointer;
	line-height: 34px;
	border-radius: 3px;
	/* position: relative; */
}

#sort-by ul ul {
	position: absolute;
	display: none;
	opacity: 0;
	transition: all .3s ease;
	width: 180px;
	right: 0;
	top: calc(100% + 5px);
	z-index: 1;
	border: 1px solid #ebebeb;
	border-radius: 3px;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	overflow: hidden;
	background: #fff;
	padding-left: 0px !important;
}

#sort-by ul ul.show {
	display: block;
	opacity: 1;
	transition: all .3s ease;
}

#sort-by li li {
	width: 100%;
	margin-top: 0px;
	border-top: none;
	border-right: none;
	border-left: none;
	padding: 8px 10px;
	line-height: 20px;
}

#sort-by li>a {
	display: inline-block;
	width: 100%;
	line-height: 22px;
	transition: all 0s ease-in-out;
}

#sort-by ul ul li:hover {
	background: #dcdcdc;
}

#sort-by ul ul li:not(:last-child) {
	border-bottom: 1px solid #dcdcdc4f;
}

#sort-by a:link,
#sort-by a:visited {
	color: #333;
	text-decoration: none;
}


.wrap-product {
	margin-bottom: 50px;
	width: 100%;
}

.grid-pro {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 15px;
}

.product {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
}

.slick-slider .product {
	margin: 10px;
}

.box-product {
	position: relative;
	display: block;
	margin-bottom: 1rem;
}

.pic-product {
	background: #ffffff;
	position: relative;
	border-radius: 3px;
	overflow: hidden;
	margin: 5px;
}

.pic-product img {
	width: 100%;
}

.name-product {
	margin: 10px;
	font-size: 18px;
	font-family: var(--font-title-card);
	line-height: 1.2;
}


.box-product:hover .name-product {
	color: #c31829;
}

.price-product {
	margin: 0 10px;
}

/* .price-product span{font-weight:700;} */
.price-new {
	font-size: 16px;
	font-family: var(--font-title);
	color: #ec2d3f;
	margin-right: 10px;
}

.price-old {
	font-size: 14px;
	color: var(--color-gray);
	text-decoration: line-through;
}

.price-per {
	position: absolute;
	top: 0px;
	right: 5px;
	color: #ffffff;
	background: var(--color-title);
	font-size: 12px;
	border-radius: 20px 0 20px 20px;
	width: 35px;
	height: 35px;
	text-align: center;
	line-height: 35px;
}

.cart-product {
	display: flex;
	margin-bottom: 0px;
	justify-content: end;
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 5px;
}

.cart-product span {
	cursor: pointer;
	width: 25px;
	height: 25px;
	color: #ffffff;
	border-radius: 4px;
	margin: 3px 0 3px 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0px;
}

.cart-product span i {
	font-size: 14px;
}

.cart-add {
	margin-right: 2%;
	background: #9e9e9e;
}

.cart-add:hover {
	background-color: #000;
}

.cart-buy {
	background: #9e9e9e;
}

.cart-buy:hover {
	background-color: #000;
}

.addcart {
	transition: all 0.3s;
}

.addcart:hover {
	transition: all 0.3s;
}

/* Product Detail */
.grid-pro-detail {
	margin-bottom: 3rem;
}

.left-pro-detail {
	position: relative;
	text-align: center;
}

.left-pro-detail .MagicZoom {
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 1px 1px 10px #a0a0a0;
}

.gallery-thumb-pro {
	position: relative;
	margin-top: 10px;
}

.owl-pro-detail {
	padding: 0px 30px;
}

.control-pro-detail button {
	background-color: transparent;
	color: #222222;
	opacity: 1;
	width: 25px;
	font-size: 23px;
}

.control-pro-detail button:hover {
	opacity: 0.7;
	color: var(--color-hover-text);
}

.control-pro-detail button.owl-prev {
	left: 0px;
}

.control-pro-detail button.owl-next {
	right: 0px;
}

.thumb-pro-detail {
	display: block !important;
	border: 1px solid transparent;
	border-radius: 3px;
	overflow: hidden;
	cursor: pointer;
	background-color: #ffffff;
}

.thumb-pro-detail.mz-thumb.mz-thumb-selected {
	border-color: var(--color-hover-text);
}

.thumb-pro-detail img {
	box-shadow: none !important;
	filter: brightness(100%) !important;
	border-bottom: 0px !important;
	padding-bottom: 0px !important;
}

.title-pro-detail {
	text-transform: capitalize;
	font-size: 24px;
	display: block;
	font-family: var(--font-title);
	border-bottom: 1px solid #ededed;
	padding-bottom: 5px;
}

.comment-pro-detail {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

/* product button hotline */
.product_buttons {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 10px 0px;
}

.product_buttons>a {
	/* width: 48%; */
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.product_buttons>a:hover {
	color: #fe9705;
}

.product_buttons>a:hover img {
	-webkit-animation: shake-anim 1s infinite ease-in-out;
	-moz-animation: shake-anim 1s infinite ease-in-out;
	-ms-animation: shake-anim 1s infinite ease-in-out;
	-o-animation: shake-anim 1s infinite ease-in-out;
	animation: shake-anim 1s infinite ease-in-out;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%
}

.buy_ins {
	line-height: normal;
	display: flex;
	align-items: center;
	padding: 7px;
	text-align: left;
	background: #287e15;
	color: #fff;
	border-radius: 4px;
	font-size: 16px;
	text-transform: uppercase;
	border-bottom: 3px solid #fe9705;
}

.buy_tc img {
	margin-right: 10px;
}

.buy_tc>span>span {
	font-size: 12px;
}

/* ----------- */
.social-plugin-pro-detail {
	padding: 10px 0;
	margin-top: 0px !important;
}

.desc-pro-detail {
	margin-bottom: 1rem;
}

.attr-pro-detail {
	list-style: none;
	padding: 0px;
}

.attr-pro-detail li {
	margin-bottom: 0.5rem;
}

.attr-label-pro-detail {
	margin: 0px 5px 0px 0px;
	font-family: var(--font-title);
}

.attr-label-pro-detail.d-block {
	display: block;
	margin: 0px 0px 5px 0px;
}

.attr-content-pro-detail {
	display: inline-block;
	margin-bottom: 0px;
}

.price-new-pro-detail {
	font-family: var(--font-title-card);
	font-size: 20px;
	color: var(--color-red);
}

.price-old-pro-detail {
	font-family: var(--font-title-card);
	color: var(--color-gray);
	text-decoration: line-through;
	padding-left: 10px;
}

.color-pro-detail {
	cursor: pointer;
	display: inline-block;
	vertical-align: top;
	position: relative;
	width: 35px;
	height: 30px;
	margin: 0px 0px 3px 0px;
	border: 1px solid transparent;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}

.size-pro-detail {
	cursor: pointer;
	border: 1px solid #ccc;
	padding: 3px 10px 4px 10px;
	display: inline-block;
	position: relative;
}

.size-pro-detail.active,
.color-pro-detail.active {
	border-color: #e5101d;
	color: #e5101d;
}

.size-pro-detail.active:after,
.color-pro-detail.active:after {
	content: '';
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 13px;
	height: 13px;
	background-repeat: no-repeat;
	background-image: url(../images/check-cart.png);
}

.color-pro-detail input[type=radio],
.size-pro-detail input[type=radio] {
	display: none;
}

.quantity-pro-detail {
	width: 100%;
	max-width: 110px;
	line-height: normal;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: center;
}

.quantity-pro-detail span {
	line-height: 25px;
	padding: 0px;
	width: 30px;
	height: 30px;
	color: #5f5f5f;
	cursor: pointer;
	font-size: 22px;
	border: 1px solid #cccccc;
}

.quantity-pro-detail span.quantity-plus-pro-detail {
	border-left: 0px;
}

.quantity-pro-detail span.quantity-minus-pro-detail {
	border-right: 0px;
}

.quantity-pro-detail input {
	height: 30px;
	border: 1px solid #cccccc;
	width: calc(100% - 60px);
	text-align: center;
	font-size: 14px;
	padding: 5px;
}


.cart-pro-detail {
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.cart-pro-detail a {
	font-size: 14px;
	color: #ffffff;
	/* text-transform: uppercase; */
	width: 100%;
	max-width: 200px;
	/* margin: 0 auto; */
	display: inline-block;
	line-height: 2;
}


.tags-pro-detail a,
.tags-page {
	float: left;
	font-size: 16px;
	padding: 7px 20px;
	margin: 5px;
	background: linear-gradient(to right, #cc0000, #810000);
	transition: all 0.3s;
}

.tags-pro-detail a:hover,
.tags-page:hover {
	transition: all 0.3s;
	box-shadow: 1px 1px 5px 0 #000;
	transform: scale(0.95);
}

.tags-pro-detail a i {
	font-size: 11px;
	margin: 5px 5px 0px 0px;
}

.tabs-pro-detail {
	margin-top: 2rem;
}

.tabs-pro-detail .nav-tabs .nav-link {
	border-top-width: 3px;
	font-size: 16px;
	font-family: var(--font-title-card);
}

.tabs-pro-detail .nav-tabs .nav-link.active,
.tabs-pro-detail .nav-tabs .nav-item.show .nav-link {
	border-top-color: #555555;
}

.cart-pro-detail a.mua-ngay {
	background-color: #e41319;
	color: #fff;
	margin-bottom: 10px;
	-webkit-transition: opacity .5s;
	transition: opacity .5s;
	text-decoration: none;
	text-transform: initial;
	font-size: 16px;
	transition: all 0.3s;
	font-family: var(--font-title);
}

.title-search {
	font-size: 24px;
	font-weight: bold;
}

.count-search {
	margin-bottom: 20px;
}

.cart-pro-detail a.them-gio {
	background-color: #00781b;
	color: #fff;
	-webkit-transition: opacity .5s;
	transition: opacity .5s;
	text-decoration: none;
	font-size: 16px;
	transition: all 0.3s;
	font-family: var(--font-title);
	margin-bottom: 10px;
}

.cart-pro-detail a:hover {
	cursor: pointer;
	text-decoration: none;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
	transition: all .3s ease;
	transform: scale(.95);
}

/* News */
.grid-news {
	width: 100%;
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(4, 1fr);
}

.infoDetailPost {
	color: #6b6b6b;
	font-style: italic;
	font-size: 12px;
	margin-bottom: 5px;
}

.newshome {
	margin: 8px;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
}

.newshome .img {
	margin: 5px;
	border-radius: 3px;
	overflow: hidden;
	height: fit-content
}

.newshome .content {
	padding: 10px;
}

.newshome .content h3 {
	font-size: 18px;
	margin-bottom: 10px
}

.news-2 p.scale-img {
	width: 300px;
}

.news-2 .info-news {
	width: calc(100% - 300px);
	padding: 10px 0 0 25px;
	position: relative;
}

.news-2 .view-times-news {
	position: absolute;
	width: calc(100% - 30px);
	bottom: 0;
	left: 15px;
}

.news-2::after {
	content: '';
	width: 100%;
	border-bottom: 1px dashed #dcdcdc;
}

.news-2 {
	display: flex;
	margin: 0 0 20px 0;
	flex-wrap: wrap;
	border-radius: 5px;
	overflow: hidden;
	transition: all 0.3s;
	position: relative;
}


.news-2 .pic-news {
	width: 100%;
	box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
	border-radius: 4px;
	margin-bottom: 15px;
}

.news:hover {}

.pic-news img {
	width: 100%;
}

.news .info-news {
	width: 100%;
	padding: 10px 0px 0 0px;
}

.info-news {
	width: 100%;
	padding: 15px 10px 0 10px;
}

.view-times-news {
	border-top: 1px solid #d6d6d6;
	padding: 5px 0;
	margin-top: 10px;
	display: flex;
	font-size: 13px;
	justify-content: space-between;
	align-items: center;
	color: #003768;
	font-style: italic;
}

.view-times-news>a {
	transition: color 0.3s;
}

.view-times-news>a:hover {
	color: red;
	transition: color 0.3s;
}

.name-news {
	font-size: 16px;
	font-family: var(--font-title-card);
	display: block;
	line-height: 1.2;
	margin-bottom: 5px;
}

.name-news a {
	color: #333;
	text-decoration: none;
}

.news .pic-news {
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
	/* overflow: hidden; */
}

.news {
	margin-bottom: 20px;
	/* height: fit-content; */
	transition: all ease 0.4s;
	padding-bottom: 10px;
	border-bottom: 1px solid #ededed;
}

.name-news:hover a,
.news:hover .name-news a {
	color: var(--color-title);
}

.time-news {
	color: #003768;
	font-size: 13px;
	margin-bottom: 0.25rem;
	font-style: italic;
	text-align: right;
}

.desc-news.text-split {
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.2;
	font-size: 14px;
}

.othernews b {
	margin-bottom: 10px;
}

.list-news-other {
	padding-left: 0px;
	list-style: none;
}

.list-news-other li {
	margin-bottom: 2px;
}

.list-news-other li a {
	text-transform: none;
	color: #333333;
	transition: all 0.3s;
	display: block;
}

.list-news-other li a:hover {
	color: var(--color-red);
	transform: translateX(5px);
	transition: all 0.3s;
}

/* Contact */
.contact-article {
	margin-bottom: 3rem;
}

.contact-input {
	position: relative;
	margin-bottom: 15px;
}

.contact-input textarea {
	resize: none;
	height: 150px;
	background: #fff;
}

.contact-input .custom-file-label::after {
	content: attr(title);
}

form.contact-form {
	background: #ecf0f3;
	padding: 20px;
	border-radius: 6px;
}

.contact-input input {
	background: #fff;
}

.contact-map {
	position: relative;
	height: 500px;
}

.contact-map iframe {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100% !important;
	height: 100% !important;
}

.contact-form input.btn {
	padding: 5px 25px;
	border: 2px solid transparent;
	background-color: #e93f33;
	color: #fff;
	margin-right: 5px;
	transition: transform 0.3s;
}

.contact-form input.btn:hover {
	color: #fff;
	background-color: #e93f33;
	transform: scale(0.9);
	transition: transform 0.3s;
}

/* Newsletter */
.newsletter-slogan {
	margin-bottom: 0.5rem;
}

.newsletter-input {
	position: relative;
}

.newsletter-button {
	margin-top: 5px;
}

.newsletter-button input[type=submit] {
	text-transform: uppercase;
	font-weight: 500;
}

/* Footer */
.footer-article {}

.footer-article .wrap-content {
	padding: 40px 0px 20px;
	/* color: #fff; */
}

.footer-title {
	text-transform: uppercase;
	font-size: 20px;
	margin-bottom: 1rem;
	font-weight: 500;
	color: #bf3228;
	font-family: var(--font-title);
	;
}

.footer-news {
	width: 100%;
	padding: 0 10px;
	margin-bottom: 20px;
}

.footer-news:nth-child(1) {
	max-width: 420px;
}

.footer-news:nth-child(2) {
	max-width: 220px;
}

.footer-news:nth-child(3) {
	max-width: 320px;
}

.footer-ul {
	list-style: none;
	padding: 0px;
	margin: 0px 0 20px 0;
}

.footer-ul li {
	margin-bottom: 5px;
}

.footer-ul li:last-child {
	margin-bottom: 0px;
}

.footer-ul li a {}

.footer-ul li a:hover {
	text-decoration: none;
	color: var(--color-red);
}

.footer-tags {
	background: #eee;
}

.footer-tags .wrap-content {
	padding: 30px 15px;
}

.footer-tags-lists {
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.footer-powered {
	color: #ffffff;
	background-color: #bf3228;
}

.footer-powered .wrap-content {
	padding-top: 10px;
	padding-bottom: 10px;
}

.footer-statistic {
	text-align: right;
}

.footer-statistic span {
	padding-right: 10px;
}

.footer-statistic span:last-child {
	padding-right: 0px;
}

.validation-newsletter {
	margin-bottom: 30px;
}

#footer-map {
	position: relative;
	height: 500px;
}

#footer-map iframe {
	position: absolute !important;
	width: 100% !important;
	height: 100% !important;
	top: 0px !important;
	left: 0px !important;
}

.social-footer {
	margin-top: 20px;
	transition: all .2s;
}

.footer-news ul li a:hover {
	color: #c31829;
}

/* Like Share */
.social-plugin {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.social-plugin .at-share-btn {
	margin-bottom: 0px !important;
}

.social-plugin .zalo-share-button {
	margin-left: 3px;
}

#share-buttons button {
	transition: all .2s;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 5px !important;
}

#share-buttons button:hover {
	transition: all .2s;
	filter: invert(1);
}

/* Paging */
.pagination-home {
	width: 100%;
	text-align: center;
}

.pagination .page-item .page-link {
	color: #555555;
	font-size: .875rem;
	margin: 2px;
	display: flex;
	padding: 0;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 3px;
}

.pagination .page-item:not(.active) .page-link:hover {}

.pagination .page-item.active .page-link,
.pagination .page-item:hover .page-link {
	color: #ffffff;
	background: #3f3f3f;
	border: none;
}


/* Paging Ajax */
.pagination-ajax {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 0 0;
}

.pagination-ajax a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	margin: 0;
	min-width: 36px;
	height: 36px;
	padding: 0 6px;
	color: var(--ink, #1a1f2b) !important;
	border: 1px solid rgba(194, 198, 212, 0.5);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none !important;
	background-color: var(--white, #fff);
	border-radius: var(--radius-full, 9999px);
	transition: all 0.2s ease;
}

.pagination-ajax a.current,
.pagination-ajax a:hover {
	color: var(--white, #fff) !important;
	border-color: var(--blue-700, #1565c0);
	background-color: var(--blue-700, #1565c0);
}

.pagination-ajax a.disabled {
	opacity: 0.4;
	pointer-events: none;
}

.pagination-ajax a.dot {
	border: 0;
	background: transparent;
	cursor: default;
}
.pagination-ajax a.dot:hover {
	color: var(--ink, #1a1f2b) !important;
	background: transparent;
}

/* Server-rendered pagination (bmBase::pagination(), a plain Bootstrap
   <ul class="pagination"><li class="page-item"><a class="page-link">
   structure — different markup from the AJAX pagination above, which
   is hand-built by Http.php/PaginationsAjax.php) used on real postback
   listing pages (products list, product-detail related products, news
   list). Restyled to match the same blue-pill look, scoped to the
   .pagination-ajax wrapper these templates render it inside so it
   doesn't affect any other plain Bootstrap pagination elsewhere. */
.pagination-ajax .pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.pagination-ajax .page-item {
	display: flex;
}
.pagination-ajax .page-link {
	/* Bootstrap's own .page-link sets display:block, margin-left:-1px
	   (border-collapsing) and per-corner border-radius — all left
	   untouched by a rule that only covers the properties it cares
	   about would leak through despite matching specificity on the
	   ones below, so every property Bootstrap sets here is explicitly
	   re-declared. */
	display: inline-flex;
	position: static;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	margin: 0;
	padding: 0 6px;
	color: var(--ink, #1a1f2b);
	border: 1px solid rgba(194, 198, 212, 0.5);
	border-radius: var(--radius-full, 9999px) !important;
	font-size: 13px;
	font-weight: 500;
	line-height: normal;
	text-decoration: none;
	background-color: var(--white, #fff);
	transition: all 0.2s ease;
}
.pagination-ajax .page-item.active .page-link,
.pagination-ajax .page-link:hover {
	color: var(--white, #fff);
	border-color: var(--blue-700, #1565c0);
	background-color: var(--blue-700, #1565c0);
}
.pagination-ajax .page-item.active .page-link {
	cursor: default;
	pointer-events: none;
}

/* .pagination-ajax a.first,
.pagination-ajax a.last,
.pagination-ajax a.prev,
.pagination-ajax a.next {
	text-indent: -9999px;
	position: relative;
	background-color: #ffffff;
	z-index: 1;
} */


/* .pagination-ajax a.first:hover::before,
.pagination-ajax a.last:hover::after,
.pagination-ajax a.prev:hover::before,
.pagination-ajax a.next:hover::after {
	color: #ffffff !important;
	border-color: var(--color-red);
	background-color: var(--color-red);
}

.pagination-ajax a.first:before,
.pagination-ajax a.last:before,
.pagination-ajax a.prev:before,
.pagination-ajax a.next:before {
	content: '';
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 2;
	font-family: 'Font Awesome 5 Free';
	font-style: normal;
	font-weight: 400;
	text-align: center;
	font-size: 20px;
}

.pagination-ajax a.first:before {
	content: "\f100";
}

.pagination-ajax a.last:before {
	content: "\f101";
}

.pagination-ajax a.prev:before {
	content: "\f104";
}

.pagination-ajax a.next:before {
	content: "\f105";
} */

/* Popup */
#popup .modal-body {
	padding: 0px;
}

.modal.fade .modal-dialog.modal-dialog-left {
	-webkit-transform: translate(100%, 0);
	transform: translate(100%, 0);
}

.modal.show .modal-dialog.modal-dialog-left {
	-webkit-transform: none;
	transform: none;
}


/* Hidden Google Captcha */
.grecaptcha-badge {
	display: none !important;
	width: 0px !important;
	height: 0px !important;
	visibility: hidden !important;
	overflow: hidden;
}

/* Hidden Check Grammar Coccoc */
coccocgrammar {
	display: none;
}

/* Scroll Top */
.scrollToTop {
	width: 41px;
	height: 41px;
	text-align: center;
	font-weight: bold;
	color: #444;
	text-decoration: none;
	position: fixed;
	bottom: 15px;
	right: 15px;
	display: none;
	z-index: 10;
	cursor: pointer;
}

/* Text Hide */
.text-split {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
}

.text-split-1 {
	-webkit-line-clamp: 1;
}

.text-split-6 {
	-webkit-line-clamp: 6;
}

/* Transition All */
.transition {
	-webkit-transition: 0.3s ease-out;
	-moz-transition: 0.3s ease-out;
	-o-transition: 0.3s ease-out;
	transition: 0.3s ease-out;
}

/* Scale IMG */
.scale-img {
	overflow: hidden;
	display: block;
}

.scale-img img {
	-webkit-transition: 0.3s ease-out;
	-moz-transition: 0.3s ease-out;
	-o-transition: 0.3s ease-out;
	transition: 0.3s ease-out;
	-moz-transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
	-o-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	transform: scale(1, 1);
}

.scale-img:hover img {
	-webkit-transition: 0.3s ease-out;
	-moz-transition: 0.3s ease-out;
	-o-transition: 0.3s ease-out;
	transition: 0.3s ease-out;
	-moz-transform: scale(1.1, 1.1);
	-webkit-transform: scale(1.1, 1.1);
	-o-transform: scale(1.1, 1.1);
	-ms-transform: scale(1.1, 1.1);
	transform: scale(1.1, 1.1);
	filter: brightness(.8);
}

/* Blink */
.blink {
	-webkit-animation-name: blink;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-name: blink;
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	animation-name: blink;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@-moz-keyframes blink {
	0% {
		opacity: 1.0;
	}

	50% {
		opacity: 0.0;
	}

	100% {
		opacity: 1.0;
	}
}

@-webkit-keyframes blink {
	0% {
		opacity: 1.0;
	}

	50% {
		opacity: 0.0;
	}

	100% {
		opacity: 1.0;
	}
}

@keyframes blink {
	0% {
		opacity: 1.0;
	}

	50% {
		opacity: 0.0;
	}

	100% {
		opacity: 1.0;
	}
}

/* fixed button */
#button-contact-vr {
	margin: -10px;
	transform: scale(0.8);
	position: fixed;
	bottom: 121px;
	z-index: 999;
	right: 0;
}

#zalo-vr {
	transition: 1s all;
	-moz-transition: 1s all;
	-webkit-transition: 1s all;
}

#button-contact-vr .button-contact {
	position: relative;
	margin-top: -5px;
}

#button-contact-vr .button-contact .phone-vr {
	position: relative;
	visibility: visible;
	background-color: transparent;
	width: 90px;
	height: 90px;
	cursor: pointer;
	z-index: 11;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	transition: visibility .5s;
	left: 0;
	bottom: 0;
	display: block;
}

#zalo-vr .phone-vr-circle-fill {
	box-shadow: 0 0 0 0 #2196f3;
	background-color: rgba(33, 150, 243, .7);
}

#zalo-vr .phone-vr-img-circle {
	background-color: #2196f3;
}

#phone-vr {
	transition: .7s all;
	-moz-transition: .7s all;
	-webkit-transition: .7s all;
}

.phone-vr-circle-fill {
	width: 65px;
	height: 65px;
	top: 12px;
	left: 12px;
	position: absolute;
	box-shadow: 0 0 0 0 #c31d1d;
	background-color: rgba(230, 8, 8, .7);
	border-radius: 50%;
	border: 2px solid transparent;
	-webkit-animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
	animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
	transition: all .5s;
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-animuiion: zoom 1.3s infinite;
	animation: zoom 1.3s infinite;
}

.phone-vr-img-circle {
	background-color: #e60808;
	width: 40px;
	height: 40px;
	line-height: 40px;
	top: 25px;
	left: 25px;
	position: absolute;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	-webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
	animation: phone-vr-circle-fill 1s infinite ease-in-out;
}

.phone-vr-img-circle a {
	display: block;
	line-height: 37px;
}

.phone-vr-img-circle img {
	max-height: 25px;
	max-width: 27px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
}

@-webkit-keyframes phone-vr-circle-fill {
	0% {
		-webkit-transform: rotate(0) scale(1) skew(1deg)
	}

	10% {
		-webkit-transform: rotate(-25deg) scale(1) skew(1deg)
	}

	20% {
		-webkit-transform: rotate(25deg) scale(1) skew(1deg)
	}

	30% {
		-webkit-transform: rotate(-25deg) scale(1) skew(1deg)
	}

	40% {
		-webkit-transform: rotate(25deg) scale(1) skew(1deg)
	}

	50% {
		-webkit-transform: rotate(0) scale(1) skew(1deg)
	}

	100% {
		-webkit-transform: rotate(0) scale(1) skew(1deg)
	}
}

@-webkit-keyframes zoom {
	0% {
		transform: scale(.9)
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 15px transparent
	}

	100% {
		transform: scale(.9);
		box-shadow: 0 0 0 0 transparent
	}
}

@keyframes zoom {
	0% {
		transform: scale(.9)
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 15px transparent
	}

	100% {
		transform: scale(.9);
		box-shadow: 0 0 0 0 transparent
	}
}

/* Messenger */
.js-facebook-messenger-container.closed,
.js-facebook-messenger-tooltip.closed {
	display: none !important
}

.js-facebook-messenger-tooltip {
	bottom: 97px;
	right: 97px
}

.js-facebook-messenger-tooltip {
	color: #404040;
	background: #fff
}

.js-facebook-messenger-box,
.js-facebook-messenger-button,
.js-facebook-messenger-tooltip {
	z-index: 999
}

.js-facebook-messenger-tooltip {
	display: none;
	position: fixed;
	text-align: center;
	border-radius: 10px;
	overflow: hidden;
	font-size: 12px;
	line-height: 1;
	padding: 10px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: rgba(0, 0, 0, 0.15) 0 2pt 10pt;
	z-index: 1.0E+30
}

.js-facebook-messenger-close-tooltip {
	width: 10px;
	height: 10px;
	display: inline-block;
	cursor: pointer;
	margin-left: 10px
}

.js-facebook-messenger-box.rubberBand {
	-webkit-animation-name: rubberBand;
	animation-name: rubberBand
}

.js-facebook-messenger-box.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}

.js-facebook-messenger-box,
.js-facebook-messenger-button,
.js-facebook-messenger-tooltip {
	z-index: 999
}

.js-facebook-messenger-box {
	display: block;
	position: fixed;
	cursor: pointer;
	bottom: 70px;
	right: 7px;
	width: 56px;
	height: 56px;
	text-align: center;
	background: #1182FC;
	border-radius: 100%;
	overflow: hidden;
	z-index: 99;
	-webkit-box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.3);
	box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.3)
}

.js-facebook-messenger-box.rotate svg#fb-msng-icon {
	transform: rotate(0deg)
}

.js-facebook-messenger-box svg#fb-msng-icon {
	width: 32px;
	height: 33px;
	position: absolute;
	top: 13px;
	left: 12px;
	opacity: 1;
	overflow: hidden;
	-webkit-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;
	-moz-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;
	-o-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;
	transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;
}

.js-facebook-messenger-box.rotate svg#close-icon {
	transform: rotate(-45deg)
}

.js-facebook-messenger-box svg#close-icon {
	opacity: 0;
	width: 19px;
	height: 20px;
	position: absolute;
	top: 19px;
	left: 19px;
	-webkit-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;
	-moz-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;
	-o-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;
	transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;
}

.js-facebook-messenger-container,
.js-facebook-messenger-container-button {
	z-index: 1000
}

.js-facebook-messenger-container {
	position: fixed;
	opacity: 0;
	transform: translateY(50px);
	bottom: 110px;
	right: 90px;
	border-radius: 10px;
	pointer-events: none;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16);
	-webkit-transition: transform 160ms ease-in-out, opacity 160ms ease-in-out;
	-moz-transition: transform 160ms ease-in-out, opacity 160ms ease-in-out;
	-o-transition: transform 160ms ease-in-out, opacity 160ms ease-in-out;
	transition: transform 160ms ease-in-out, opacity 160ms ease-in-out
}

.js-facebook-messenger-top-header {
	width: 220px
}

.js-facebook-messenger-top-header {
	color: #ffffff;
	background: #1182FC
}

.js-facebook-messenger-top-header {
	display: block;
	position: relative;
	width: 220px;
	background: #1182FC;
	color: #ffffff;
	text-align: center;
	line-height: 1;
	padding: 10px;
	font-size: 14px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px
}

.js-facebook-messenger-container iframe,
.js-facebook-messenger-container-button iframe {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px
}

.js-facebook-messenger-box,
.js-facebook-messenger-button,
.js-facebook-messenger-tooltip {
	z-index: 999
}

.js-facebook-messenger-container,
.js-facebook-messenger-container-button {
	z-index: 1000
}

.js-facebook-messenger-top-header {
	color: #ffffff;
	background: #1182FC
}

.js-facebook-messenger-top-header {
	width: 220px
}

.js-facebook-messenger-tooltip {
	color: #404040;
	background: #fff
}

.js-facebook-messenger-container.open {
	transform: translateY(0px);
	opacity: 1;
	pointer-events: all
}

.js-facebook-messenger-tooltip {
	bottom: 97px;
	right: 97px
}

.js-facebook-messenger-box.open svg#fb-msng-icon {
	opacity: 0
}

.js-facebook-messenger-box.rotate.open svg#close-icon {
	transform: rotate(0deg)
}

.js-facebook-messenger-box.open svg#close-icon {
	opacity: 1
}

/* Cart Fix */
.cart-fixed {
	position: fixed;
	right: 20px;
	bottom: 390px;
	z-index: 101;
	width: 50px;
	height: 50px;
	text-align: center;
	color: #fff !important;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #0066cc;
	background-image: linear-gradient(to right, #cc0000, #810000);
}

.cart-fixed:hover {
	background-image: linear-gradient(to right, #810000, #cc0000);
	cursor: pointer;
}

.cart-fixed:hover span {
	background-color: #810000;
}

.cart-fixed i {
	font-size: 20px;
}

.cart-fixed span {
	position: absolute;
	top: 0px;
	right: -5px;
	color: #ffffff;
	width: 25px;
	height: 25px;
	background: var(--color-red);
	text-align: center;
	line-height: 25px;
	font-size: 11px;
	border-radius: 100%;
}

/* Toolbar */
.toolbar {
	background: var(--color-red);
	width: 100%;
	padding: 3vw;
	bottom: 0px;
	position: fixed;
	z-index: 500;
	height: auto;
	left: 0px;
}

.toolbar ul {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0px;
	margin: 0px;
}

.toolbar ul li {
	text-align: center;
	width: 25%;
}

.toolbar ul li a {
	display: block;
	width: 100%;
	cursor: pointer;
}

.toolbar ul li a img {
	height: 6vw;
	width: auto;
}

.toolbar ul li a span {
	font-weight: 400;
	color: #ffffff;
	font-size: 3.5vw;
	display: none;
}

/* Fixbar */
.fixbar {
	bottom: 0;
	display: block;
	background: #f0eff4;
	border-top: 1px solid #ddd;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: fixed;
	margin: 0;
	z-index: 500;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	height: 50px;
}

.fixbar ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

.fixbar ul li {
	display: inline-block;
	margin: 0 auto 10px;
	text-align: center;
	width: 25%;
	float: left;
}

.fixbar .icon-cart-mobile,
.fixbar .icon-cart-new,
.fixbar .icon-home-new,
.fixbar .icon-hotdeal-new {
	width: 20px;
	height: 20px;
	display: block;
	margin: 8px auto 0;
}

.fixbar .icon-cart-mobile {
	background: url(../images/cart-mobile.png) no-repeat;
}

.cart-total-header-mobile {
	font-size: 10px;
	position: absolute;
	background: red;
	color: #fff !important;
	border-radius: 50%;
	height: 15px;
	width: 15px;
	line-height: 15px;
	top: 5px;
	margin-left: 5px;
}

.fixbar ul li a {
	font-size: 11px;
	text-decoration: none;
	color: #333;
}

.fixbar ul li a i {
	font-size: 20px;
}

/* Plugbar */
.plugbar {
	position: fixed;
	bottom: 0;
	left: 0;
	border-top: 1px solid #eae6e6;
	width: 100%;
	right: 0;
	max-width: 767px;
	margin: 0 auto;
	background: #ffffff;
	padding: 9px 10px 10px 7px;
	z-index: 10;
}

.plugbar ul {
	list-style: none;
	padding: 0;
	margin: 0px;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.plugbar ul li {
	width: 20%;
	float: left;
}

.plugbar ul li a {
	display: block;
	color: #696969;
	font-size: 12px;
	text-align: center;
	position: relative;
}

.plugbar ul li a i {
	font-size: 20px;
	color: #696969;
}

.plugbar ul li a span {
	position: absolute;
	width: 50px;
	height: 50px;
	top: -40px;
	left: calc(50% - 50px/2);
	font-size: 14px;
	display: block;
	border: 1px solid rgba(234, 230, 230, 0.5);
	border-radius: 100%;
}

/* Combo Phone */
.support-online {
	position: fixed;
	z-index: 999;
	left: 10px;
	bottom: 0px;
}

.support-online a {
	position: relative;
	margin: 20px 10px;
	text-align: left;
	width: 40px;
	height: 40px;
}

.support-online i {
	width: 40px;
	height: 40px;
	background: #43a1f3;
	color: #ffffff;
	border-radius: 100%;
	font-size: 20px;
	text-align: center;
	line-height: 1.9;
	position: relative;
	z-index: 999;
}

.support-online a span {
	border-radius: 2px;
	text-align: center;
	background: rgb(103, 182, 52);
	padding: 9px;
	display: none;
	width: 180px;
	margin-left: 10px;
	position: absolute;
	color: #ffffff;
	z-index: 999;
	top: 0px;
	left: 40px;
	transition: all 0.2s ease-in-out 0s;
	-moz-animation: headerAnimation 0.7s 1;
	-webkit-animation: headerAnimation 0.7s 1;
	-o-animation: headerAnimation 0.7s 1;
	animation: headerAnimation 0.7s 1;
}

.support-online a:hover span {
	display: block;
}

.support-online a {
	display: block;
}

.support-online a span:before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 10px 10px 0;
	border-color: transparent rgb(103, 182, 52) transparent transparent;
	position: absolute;
	left: -10px;
	top: 10px;
}

.support-online .kenit-alo-circle-fill {
	width: 60px;
	height: 60px;
	top: -10px;
	position: absolute;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	border: 2px solid transparent;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	background-color: rgba(0, 175, 242, 0.5);
	opacity: .75;
	right: -10px;
}

.support-online .kenit-alo-circle {
	width: 50px;
	height: 50px;
	top: -5px;
	right: -5px;
	position: absolute;
	background-color: transparent;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	border: 2px solid rgba(30, 30, 30, 0.4);
	opacity: .1;
	border-color: #0089B9;
	opacity: .5;
}

.support-online .support-online .btn-support {
	cursor: pointer;
}

.support-online .mes i {
	background: orange;
}

.support-online .sms i {
	background: red;
}

.support-online .call-now i {
	background: green;
}

/* Phone Switch */
.widget-mobile {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 10px;
	z-index: 9999999;
}

#my-phone-circle {
	position: relative;
	width: 50px !important;
	height: 50px !important;
}

.wcircle-open .wcircle-icon i:before {
	content: '\f00d';
}

.wcircle-icon {
	background: #1282fc;
	border-radius: 50%;
	display: flex !important;
	display: -ms-flex !important;
	align-items: center;
	-ms-flex-align: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	position: relative !important;
}

.wcircle-icon:before {
	position: absolute;
	content: '';
	width: 60px;
	height: 60px;
	background: rgba(18, 130, 252, .5);
	border: 1px solid #ffffff;
	border-radius: 50%;
	left: -5px;
	top: -5px;
	-webkit-animation: pulse 1s infinite ease-in-out;
	-moz-animation: pulse 1s infinite ease-in-out;
	-ms-animation: pulse 1s infinite ease-in-out;
	-o-animation: pulse 1s infinite ease-in-out;
	animation: pulse 1s infinite ease-in-out;
}

.wcircle-icon:after {
	position: absolute;
	content: '';
	width: 80px;
	height: 80px;
	background: rgba(18, 130, 252, .5);
	border-radius: 50%;
	left: -15px;
	top: -15px;
	-webkit-animation: zoomIn 2s infinite ease-in-out;
	-moz-animation: zoomIn 2s infinite ease-in-out;
	-ms-animation: zoomIn 2s infinite ease-in-out;
	-o-animation: zoomIn 2s infinite ease-in-out;
	animation: zoomIn 2s infinite ease-in-out;
}

.wcircle-menu {
	position: absolute !important;
	left: 0;
	top: 0;
	display: none;
}

.wcircle-menu-item {
	width: 50px;
	height: 50px;
	background: #1282fc;
	border-radius: 50%;
	display: flex;
	display: -ms-flex;
	align-items: center;
	-ms-flex-align: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.wcircle-menu-item img {
	width: 50px;
	height: 50px;
	display: block;
	border-radius: 50%;
}

.wcircle-menu-item i,
.wcircle-icon i {
	font-size: 25px;
	color: #ffffff;
	position: relative;
	z-index: 9999;
}

.shake-anim {
	-webkit-animation: shake-anim 1s infinite ease-in-out;
	-moz-animation: shake-anim 1s infinite ease-in-out;
	-ms-animation: shake-anim 1s infinite ease-in-out;
	-o-animation: shake-anim 1s infinite ease-in-out;
	animation: shake-anim 1s infinite ease-in-out;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%
}

@-moz-keyframes shake-anim {
	0% {
		transform: rotate(0) scale(1) skew(1deg)
	}

	10%,
	30% {
		-moz-transform: rotate(-25deg) scale(1) skew(1deg)
	}

	20%,
	40% {
		-moz-transform: rotate(25deg) scale(1) skew(1deg)
	}

	100%,
	50% {
		-moz-transform: rotate(0) scale(1) skew(1deg)
	}
}

@-webkit-keyframes shake-anim {

	0%,
	100%,
	50% {
		-webkit-transform: rotate(0) scale(1) skew(1deg)
	}

	10%,
	30% {
		-webkit-transform: rotate(-25deg) scale(1) skew(1deg)
	}

	20%,
	40% {
		-webkit-transform: rotate(25deg) scale(1) skew(1deg)
	}
}

@-o-keyframes shake-anim {

	0%,
	100%,
	50% {
		-o-transform: rotate(0) scale(1) skew(1deg)
	}

	10%,
	30% {
		-o-transform: rotate(-25deg) scale(1) skew(1deg)
	}

	20%,
	40% {
		-o-transform: rotate(25deg) scale(1) skew(1deg)
	}
}

.comment-pro-detail .comment-star i {
	font-size: 13px
}

.detail-right-box {
	position: sticky;
	top: 0;
	z-index: 999
}

.detail-right-box-title {
	padding: 10px 10px 0 10px;
	font-size: 18px;
	font-weight: 500
}

.care-detail-box {
	padding: 10px;
}

.detail-right-box-wrap .care-detail-item {
	margin: 0;
	border-bottom: 1px solid #eee;
	padding: 8px 0;
}

.detail-right-box-wrap .care-detail-item img {
	-moz-filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	width: 12px;
}

span.txt-e-c {
	margin-left: 5px;
}

.support-ask-title {
	font-weight: bold;
	margin-bottom: 10px;
}

.support-ask-body,
.support-ask-title {
	padding: 0;
}

.support-ask-item {
	width: 110px;
	display: inline-block;
}

.support-ask-item a {
	display: inline-block;
	font-size: 14px;
	text-decoration: none;
	color: #333;
	cursor: pointer;
}

.support-ask-icon img {
	width: 20px;
	height: 20px;
}

.support-ask-name {
	vertical-align: 1px;
}

.detail-right-box-wrap .care-detail-item a {
	text-decoration: none;
	color: #333;
	cursor: pointer;
}

/*====================== Edit code ======================*/
.font-title {
	font-family: var(--font-title);
	;
}

.tieuchi {
	padding: 10px;
	display: flex !important;
	margin: 5px;
}

.tieuchi img {
	margin: 0 auto;
}

.tieuchi .img {
	width: 80px;
}

.tieuchi .content {
	width: calc(100% - 100px);
}

.tieuchi .content h3 {
	font-size: 18px;
}

.tieuchi .content p {
	font-size: 15px;
	color: #555555;
}

/* hover_sang2 */
.hover_sang2:before {
	position: absolute;
	top: 0;
	left: -85%;
	z-index: 10;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
	z-index: 1;
}

.hover_sang2 {
	position: relative;
	overflow: hidden;
}

.hover_sang2:hover:before {
	transition: 1s;
	left: 100%;
}

.grid-3 {
	width: 100%;
	display: grid;
	grid-gap: 15px;
	grid-template-columns: repeat(3, 1fr);
}

.btn-more {
	display: block;
	padding: 5px 25px;
	margin: 35px auto;
	font-family: var(--font-title);
	;
	color: #fff;
	transition: all 0.3s;
	background-color: #bf3228;
	border-radius: 4px;
	width: fit-content;
	overflow: hidden;
	font-size: 18px;
}

.btn-more:hover {
	box-shadow: 1px 1px 5px 0 grey;
	transition: all 0.3s;
	background-color: #fff;
	color: #bf3228;
	transform: translateY(-5px);
}

.star-comment {
	margin: 10px 0;
	color: #ffea00;
}

.title-main {
	text-align: center;
	margin: 15px auto 30px auto;
	position: relative;
	font-family: var(--font-title);
}

.title-main span {
	padding-bottom: 15px;
	text-transform: uppercase;
	color: var(--color-title);
	font-size: 32px;
}

/* General */
.res-img-detail {
	width: 100%;
}

.res-img-detail img {
	max-width: 100%;
	height: auto !important;
}

.res-img-detail .table-detail-inpage {
	overflow-x: auto;
	max-width: 950px;
}

.res-img-detail .table-detail-inpage table {
	max-width: 950px;
}

div.wap_load {
	background: #e8e8e8;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
}

.wrap-box-loader {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.loader {
	animation: rotate 1s infinite;
	height: 50px;
	width: 50px;
}

.loader:before,
.loader:after {
	border-radius: 50%;
	content: '';
	display: block;
	height: 20px;
	width: 20px;
}

.loader:before {
	animation: ball1 1s infinite;
	background-color: #cb2025;
	box-shadow: 30px 0 0 #f8b334;
	margin-bottom: 10px;
}

.loader:after {
	animation: ball2 1s infinite;
	background-color: #00a096;
	box-shadow: 30px 0 0 #97bf0d;
}

@keyframes rotate {
	0% {
		-webkit-transform: rotate(0deg) scale(0.8);
		-moz-transform: rotate(0deg) scale(0.8);
	}

	50% {
		-webkit-transform: rotate(360deg) scale(1.2);
		-moz-transform: rotate(360deg) scale(1.2);
	}

	100% {
		-webkit-transform: rotate(720deg) scale(0.8);
		-moz-transform: rotate(720deg) scale(0.8);
	}
}

@keyframes ball1 {
	0% {
		box-shadow: 30px 0 0 #f8b334;
	}

	50% {
		box-shadow: 0 0 0 #f8b334;
		margin-bottom: 0;
		-webkit-transform: translate(15px, 15px);
		-moz-transform: translate(15px, 15px);
	}

	100% {
		box-shadow: 30px 0 0 #f8b334;
		margin-bottom: 10px;
	}
}

@keyframes ball2 {
	0% {
		box-shadow: 30px 0 0 #97bf0d;
	}

	50% {
		box-shadow: 0 0 0 #97bf0d;
		margin-top: -20px;
		-webkit-transform: translate(15px, 15px);
		-moz-transform: translate(15px, 15px);
	}

	100% {
		box-shadow: 30px 0 0 #97bf0d;
		margin-top: 0;
	}
}

/* Product LEFT */
.wrap-frame-left h2 {
	line-height: 30px;
	font-size: 16px;
	text-transform: uppercase;
	margin-bottom: 0;
	font-family: var(--font-title-card);
	color: #000;
	text-shadow: 0.3px 0.3px 0 #000;
	padding: 7px 10px;
	border-radius: 5px 5px 0 0;
	padding-top: 15px;
}

.frame-left>h2:nth-child(2) {
	margin-bottom: 10px;
}

.wrap-frame-left {
	width: 270px;
	float: right;
}

.frame-left {
	border-radius: 10px;
	box-shadow: 0 15px 35px rgba(0, 0, 0, .1);
}

.hotline-onl-sub-left {
	width: fit-content;
	padding: 5px 10px;
	background-color: red;
	border-radius: 30px;
	position: relative;
	margin: 0 auto;
	margin-top: -15px;
	margin-bottom: 20px;
}

.hotline-onl-sub-left a {
	color: #fff;
}

.list-btn-position {
	list-style: none;
	position: relative;
	top: 130%;
	width: 100%;
	left: 0px;
	z-index: 5;
	opacity: 0;
	transition: all 0.6s;
	background: #FFF;
	visibility: hidden;
	padding-inline-start: 0px;
}

.list-btn-position.show {
	top: 100%;
	opacity: 1;
	visibility: visible;
}

.box-left-menu:last-child .list-btn-position.show {
	margin-bottom: 0;
}

.list-btn-position li:last-child {
	border: none;
}

.list-btn-position li {
	position: relative;
	padding: 7px 0;
	text-align: left;
	box-sizing: border-box;
	border-bottom: 1px solid #ededed;



	);
	);
	);
	);
	);
	);
	);
	);
	);
	);
	);
	);
	);
	);
}

.back-list>a {
	padding-left: 30px;
}

.list-btn-position li span {
	position: absolute;
	right: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	top: 8px;
	z-index: 9;
	cursor: pointer;
}

.list-btn-position li a {
	color: #333;
	font-size: 15px;
	text-decoration: none;
	align-items: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	padding: 0px 25px 0px 0;
	transition: transform 0.3s;
}

.list-btn-position li:hover>a,
.list-btn-position li>i:hover {
	color: var(--color-hover-text);
}

.list-btn-position li>i {
	width: 25px;
	height: 25px;
	border: 1px solid transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
	position: absolute;
	top: 5px;
	right: 0px;
	color: grey;
	cursor: pointer;
	font-size: 12px;
}

.list-btn-position ul {
	margin-left: 5px;
	width: 100%;
	background: #FFF;
	list-style: none;
	padding-left: 0;
	display: none;
	list-style: square;
	padding-left: 15px;
}

.list-btn-position ul li a {
	padding-right: 0;
	padding-left: 0;
}

.list-btn-position ul li a>i {
	color: var(--color-title)
}

.list-btn-position ul li:last-child {
	border-bottom: none;
}

.box-pro-index-lf {
	display: flex !important;
	padding: 10px 0;
	position: relative;
}

.box-pro-index-lf:after {
	content: "";
	width: 100%;
	right: 0;
	left: 0;
	margin: 0 auto;
	bottom: 0;
	border-bottom: 1px solid #ededed;
	position: absolute;
}

.infor-pro-index-lf {
	line-height: 1;
	width: calc(60% - 7px);
}

.infor-pro-index-lf h3 {
	font-size: 14px;
	margin-bottom: 5px;
	font-family: var(--font-title-card);
}

.infor-pro-index-lf>p {
	font-size: 12px;
}

.infor-pro-index-lf h3 a:hover {
	color: var(--color-hover-text);
}

.box-pro-index-lf>.img-pro-index-lf {
	margin-right: 10px;
	width: 40%;
	border-radius: 5px;
}

.img-pro-index-lf img {
	width: 100%;
}

.box-onl-sup-left {
	position: relative;
	margin-bottom: 25px;
	padding-bottom: 20px;
	border: 1px solid lightgrey;
	border-top: unset;
}

.box-onl-sup-left p {
	padding-left: 10px;
}

.box-onl-sup-left img {
	width: 100%;
}

.scroll-dm-right {
	max-height: 350px;
	overflow-y: auto;
	margin: 0 -10px;
	width: calc(100% + 20px);
	padding: 0 10px;
}

.scroll-dm-right::-webkit-scrollbar {
	width: 5px;
}

.scroll-dm-right::-webkit-scrollbar-track {
	background: transparent;
}

.scroll-dm-right::-webkit-scrollbar-thumb {
	background: rgb(233 237 245);
}

.scroll-dm-right::-webkit-scrollbar-thumb:hover {
	background: #555;
}

.box-left-menu {
	padding-bottom: 1px;
	top: 70px;
	z-index: 9;
	padding: 10px;
	margin-bottom: 20px;
}

.list-btn-position li:last-child>a {
	border: none;
}

.catalogy-left h2 {
	background: #009343;
	color: #fff;
	text-transform: uppercase;
	font-size: 20px;
	text-align: center;
	line-height: 45px;
	position: relative;
	top: -1px;
	width: calc(100% + 2px);
	left: -1px;
	margin-bottom: 0;
}

/* Product  Detail */
.pro-detail-page,
.frame-news-page {
	width: calc(100% - 300px);
	margin-right: 30px;
	float: left;
}

.user-pages {
	padding: 30px 0;
}

.show-mobile {
	display: none;
}

/* mobile footer */
.fix-toolbar {
	background: var(--color-title);
	width: 100%;
	padding: 5px;
	bottom: 0;
	position: fixed;
	height: auto;
	line-height: 25px;
	left: 0;
	right: 0;
	margin: 0 auto;
	display: none;
	border-top: 1px solid #8585858a;
	z-index: 100;
}

.fix-toolbar ul {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px;
	list-style: none;
	margin: 0;
}

.fix-toolbar ul li {
	text-align: center;
	width: 20%;
}

.fix-toolbar ul li a {
	display: block;
	width: 100%;
	cursor: pointer;
	color: #fff;
	font-size: 30px;
}

.fix-toolbar ul li a img {
	height: 25px;
	width: auto;
}

.fix-toolbar img {
	vertical-align: top;
}

.fix-toolbar ul li a span {
	font-weight: 400;
	color: #fff;
	font-size: 13px;
	display: none;
}

.detail-page-left {
	width: calc(100% - 270px);
	margin-right: 20px;
	float: left;
}

.detail-page-right {
	width: 250px;
	float: right;
	margin-top: 10px;
}

.mm-navbar__title {
	font-family: var(--font-title);
	font-size: 18px;
}

.updateCityWarehouse {
	cursor: pointer;
	opacity: .8;
	font-size: 14px;
}

.updateCityWarehouse:hover {
	opacity: 1;
}

.row {
	width: 100%;
}

.cart-product {
	display: none;
}

/* ==========================================================================
   HOMEPAGE REDESIGN — merged from /opt/lampp/htdocs/aquaworld/styles.css
   ========================================================================== */

/* ==========================================================================
   AquaWorld — Modern Production Stylesheet
   Pixel-perfect Figma Design Fidelity + Modern UI/UX Micro-Interactions
   ========================================================================== */

:root {
  /* Brand Palette */
  --navy: #17324B;
  --navy-dark: #0f2336;
  --blue-900: #004D99;
  --blue-800: #006398;
  --blue-700: #1565C0;
  --blue-600: #1976D2;
  --blue-300: #6CBDFE;
  --blue-200: #CDE5FF;
  --blue-150: #D9EAFF;
  --blue-100: #E3EFFF;
  --blue-050: #EEF4FF;
  --paper: #F7F9FF;
  --white: #FFFFFF;

  /* Typography & Ink */
  --ink: #001D34;
  --ink-muted: #424752;
  --ink-soft: #727783;
  --ink-line: #C2C6D4;
  --ink-invert: #F7F9FF;

  /* Accents */
  --price-red: #A1000F;
  --sale-red: #C62123;
  --sale-glow: rgba(198, 33, 35, 0.4);
  --star-gold: #F59E0B;
  --success: #10B981;

  /* Fonts */
  /* --font-body intentionally omitted here: already defined in the original :root
     (style.css line 34, set by Task 1 to an Inter stack) — reused via cascade to
     avoid two competing definitions of the same variable name. */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Shadows & Elevation */
  --sh-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --sh-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --sh-md: 0 10px 15px -3px rgba(0, 77, 153, 0.08), 0 4px 6px -4px rgba(0, 77, 153, 0.05);
  --sh-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --sh-card-hover: 0 16px 32px -8px rgba(0, 77, 153, 0.16), 0 4px 12px -2px rgba(0, 29, 52, 0.06);
  --sh-float: 0 8px 24px -4px rgba(16, 44, 68, 0.22);
  --sh-glow-blue: 0 0 20px rgba(21, 101, 192, 0.35);

  /* Layout Dimensions */
  --bar-max: 1280px;
  --gutter: 80px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Transitions */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --speed: 0.24s;
}

/* --gutter (80px) is the side padding for every .section/.page-banner/
   .*-section across the whole redesigned site — home and every
   subpage. Never shrinking it left almost no room for content on a
   phone (80px + 80px out of a 400px viewport). Redefining it here
   cascades the fix to every rule that already references
   var(--gutter) with no per-rule changes needed. */
@media (max-width: 900px) {
  :root {
    --gutter: 32px;
  }
}
@media (max-width: 480px) {
  :root {
    --gutter: 16px;
  }
}

/* ---------- Global Reset & Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  user-select: none;
}

input {
  font: inherit;
}

a {
  color: var(--blue-800);
  text-decoration: none;
  transition: color var(--speed) var(--ease);
}
a:hover {
  color: var(--blue-700);
}

body.siteRedesign :focus-visible {
  outline: 2px solid var(--blue-700);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Vector Icon Base */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex-shrink: 0;
  vertical-align: middle;
  transition: transform var(--speed) var(--ease), color var(--speed) var(--ease);
}
i.icon {
  line-height: 1;
}

body.siteRedesign .shell {
  width: 100%;
  margin: 0 auto;
  position: relative;
  background: var(--paper);
}

body.siteRedesign .section {
  padding: 40px var(--gutter);
}
body.siteRedesign .section-shell {
  width: 100%;
  max-width: var(--bar-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 90;
  box-shadow: 0 4px 20px -4px rgba(0, 29, 52, 0.08);
  transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.site-header.is-stuck {
  box-shadow: 0 8px 30px -6px rgba(0, 29, 52, 0.2);
}
/* A mobile "condense" effect (collapsing the topbar+logo row via
   max-height while scrolling, keeping only the nav row visible) was
   tried and repeatedly glitched in real-device testing across several
   fix attempts, with no way to reproduce or verify it in this
   environment. Dropped in favor of just this plain box-shadow bump —
   simple and reliably correct beats a fragile "modern" effect. */

/* 1. Top Bar */
.topbar {
  height: 36px;
  background: var(--navy);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-invert);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.topbar-inner {
  height: 100%;
  width: 100%;
  max-width: var(--bar-max);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
}
.topbar-left, .topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.topbar-link {
  color: var(--ink-invert);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color var(--speed) var(--ease), opacity var(--speed) var(--ease);
}
.topbar-link:hover {
  color: var(--blue-300);
}
.topbar-lbl {
  /* opacity: 0.85; */
  color: #E9F1FF;
}
.topbar-sep {
  opacity: 0.35;
}

/* 2. Masthead */
.masthead {
  background: var(--white);
  border-top: 1px solid rgba(194, 198, 212, 0.25);
  border-bottom: 1px solid rgba(194, 198, 212, 0.25);
  padding: 20px 0;
}
.masthead-inner {
  height: 100%;
  width: 100%;
  max-width: var(--bar-max);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.logo {
  display: block;
  width: 200px;
  height: 40px;
  flex-shrink: 0;
  transition: transform var(--speed) var(--ease), filter var(--speed) var(--ease);
}
.logo:hover {
  transform: scale(1.02);
}
.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Search Bar & Instant Autocomplete */
.search-wrap {
  flex: 1 1 auto;
  max-width: 680px;
  position: relative;
}
.search-shell {
  position: relative;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(194, 198, 212, 0.6);
  display: flex;
  align-items: center;
  padding: 0 4px 0 12px;
  transition: all var(--speed) var(--ease);
}
.search-shell input[type="search"]::-webkit-search-cancel-button,
.search-shell input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.search-shell:focus-within {
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--blue-700), 0 0 0 4px rgba(21, 101, 192, 0.12);
}
.icon-search {
  width: 15px;
  height: 15px;
  font-size: 15px;
  color: var(--ink-soft);
}
.search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 8px;
  border: 0;
  background: transparent;
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
}
.search input::placeholder {
  color: var(--ink-soft);
}
.search-clear {
  width: 24px;
  height: 24px;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  margin-right: 4px;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.search-clear:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink);
}
.search-submit {
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--blue-700);
  color: var(--white);
  padding: 0 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 4px rgba(21, 101, 192, 0.2);
  transition: background var(--speed) var(--ease), transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.search-submit:hover {
  background: var(--blue-900);
  box-shadow: 0 4px 8px rgba(21, 101, 192, 0.3);
  transform: translateY(-1px);
}
.search-submit:active {
  transform: translateY(0);
}
.icon-search-sm {
  font-size: 12px;
  width: 12px;
  height: 12px;
}

/* Instant Search Dropdown */
.search-suggest-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 32px -4px rgba(0, 29, 52, 0.16), 0 0 0 1px rgba(194, 198, 212, 0.3);
  padding: 8px 0;
  z-index: 100;
  display: none;
  max-height: 380px;
  overflow-y: auto;
  animation: dropdownFadeIn 0.2s var(--ease);
}
.search-suggest-dropdown.is-open {
  display: block;
}
@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.search-suggest-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: var(--ink);
  transition: background var(--speed) var(--ease);
  cursor: pointer;
}
.search-suggest-item:hover, .search-suggest-item.is-selected {
  background: var(--blue-050);
}
.search-suggest-img {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--blue-100);
}
.search-suggest-info {
  flex: 1;
  min-width: 0;
}
.search-suggest-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-suggest-tag {
  font-size: 11px;
  color: var(--blue-800);
  font-weight: 500;
}
.search-suggest-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--price-red);
}

/* Masthead Actions: Hotline */
.masthead-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

/* Hotline */
.hotline {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hotline-badge {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: var(--blue-150);
  color: var(--blue-900);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 77, 153, 0.12);
  transition: transform var(--speed) var(--ease-bounce);
}
.hotline:hover .hotline-badge {
  transform: scale(1.1) rotate(5deg);
}
.icon-phone-head {
  font-size: 17px;
  width: 17px;
  height: 17px;
}
.hotline-numbers {
  display: flex;
  flex-direction: column;
}
.hotline-numbers a {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.1px;
  color: var(--blue-900);
}
.hotline-numbers a:hover {
  color: var(--blue-700);
}

/* 3. Navigation Bar */
.navbar {
  height: 44px;
  background: var(--blue-700);
  color: var(--white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.navbar-inner {
  height: 100%;
  width: 100%;
  max-width: var(--bar-max);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Category Toggle Button */
.cat-dropdown-wrap {
  position: relative;
  /* height: 100%; */
}
.cat-toggle {
  /* width: 240px; */
  height: 44px;
  background: var(--blue-900);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  transition: background var(--speed) var(--ease);
}
.cat-toggle:hover {
  background: #003d7a;
}
.icon-menu {
  font-size: 15px;
  width: 15px;
  height: 12px;
}
.icon-caret {
  font-size: 8px;
  width: 8px;
  height: 6px;
  margin-left: auto;
  transition: transform var(--speed) var(--ease);
}
.cat-toggle[aria-expanded="true"] .icon-caret {
  transform: rotate(180deg);
}

/* Category Panel (Dropdown) */
.cat-panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 604px;
  max-width: calc(100vw - 32px);
  background: var(--white);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  box-shadow: 0 24px 48px -12px rgba(0, 29, 52, 0.22), 0 0 0 1px rgba(194, 198, 212, 0.3);
  z-index: 95;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  overflow: hidden;
}
.cat-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cat-panel-head {
  padding: 16px 20px 12px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--blue-900);
  border-bottom: 1px solid rgba(194, 198, 212, 0.3);
}
.cat-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 10px;
}
.cat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--radius-md);
  position: relative;
  transition: background var(--speed) var(--ease);
}
.cat-item:hover {
  background: var(--blue-050);
}
.cat-thumb {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--blue-100);
  box-shadow: 0 1px 3px rgba(0, 29, 52, 0.12);
}
.cat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s var(--ease);
}
.cat-item:hover .cat-thumb img {
  transform: scale(1.12);
}
.cat-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.cat-item-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--speed) var(--ease);
}
.cat-item:hover .cat-item-title {
  color: var(--blue-800);
}
.cat-subtag {
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 500;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-item-arrow {
  width: 6px;
  height: 10px;
  flex-shrink: 0;
  color: var(--ink-line);
  opacity: 0;
  transform: translateX(-4px);
  transition: all var(--speed) var(--ease);
}
.cat-item:hover .cat-item-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--blue-700);
}
.cat-panel-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: var(--blue-050);
  border-top: 1px solid rgba(194, 198, 212, 0.3);
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-800);
  transition: background var(--speed) var(--ease);
}
.cat-panel-foot .icon-arrow-right {
  font-size: 12px;
  width: 11px;
  height: 11px;
}
.cat-panel-foot:hover {
  background: var(--blue-100);
  color: var(--blue-900);
}

/* Main Nav Links */
.mainnav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  flex-wrap: nowrap;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  justify-content: right;
}
.mainnav::-webkit-scrollbar {
  display: none;
}
.mainnav .nav-link {
  flex-shrink: 0;
}
.nav-link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--white);
  position: relative;
  padding: 12px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--speed) var(--ease), opacity var(--speed) var(--ease);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--blue-300);
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s var(--ease);
}
.nav-link:hover::after, .nav-link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-link:hover {
  color: var(--blue-300);
}
.nav-link.is-active {
  font-weight: 700;
  color: var(--white);
}

/* Hot Pill Badge */
.pill-hot {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--price-red);
  color: var(--white);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 0 8px rgba(161, 0, 15, 0.4);
  animation: pulseHot 2s infinite;
}
@keyframes pulseHot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); box-shadow: 0 0 12px rgba(161, 0, 15, 0.6); }
}

/* Mobile Burger */
.nav-burger {
  display: none;
  align-items: center;
  gap: 6px;
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
body.siteRedesign .hero {
  padding: 48px 24px;
  background: var(--blue-050);
}
body.siteRedesign .hero-stage {
  position: relative;
  height: 540px;
  width: 100%;
  max-width: var(--bar-max);
  margin: 0 auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--navy);
  box-shadow: var(--sh-lg);
  display: flex;
  align-items: center;
}
body.siteRedesign .hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease), visibility 0.6s;
  display: flex;
  align-items: center;
}
body.siteRedesign .hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
body.siteRedesign .hero-media-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
body.siteRedesign .hero-media {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 1.2s var(--ease), opacity 0.8s var(--ease);
}
body.siteRedesign .hero-stage:hover .hero-media {
  transform: scale(1.04);
}

/* Scrim Gradient */
body.siteRedesign .hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 50, 75, 0.88) 0%, rgba(23, 48, 75, 0.70) 38%, rgba(23, 50, 75, 0.15) 75%, rgba(23, 50, 75, 0) 100%);
  pointer-events: none;
}

/* Hero Content */
body.siteRedesign .hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 960px;
  padding: 40px 77px 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}
body.siteRedesign .hero-text-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 820px;
}
body.siteRedesign .hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 50px;
  letter-spacing: -1px;
  color: var(--paper);
  white-space: pre-line;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
body.siteRedesign .hero-lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(233, 241, 255, 0.92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
body.siteRedesign .hero-ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 8px;
}

/* Slide content fade-in (retriggers each time a slide becomes active) */
@keyframes heroContentFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
body.siteRedesign .hero-slide .hero-title,
body.siteRedesign .hero-slide .hero-lede,
body.siteRedesign .hero-slide .hero-ctas {
  opacity: 0;
}
body.siteRedesign .hero-slide.is-active .hero-title {
  animation: heroContentFadeUp 0.7s var(--ease) 0.15s forwards;
}
body.siteRedesign .hero-slide.is-active .hero-lede {
  animation: heroContentFadeUp 0.7s var(--ease) 0.3s forwards;
}
body.siteRedesign .hero-slide.is-active .hero-ctas {
  animation: heroContentFadeUp 0.7s var(--ease) 0.45s forwards;
}
@media (prefers-reduced-motion: reduce) {
  body.siteRedesign .hero-slide .hero-title,
  body.siteRedesign .hero-slide .hero-lede,
  body.siteRedesign .hero-slide .hero-ctas {
    opacity: 1;
    animation: none;
    transform: none;
  }
}
@media (max-width: 900px) {
  body.siteRedesign .hero {
    padding: 28px 16px;
  }
  body.siteRedesign .hero-stage {
    height: 460px;
  }
  body.siteRedesign .hero-content {
    padding: 28px 28px 36px;
  }
  body.siteRedesign .hero-title {
    font-size: 30px;
    line-height: 1.3;
  }
}
@media (max-width: 480px) {
  body.siteRedesign .hero-stage {
    height: 420px;
  }
  body.siteRedesign .hero-content {
    padding: 22px 18px 28px;
  }
  body.siteRedesign .hero-title {
    font-size: 24px;
  }
  body.siteRedesign .hero-lede {
    font-size: 13.5px;
  }
  body.siteRedesign .hero-ctas {
    flex-wrap: wrap;
    gap: 10px;
  }
}
@media (max-width: 640px) {
  /* Hide the hero's own prev/next arrows on mobile too, alongside
     every Owl carousel's nav buttons (see .owl-nav-overlay). The hero
     has no swipe/touch handling of its own (heroCarousel() only wires
     up these buttons + the dots), so navigation on mobile becomes the
     dots plus its existing 5.5s autoplay. */
  body.siteRedesign .hero-nav {
    display: none;
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 24px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.15px;
  transition: all var(--speed) var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--blue-700);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(21, 101, 192, 0.35);
}
.btn-primary:hover {
  background: var(--blue-900);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(21, 101, 192, 0.45);
}
.btn-primary:active {
  transform: translateY(0);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.92);
  color: var(--blue-700);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: var(--white);
  color: var(--blue-900);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.btn-ghost:active {
  transform: translateY(0);
}
.icon-arrow-right {
  font-size: 12px;
  width: 12px;
  height: 12px;
  transition: transform var(--speed) var(--ease);
}
.btn:hover .icon-arrow-right {
  transform: translateX(3px);
}
.icon-explore {
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: var(--blue-700);
}

/* Hero Carousel Controls */
body.siteRedesign .hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.85);
  color: var(--blue-900);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
  z-index: 3;
  transition: all var(--speed) var(--ease);
}
body.siteRedesign .hero-nav:hover {
  background: var(--white);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
body.siteRedesign .hero-prev {
  left: 20px;
}
body.siteRedesign .hero-next {
  right: 20px;
}
.icon-chev-left, .icon-chev-right {
  font-size: 13px;
  width: 8px;
  height: 13px;
}

/* Dots Pagination */
body.siteRedesign .hero-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
}
body.siteRedesign .hero-dot {
  height: 8px;
  width: 14px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.35s var(--ease);
  cursor: pointer;
}
body.siteRedesign .hero-dot.is-active, body.siteRedesign .hero-dot[aria-selected="true"] {
  width: 32px;
  background: var(--white);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   VALUES PROPS (CAM KẾT DỊCH VỤ)
   ========================================================================== */
body.siteRedesign .values-bar {
  background: var(--white);
  box-shadow: var(--sh-xs);
  padding: 16px 24px;
  border-bottom: 1px solid rgba(194, 198, 212, 0.2);
}
body.siteRedesign .values-container {
  width: 100%;
  max-width: var(--bar-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
body.siteRedesign .value-card {
  height: 68px;
  border-radius: var(--radius-md);
  background: rgba(238, 244, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(205, 229, 255, 0.4);
  transition: all var(--speed) var(--ease);
}
body.siteRedesign .value-card:hover {
  background: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--sh-sm);
  border-color: var(--blue-200);
}
body.siteRedesign .value-icon-box {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--blue-200);
  color: var(--blue-800);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--sh-xs);
  transition: transform var(--speed) var(--ease-bounce);
}
body.siteRedesign .value-card:hover .value-icon-box {
  transform: scale(1.08) rotate(3deg);
}
body.siteRedesign .value-icon-box img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.icon-value, .icon-truck, .icon-shield {
  font-size: 22px;
  width: 22px;
  height: 22px;
}
body.siteRedesign .value-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
body.siteRedesign .value-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.siteRedesign .value-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
  line-height: 1.35;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   GENERIC SCROLL-SNAP CAROUSEL (values-bar, category grid, product rows)
   ========================================================================== */
body.siteRedesign .owl-nav-wrap {
  position: relative;
  width: 100%;
  max-width: var(--bar-max);
  margin: 0 auto;
}
/* Owl v2 floats .owl-item side by side with no shared height, so a
   card with an extra row (tags, a second badge, a longer title) ends
   up taller than its neighbors and the row looks uneven at the
   bottom. .owl-stage already gets an explicit inline width from Owl
   sized to fit every item in one line (never wraps), so switching it
   to a flex row is safe and makes every .owl-item in it stretch to
   the tallest one automatically — the standard fix for this in v2. */
body.siteRedesign .owl-nav-wrap .owl-stage {
  display: flex;
}
body.siteRedesign .owl-nav-wrap .owl-item {
  display: flex;
  height: auto;
}
body.siteRedesign .owl-nav-wrap .owl-item > * {
  width: 100%;
}
/* .values-container/.category-grid's own display:grid is more specific
   than owl.carousel.css's plain .owl-carousel{display:block} — override
   it back for the combined-class (carousel) case so Owl's own stage
   layout isn't fought by our base grid rule. */
body.siteRedesign .values-container.owl-carousel,
body.siteRedesign .category-grid.owl-carousel,
body.siteRedesign .product-grid.owl-carousel,
body.siteRedesign .blog-grid.owl-carousel {
  display: block;
  grid-template-columns: none;
}
/* Safety net for the moment between page-load and Owl finishing init
   (it adds .owl-loaded once ready) — without this, the un-initialized
   element still has 8/5 equal-width grid columns fighting for space
   and can visually break/wrap. A plain horizontal scroll never looks
   broken, and this rule stops applying the instant .owl-loaded lands,
   handing off cleanly to Owl's own stage/transform layout. */
body.siteRedesign .values-container.owl-carousel:not(.owl-loaded),
body.siteRedesign .category-grid.owl-carousel:not(.owl-loaded),
body.siteRedesign .product-grid.owl-carousel:not(.owl-loaded),
body.siteRedesign .blog-grid.owl-carousel:not(.owl-loaded) {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.siteRedesign .values-container.owl-carousel:not(.owl-loaded) .value-card {
  flex: 0 0 240px;
}
body.siteRedesign .category-grid.owl-carousel:not(.owl-loaded) .category-card {
  flex: 0 0 150px;
}
body.siteRedesign .product-grid.owl-carousel:not(.owl-loaded) .row-product-card {
  flex: 0 0 260px;
}
body.siteRedesign .blog-grid.owl-carousel:not(.owl-loaded) .blog-card {
  flex: 0 0 300px;
}
/* Category/product grids: keep this guarantee even after Owl loads
   (unlike the values-bar above, which only needs it pre-init) — a
   plain overflow-x scroll on the outer element is harmless once Owl
   is active (its own .owl-stage-outer child clips internally and
   won't overflow this), but if Owl ever fails to reach .owl-loaded
   here, the row must still never wrap onto a second line below the
   section title. */
body.siteRedesign .category-grid.owl-carousel,
body.siteRedesign .product-grid.owl-carousel,
body.siteRedesign .blog-grid.owl-carousel {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.siteRedesign .values-container.owl-carousel .value-card,
body.siteRedesign .category-grid.owl-carousel .category-card,
body.siteRedesign .product-grid.owl-carousel .row-product-card,
body.siteRedesign .blog-grid.owl-carousel .blog-card {
  width: 100%;
}
body.siteRedesign .owl-nav-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  /* Owl injects .owl-prev/.owl-next as direct children of the custom
     navContainer element itself when one is given — it does NOT wrap
     them in an .owl-nav div in that case (only when Owl builds its own
     default container). So the flex/space-between goes here, not on
     a nested .owl-nav that will never exist. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -18px;
}
body.siteRedesign .owl-nav-overlay .owl-prev,
body.siteRedesign .owl-nav-overlay .owl-next {
  pointer-events: auto;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--blue-800);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-sm);
  border: 1px solid rgba(194, 198, 212, 0.4);
  font-size: 13px;
  transition: all var(--speed) var(--ease);
}
body.siteRedesign .owl-nav-overlay .owl-prev:hover,
body.siteRedesign .owl-nav-overlay .owl-next:hover {
  background: var(--blue-700);
  color: var(--white);
  border-color: var(--blue-700);
}
body.siteRedesign .owl-nav-overlay .owl-prev.disabled,
body.siteRedesign .owl-nav-overlay .owl-next.disabled {
  opacity: 0.35;
  pointer-events: none;
}
@media (max-width: 640px) {
  /* Every Owl carousel site-wide (values-bar, category grid, featured
     product rows, blog section, product-detail gallery thumbs, ...)
     shares this one nav-button pattern — hiding it here covers all of
     them at once. Swiping/dragging still works (data-mousedrag on
     each carousel), this just removes the arrow buttons on phones. */
  body.siteRedesign .owl-nav-overlay .owl-prev,
  body.siteRedesign .owl-nav-overlay .owl-next {
    display: none;
  }
}

/* ==========================================================================
   COMMON SECTION HEADINGS
   ========================================================================== */
body.siteRedesign .center-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32px;
}
body.siteRedesign .section-title-center {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.6px;
  color: var(--blue-900);
  text-align: center;
}
body.siteRedesign .accent-bar {
  width: 48px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--blue-300);
  margin-top: 10px;
}

/* Section Tone Backgrounds */
body.siteRedesign .tone-paper {
  background: var(--paper);
}
body.siteRedesign .tone-blue {
  background: var(--blue-050);
}

/* ==========================================================================
   CATEGORIES SECTION (DANH MỤC SẢN PHẨM)
   ========================================================================== */
body.siteRedesign .categories-section {
  background: var(--paper);
  padding: 48px var(--gutter);
}
body.siteRedesign .category-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
}
body.siteRedesign .category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 8px;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--sh-xs);
  border: 1px solid rgba(194, 198, 212, 0.25);
  transition: all var(--speed) var(--ease);
  text-align: center;
}
body.siteRedesign .category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--blue-200);
}
body.siteRedesign .category-thumb-wrap {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--blue-100);
  padding: 3px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: transform var(--speed) var(--ease);
}
body.siteRedesign .category-card:hover .category-thumb-wrap {
  transform: scale(1.08);
}
body.siteRedesign .category-thumb {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  background-size: cover;
  background-position: center;
}
body.siteRedesign .category-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
body.siteRedesign .category-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
  line-height: 1.35;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ==========================================================================
   FEATURED PRODUCTS SECTION (SẢN PHẨM NỔI BẬT NHẤT)
   ========================================================================== */
body.siteRedesign .featured-section {
  background: var(--blue-050);
  padding: 48px var(--gutter);
}
body.siteRedesign .featured-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  /* was flex-wrap:wrap — with the real (scrollable) tabs now sized to
     share the row instead of shrink-to-fit, .featured-tools stayed
     wide enough to still trip this wrap and drop below .section-title
     on its own line. Keep both on one row; .featured-tools shrinks and
     scrolls internally instead (see .featured-tools/.tabs below). */
  flex-wrap: nowrap;
}
body.siteRedesign .featured-head .section-title {
  flex-shrink: 0;
}
body.siteRedesign .section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.6px;
  color: var(--blue-900);
}
body.siteRedesign .featured-tools {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Must be able to shrink below its content's natural width so
     .featured-head keeps this whole block on the same row as
     .section-title instead of wrapping it below. */
  flex: 1 1 auto;
  min-width: 0;
  /* was flex-wrap:wrap — with real category tabs (up to 8+ "Tất cả",
     far more than the design's 5 short demo labels) that pushed
     .link-more onto a new line once #featuredTabs got too wide; the
     tabs now scroll horizontally in their own lane instead. */
  flex-wrap: nowrap;
  min-width: 0;
  justify-content: right;
}
body.siteRedesign .tabs-wrap {
  /* Capped, not flex:1 — keep it close to the design's visual length
     instead of stretching to fill the row; the real category count
     (8+) still overflows this on purpose and scrolls internally. */
  position: relative;
  flex: 0 1 auto;
  max-width: 420px;
  min-width: 0;
}
@media (max-width: 640px) {
  /* On a phone, sharing one row with .section-title left the tabs a
     sliver wide. Let .featured-tools drop to its own full-width line
     below the title instead — the tabs still scroll horizontally
     within that line, just with real room to work with. */
  body.siteRedesign .featured-head {
    flex-wrap: wrap;
  }
  body.siteRedesign .featured-tools {
    flex-basis: 100%;
  }
  body.siteRedesign .tabs-wrap {
    max-width: 100%;
  }
}
body.siteRedesign .tabs {
  height: 38px;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--sh-xs);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.siteRedesign .tabs::-webkit-scrollbar {
  display: none;
}
body.siteRedesign .tabs .tab {
  flex-shrink: 0;
}
/* Signals there are more tabs to scroll to without a native scrollbar
   (which renders inconsistently thick/thin across platforms and read
   as a rendering bug rather than an intentional affordance). Right
   edge only: tabs always start scrolled to the left, so this is the
   one edge that needs to hint at continuation on first paint. */
body.siteRedesign .tabs-wrap::after {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  right: 0;
  width: 28px;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: linear-gradient(to left, var(--white) 25%, rgba(255, 255, 255, 0));
  pointer-events: none;
}
body.siteRedesign .featured-tools .link-more {
  flex-shrink: 0;
}
body.siteRedesign .tab {
  padding: 6px 14px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-muted);
  white-space: nowrap;
  transition: all var(--speed) var(--ease);
}
body.siteRedesign .tab:hover {
  color: var(--blue-700);
}
body.siteRedesign .tab.is-active,
body.siteRedesign .tab[aria-selected="true"],
body.siteRedesign .tab.active {
  background: var(--blue-700);
  color: var(--white);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(21, 101, 192, 0.25);
}
body.siteRedesign .link-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blue-800);
  transition: all var(--speed) var(--ease);
}
body.siteRedesign .link-more:hover {
  color: var(--blue-700);
  transform: translateX(2px);
}
body.siteRedesign .link-more.is-strong {
  font-weight: 700;
}

/* Featured 5-column Grid */
/* The grid display lives on .ajax-grid (an inner wrapper Http.php's
   loadData() always outputs around just the cards), not on
   .featured-grid itself — .featured-grid is also the AJAX target
   whose innerHTML gets replaced with cards + a trailing
   .pagination-ajax; if .featured-grid itself were display:grid, that
   pagination bar would become a grid item and misrender. */
body.siteRedesign .featured-grid .ajax-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) {
  body.siteRedesign .featured-grid .ajax-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 860px) {
  body.siteRedesign .featured-grid .ajax-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}
@media (max-width: 640px) {
  /* Stays 2-up down to the smallest phones — see .product-grid-static
     for the same reasoning (a single stretched-wide card read worse
     than a tighter 2-column grid even at ~360-400px). */
  body.siteRedesign .featured-grid .ajax-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
@media (max-width: 420px) {
  body.siteRedesign .featured-grid .ajax-grid {
    gap: 8px;
  }
}

/* Product Card (Unified Standard) */
body.siteRedesign .product-card {
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--sh-xs);
  border: 1px solid rgba(194, 198, 212, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: all 0.3s var(--ease);
}
body.siteRedesign .product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-card-hover);
  border-color: var(--blue-200);
}
body.siteRedesign .product-card.is-hidden {
  display: none !important;
}

/* Card Media */
body.siteRedesign .card-media {
  position: relative;
  height: 234px;
  background: var(--blue-100);
  overflow: hidden;
}
body.siteRedesign .card-media-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s var(--ease);
}
body.siteRedesign .product-card:hover .card-media-img {
  transform: scale(1.08);
}

/* Badges */
body.siteRedesign .card-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
body.siteRedesign .card-badges-right {
  left: auto;
  right: 10px;
}
body.siteRedesign .badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
body.siteRedesign .badge-sale {
  background: var(--price-red);
  color: var(--white);
}
body.siteRedesign .badge-info {
  background: var(--blue-300);
  color: #004b75;
}
body.siteRedesign .badge-soft {
  background: var(--blue-200);
  color: var(--blue-900);
  font-weight: 600;
}
body.siteRedesign .badge-ph {
  position: absolute;
  bottom: 10px;
  left: 10px;
  height: 20px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.94);
  color: var(--blue-900);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(4px);
  z-index: 2;
}
.icon-drop {
  font-size: 11px;
  width: 9px;
  height: 11px;
  color: var(--blue-800);
}

/* Wishlist Heart Button */
.btn-wishlist {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4px);
  z-index: 2;
  transition: all var(--speed) var(--ease);
}
.btn-wishlist:hover {
  background: var(--white);
  color: var(--price-red);
  transform: scale(1.1);
}
.btn-wishlist.is-active, .btn-wishlist[aria-pressed="true"] {
  color: var(--price-red);
  animation: heartBeat 0.4s var(--ease-bounce);
}
@keyframes heartBeat {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.icon-heart {
  font-size: 15px;
  width: 15px;
  height: 14px;
}

/* Card Body */
body.siteRedesign .card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

/* Rating & Stars */
body.siteRedesign .rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
body.siteRedesign .stars {
  display: flex;
  align-items: center;
  gap: 2px;
}
.icon-star {
  font-size: 12px;
  width: 12px;
  height: 11px;
  color: #F59E0B;
}
body.siteRedesign .rating-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
}

/* Titles */
body.siteRedesign .card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  height: 39px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color var(--speed) var(--ease);
}
body.siteRedesign .card-title:hover {
  color: var(--blue-700);
}

/* Feature Tags */
body.siteRedesign .card-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
/* .product-card has no padding of its own (only .card-body does), so
   .card-tags — a sibling sitting between .card-media and .card-body —
   needs its own inset to match .card-body's 14px, plus top breathing
   room so it doesn't sit flush against the image above. .row-product-card
   doesn't need this: that card has padding+gap on itself already, so
   .card-tags there just falls in line as a normal flex child. */
body.siteRedesign .product-card > .card-tags {
  padding: 10px 14px 0;
  margin: 0;
}
body.siteRedesign .tag-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: var(--blue-100);
  color: var(--blue-800);
  font-size: 11px;
  font-weight: 500;
}

/* Price Row */
body.siteRedesign .card-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
}
body.siteRedesign .price-current {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--price-red);
}
/* Renamed from .price-old to avoid collision with legacy .price-old (style.css line ~1361, still used by old product pages) */
body.siteRedesign .price-old-new {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: line-through;
}

/* ==========================================================================
   4-COLUMN CATEGORY ROWS (Cá Cảnh, Cây Thủy Sinh, Thiết Bị)
   ========================================================================== */
body.siteRedesign .row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
body.siteRedesign .row-head-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
body.siteRedesign .row-icon-box {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--blue-200);
  color: var(--blue-800);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--sh-xs);
  transition: transform var(--speed) var(--ease-bounce);
}
body.siteRedesign .row-head:hover .row-icon-box {
  transform: scale(1.08) rotate(-3deg);
}
.icon-sec-fish, .icon-sec-plant, .icon-sec-eq {
  font-size: 22px;
  width: 22px;
  height: 22px;
}
body.siteRedesign .row-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.5px;
  color: var(--blue-900);
}
body.siteRedesign .row-subtitle {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--ink-muted);
}
.icon-chev-right-sm {
  font-size: 10px;
  width: 6px;
  height: 10px;
}

/* 4-column Product Grid */
body.siteRedesign .product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Row Card Variant */
body.siteRedesign .row-product-card {
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--sh-xs);
  border: 1px solid rgba(194, 198, 212, 0.25);
  display: flex;
  flex-direction: column;
  padding: 14px;
  gap: 10px;
  transition: all 0.3s var(--ease);
}
body.siteRedesign .row-product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-card-hover);
  border-color: var(--blue-200);
}
body.siteRedesign .row-card-media {
  position: relative;
  height: 268px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--blue-100);
}
body.siteRedesign .row-card-media .card-media-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s var(--ease);
}
body.siteRedesign .row-product-card:hover .card-media-img {
  transform: scale(1.08);
}
body.siteRedesign .row-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 4px;
}
/* ==========================================================================
   FLASH DEAL PROMO BANNER
   ========================================================================== */
body.siteRedesign .promo-section {
  padding: 32px var(--gutter);
  background: var(--blue-100);
}
body.siteRedesign .promo-card {
  width: 100%;
  max-width: var(--bar-max);
  margin: 0 auto;
  border-radius: var(--radius-xl);
  background: linear-gradient(90deg, #004D99 0%, #1565C0 50%, #006398 100%);
  box-shadow: var(--sh-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 48px 56px;
  gap: 32px;
  position: relative;
  overflow: hidden;
}
body.siteRedesign .promo-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, rgba(108, 189, 254, 0.2) 0%, transparent 70%);
  pointer-events: none;
}
body.siteRedesign .promo-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 580px;
  z-index: 2;
}
body.siteRedesign .pill-flash-badge {
  align-self: flex-start;
  border-radius: var(--radius-sm);
  background: var(--sale-red);
  color: var(--white);
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px var(--sale-glow);
  animation: flashPulse 2.5s infinite;
}
@keyframes flashPulse {
  0%, 100% { box-shadow: 0 2px 8px var(--sale-glow); }
  50% { box-shadow: 0 2px 18px rgba(198, 33, 35, 0.7); }
}
body.siteRedesign .promo-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.6px;
  color: var(--white);
  text-transform: uppercase;
}
body.siteRedesign .promo-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(233, 241, 255, 0.92);
}
body.siteRedesign .promo-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.btn-sale {
  background: var(--sale-red);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(198, 33, 35, 0.4);
}
.btn-sale:hover {
  background: #a91719;
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(198, 33, 35, 0.55);
}
body.siteRedesign .promo-free-ship {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #DAE5FF;
  font-size: 12.5px;
  font-weight: 500;
}
body.siteRedesign .promo-free-ship .icon-truck {
  width: 17px;
  height: 16px;
}

/* Glassmorphism Countdown */
body.siteRedesign .countdown-glass {
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 28px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 2;
}
body.siteRedesign .countdown-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--blue-200);
  text-transform: uppercase;
  margin-bottom: 12px;
}
body.siteRedesign .countdown-boxes {
  display: flex;
  align-items: center;
  gap: 10px;
}
body.siteRedesign .count-box {
  width: 64px;
  height: 66px;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform var(--speed) var(--ease);
}
body.siteRedesign .count-box:hover {
  transform: translateY(-2px);
}
body.siteRedesign .count-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.2px;
  color: var(--blue-900);
}
body.siteRedesign .count-unit {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-muted);
  margin-top: 2px;
}
body.siteRedesign .count-colon {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--blue-200);
  margin-top: -8px;
}
@media (max-width: 860px) {
  body.siteRedesign .promo-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 28px;
  }
  body.siteRedesign .countdown-glass {
    align-self: stretch;
  }
}
@media (max-width: 460px) {
  body.siteRedesign .promo-card {
    padding: 24px 18px;
  }
  body.siteRedesign .promo-title {
    font-size: 22px;
  }
  body.siteRedesign .countdown-boxes {
    justify-content: center;
    flex-wrap: wrap;
  }
  body.siteRedesign .count-box {
    width: 56px;
    height: 58px;
  }
}

/* ==========================================================================
   BLOG SECTION (GÓC CHIA SẺ & KIẾN THỨC)
   ========================================================================== */
body.siteRedesign .blog-section {
  background: var(--paper);
  padding: 48px var(--gutter);
}
body.siteRedesign .blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 860px) {
  body.siteRedesign .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (max-width: 560px) {
  body.siteRedesign .blog-grid {
    grid-template-columns: 1fr;
  }
}
body.siteRedesign .blog-card {
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--sh-xs);
  border: 1px solid rgba(194, 198, 212, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s var(--ease);
}
body.siteRedesign .blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-card-hover);
  border-color: var(--blue-200);
}
body.siteRedesign .blog-media {
  position: relative;
  height: 208px;
  overflow: hidden;
  background: var(--blue-100);
}
body.siteRedesign .blog-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
body.siteRedesign .blog-card:hover .blog-img {
  transform: scale(1.08);
}
body.siteRedesign .blog-category-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  border-radius: var(--radius-sm);
  background: var(--blue-700);
  color: var(--white);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
body.siteRedesign .blog-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}
body.siteRedesign .blog-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
body.siteRedesign .meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
body.siteRedesign .blog-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  transition: color var(--speed) var(--ease);
}
body.siteRedesign .blog-card:hover .blog-title {
  color: var(--blue-700);
}
body.siteRedesign .blog-excerpt {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.siteRedesign .blog-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue-900);
  margin-top: 16px;
  transition: all var(--speed) var(--ease);
}
body.siteRedesign .blog-link:hover {
  color: var(--blue-700);
  transform: translateX(4px);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--navy);
  border-top: 1px solid rgba(194, 198, 212, 0.2);
  color: var(--ink-invert);
}
.footer-main {
  width: 100%;
  max-width: var(--bar-max);
  margin: 0 auto;
  padding: 48px 24px 36px;
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
  gap: 32px;
}
.footer-brand-title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: bold;
  color: var(--blue-200);
  letter-spacing: 0.5px;
}
.footer-brand-desc {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #E9F1FF;
}
.footer-assurances {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.assure-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--blue-200);
}
.assure-item .icon {
  width: 18px;
  height: 18px;
  color: var(--blue-300);
}
.footer-heading {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--paper);
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-nav a {
  color: rgba(233, 241, 255, 0.78);
  font-size: 12.5px;
  transition: all var(--speed) var(--ease);
  font-size: 14px;
}
.footer-nav a:hover {
  color: var(--blue-300);
  transform: translateX(3px);
}
.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: rgba(233, 241, 255, 0.8);
  margin-bottom: 16px;
}
.footer-contact-info a {
  color: var(--blue-300);
}
.footer-contact-info a:hover {
  text-decoration: underline;
}

/* Newsletter */
.newsletter-label {
  display: block;
  font-size: 12px;
  color: rgba(233, 241, 255, 0.75);
  margin-bottom: 8px;
}
.newsletter-input-group {
  position: relative;
  height: 40px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(194, 198, 212, 0.35);
  display: flex;
}
.newsletter-input-group input {
  flex: 1;
  background: rgba(207, 229, 255, 0.15);
  border: 0;
  padding: 0 14px;
  font-size: 13px;
  color: var(--white);
  outline: none;
}
.newsletter-input-group input::placeholder {
  color: rgba(194, 198, 212, 0.7);
}

.newsletter-submit:hover {
  background: var(--blue-900);
}
.newsletter-msg {
  font-size: 12px;
  margin: 6px 0 0;
  min-height: 18px;
}

/* Footer Bottom Bar */
.footer-bottom {
  border-top: 1px solid rgba(194, 198, 212, 0.15);
  background: var(--navy-dark);
}
.footer-bottom-inner {
  width: 100%;
  max-width: var(--bar-max);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(233, 241, 255, 0.6);
  flex-wrap: wrap;
  gap: 12px;
}
.legal-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}
.legal-nav a {
  color: rgba(233, 241, 255, 0.6);
}
.legal-nav a:hover {
  color: var(--blue-300);
}

/* ==========================================================================
   FLOATING ACTION RAIL
   ========================================================================== */
.floating-rail {
  position: fixed;
  right: 20px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  z-index: 85;
}
.rail-btn {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-float);
  transition: transform 0.25s var(--ease-bounce), box-shadow 0.25s var(--ease);
  position: relative;
}
.rail-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}
.rail-phone {
  background: var(--blue-700);
  color: var(--white);
}
.rail-pulse {
  position: absolute;
  inset: -4px;
  border-radius: var(--radius-full);
  border: 2px solid var(--blue-700);
  animation: pulseRing 2s infinite;
  pointer-events: none;
}
@keyframes pulseRing {
  0% { transform: scale(0.95); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}
.rail-zalo {
  background: var(--blue-300);
  color: var(--white);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
}
.rail-chat {
  background: var(--blue-900);
  color: var(--white);
}
.online-indicator {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--success);
  border: 2px solid var(--white);
}
.rail-send {
  background: var(--white);
  color: var(--blue-900);
  border: 1px solid rgba(194, 198, 212, 0.4);
}
.rail-top {
  background: var(--navy);
  color: var(--white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--speed) var(--ease);
}
.rail-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.rail-top:hover {
  background: var(--blue-700);
}

/* ==========================================================================
   TOAST NOTIFICATION
   ========================================================================== */
body.siteRedesign .toast-container {
  position: fixed;
  bottom: 32px;
  left: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 120;
  pointer-events: none;
}
body.siteRedesign .toast-item {
  min-width: 280px;
  max-width: 400px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 10px 25px -3px rgba(0, 29, 52, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 500;
  pointer-events: auto;
  animation: toastSlideUp 0.3s var(--ease-bounce);
  position: relative;
  overflow: hidden;
}
@keyframes toastSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
body.siteRedesign .toast-item.is-hiding {
  animation: toastSlideDown 0.3s var(--ease) forwards;
}
@keyframes toastSlideDown {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(20px); opacity: 0; }
}
body.siteRedesign .toast-icon {
  width: 20px;
  height: 20px;
  color: var(--blue-300);
  flex-shrink: 0;
}
body.siteRedesign .toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--blue-300);
  animation: toastTimer 2.6s linear forwards;
}
@keyframes toastTimer {
  from { width: 100%; }
  to { width: 0%; }
}

/* ==========================================================================
   SCROLL REVEAL ANIMATIONS
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   MODERN UI EFFECTS
   Glassmorphism header, scroll progress, button glow/shine, shimmer accents
   ========================================================================== */


/* Frosted-glass header once the page scrolls */
.masthead,
.navbar {
  transition: background-color 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
}
.site-header.is-stuck .masthead {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.site-header.is-stuck .navbar {
  /* background-color: rgba(21, 101, 192, 0.86); */
  /* backdrop-filter: blur(14px) saturate(1.4); */
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

/* Shine sweep for primary call-to-action buttons */
.btn {
  position: relative;
  overflow: hidden;
}
.btn-primary::before,
.btn-sale::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-18deg);
  transition: left 0.65s var(--ease);
  pointer-events: none;
}
.btn-primary:hover::before,
.btn-sale:hover::before {
  left: 130%;
}

/* Pulsing glow accent for hero/promo CTAs */
@keyframes glowPulseBlue {
  0%, 100% { box-shadow: 0 4px 12px rgba(21, 101, 192, 0.35), 0 0 0 0 rgba(21, 101, 192, 0.45); }
  50% { box-shadow: 0 4px 20px rgba(21, 101, 192, 0.5), 0 0 0 9px rgba(21, 101, 192, 0); }
}
.btn-glow {
  animation: glowPulseBlue 2.6s ease-in-out infinite;
}
.btn-glow:hover {
  animation-play-state: paused;
}
@keyframes glowPulseRed {
  0%, 100% { box-shadow: 0 4px 14px rgba(198, 33, 35, 0.4), 0 0 0 0 rgba(198, 33, 35, 0.5); }
  50% { box-shadow: 0 4px 22px rgba(198, 33, 35, 0.55), 0 0 0 9px rgba(198, 33, 35, 0); }
}
.btn-glow-red {
  animation: glowPulseRed 2.2s ease-in-out infinite;
}
.btn-glow-red:hover {
  animation-play-state: paused;
}

/* Shimmering accent bar under section titles */
body.siteRedesign .accent-bar {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--blue-300), var(--blue-700), var(--blue-300));
  background-size: 200% 100%;
  animation: accentShimmer 3.2s linear infinite;
}
@keyframes accentShimmer {
  0% { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}

/* Subtle glowing ring on product-card hover */
body.siteRedesign .product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(21, 101, 192, 0);
  transition: box-shadow 0.35s var(--ease);
  pointer-events: none;
}
body.siteRedesign .product-card:hover::after {
  box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.25);
}

body.siteRedesign .blog-img-cover {
  width: 100%;
  height: 100%;
  background-size: 100% 103.394%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  transition: transform 0.5s var(--ease);
}
body.siteRedesign .blog-card:hover .blog-img-cover {
  transform: scale(1.06);
}

/* ==========================================================================
   Merged from resources/css/product.css (wishlist button + rubberBand anim)
   ========================================================================== */
.yeuthich{
    border: 1px solid #dd2534;
    color: #dd2534;
    background: #dd2534;
    color: #fff;
    text-decoration: none;
}
.yeuthich span{margin-left:6px}
.yeuthich:focus{animation: rubberBand 1s;box-shadow:none}
@keyframes rubberBand {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    30% {
        -webkit-transform: scale3d(1.25,.75,1);
        transform: scale3d(1.25,.75,1)
    }

    40% {
        -webkit-transform: scale3d(.75,1.25,1);
        transform: scale3d(.75,1.25,1)
    }

    50% {
        -webkit-transform: scale3d(1.15,.85,1);
        transform: scale3d(1.15,.85,1)
    }

    65% {
        -webkit-transform: scale3d(.95,1.05,1);
        transform: scale3d(.95,1.05,1)
    }

    75% {
        -webkit-transform: scale3d(1.05,.95,1);
        transform: scale3d(1.05,.95,1)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.animate__rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand
}

/* Merged from resources/css/account.css */
/* login modal */
#modal-login {}

#modal-login .modal-body {
    padding: 0px;
}

#modal-login .modal-header {
    position: relative;
    padding: 0px;
    border: 0;
}

#modal-login .modal-header .close {
    position: absolute;
    top: -27px;
    right: -27px;
}

#modal-login .modal-content {
    background: transparent;
    border: 0;
}

.wrap-user {
    width: 100%;
    /* max-width:550px; */
    margin: auto;
    /* border:1px solid #bce8f1; */
    /* border-radius:5px; */
}

.title-user {
    background-color: #d9edf7;
    padding: 12px 15px;
    border-radius: 5px 5px 0px 0px;
}

.title-user span {
    color: #31708f;
}

.title-user a {
    color: #0056b3;
    font-size: 12px;
}

.form-user {
    padding: 20px 15px;
    box-shadow: 0 0 20px #c5c5c573;
    border-radius: 8px;
}

.input-user {
    margin-bottom: 0.75rem;
}

.input-user input {
    font-size: 14px;
}

.button-user {
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.button-user input {
    font-size: 14px;
}

.checkbox-user,
.radio-user {
    cursor: pointer;
    width: 100%;
}

.checkbox-user input {
    top: calc(50% - 1.25rem/2);
    height: auto;
}

.checkbox-user label {
    font-size: 14px;
    cursor: pointer;
}

.checkbox-user label::before,
.checkbox-user label::after {
    top: calc(50% - 1rem/2);
}

.radio-user {
    margin-right: 1rem;
}

.radio-user:last-child {
    margin-right: 0px;
}

.radio-user label::before,
.radio-user label::after {
    top: calc(50% - 1rem/2);
}

.note-user {
    font-size: 14px;
    border-top: 1px solid #ddd;
    padding-top: 0.5rem;
}

.invalid-feedback {
    padding-left: 5px
}

.user-pages {
    background: #ecf0f3;
}

.wrap-user input {
    caret-color: red;
}

.wrap-user {

    /* background: #ecf0f3; */

    place-items: center;
}

.wrap-user .container {
    position: relative;
    /* border-radius: 8px; */
    padding: 20px;
    box-sizing: border-box;
    max-width: 450px;
    background: #fff;
}

.wrap-user .container.form-register {
    max-width: 1000px;
}

.box-user {
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
}

.brand-logo {
    height: 100px;
    width: 100px;
    background: url("https://hrm.bmweb.vn/upload/photo/logo-9575-4288.png");
    margin: auto;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 7px 7px 10px #cbced1, -7px -7px 10px white;
    background-repeat: no-repeat;
    background-size: cover;
}

.brand-title {
    font-weight: 600;
    font-size: 20px;
    color: #2d66b1;
    margin-bottom: 15px;
}

.inputs {
    text-align: left;
    margin-top: 30px;
}

.wrap-user label,
.wrap-user input.form-control,
.wrap-user input.btn {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    outline: none;
    box-sizing: border-box;
}

.wrap-user label {
    margin-bottom: 4px;
}

.wrap-user label:nth-of-type(2) {
    margin-top: 12px;
}

.wrap-user input.form-control::placeholder {
    color: gray;
}

.wrap-user input.form-control {
    /* background: #e8f0fe; */
    padding: 10px;
    padding-left: 20px;
    height: 40px;
    font-size: 14px;
    border: 1px solid #E8ECF4;
}

.wrap-user input.btn {
    color: white;
    margin-top: 15px;
    background: #2d66b1;
    height: 40px;
    /* border-radius: 20px; */
    cursor: pointer;
    font-weight: 900;
    box-shadow: 6px 6px 6px #cbced1, -6px -6px 6px white;
    transition: 0.5s;
}

.wrap-user input.btn:hover {
    box-shadow: none;
}

.wrap-user a {
    position: relative;
    text-decoration: none;
    border-radius: 10px;
    padding: 2px;
    color: #0056b3;
    font-size: 12px;
}

.wrap-user a:hover {
    color: #2d66b1;
}

.wrap-user h1 {
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
}

.wrap-user .input-group {
    flex-wrap: nowrap;
}

.account-list li a {

    cursor: pointer;

    font-size: 12px;

    color: #757575;

    letter-spacing: 0;

    line-height: 22px;

    text-decoration: none;

    padding: 0px;

    display: block;
}

.account-list li a.active {
    color: #2d66b1;
    font-weight: 600;
}

.title-account {

    font-size: 15px;

    font-weight: 700;

    margin-bottom: 10px;

}

.form-flex-col {

    height: 40px;

    border: 1px solid #DDD;

    outline: none;

    padding: 0px 10px;

    margin-right: -1px;

    flex-grow: 1
}

.form-flex-col:last-child {

    margin-right: 0;

}

.btn-ap {

    display: inline-block;

    height: 20px;

    text-align: center;

    line-height: 20px;

    background: #FFF;

    color: #FFF;

    padding: 0px 4px;

    border: 1px solid;

    border-radius: 4px;

    font-size: 13px;

}

.btn-ap.r {
    background: rgb(45 102 177);
    border-color: rgb(45 102 177);
    color: #fff;
    font-size: 13px;
    height: unset;
    padding: 2px 10px;
    font-size: 12px;
}

.btn-ap.r:hover {
    color: #fff
}

.btn-ap.b {

    background: rgba(0, 154, 255, 0.6);

    border-color: rgba(0, 154, 255, 0.6);

}

.btn-ap.g {

    background: rgba(11, 175, 0, 0.6);

    border-color: rgba(11, 175, 0, 0.6);

}

.set_default {

    color: #46A049;

}

.check-default {

    cursor: pointer;

}

.dataTables_wrapper .dataTables_paginate .paginate_button {

    box-sizing: border-box;

    display: inline-block;

    min-width: 1.5em;

    padding: 4px 10px;

    margin-left: 2px;

    text-align: center;

    text-decoration: none !important;

    cursor: pointer;

    cursor: hand;

    color: #333 !important;

    border: 1px solid transparent;

    border-radius: 2px;

    border: 1px solid #FFF !important;

}

table.dataTable,
table.dataTable th,
table.dataTable td {

    font-size: 13px;

}

table.dataTable {

    width: 100%;

    float: left;

    margin-top: 15px;

    margin-bottom: 15px;

}

table.dataTable tfoot th,
table.dataTable tfoot td {

    padding: 10px 10px 6px 10px;

}

table.dataTable tfoot th,
table.dataTable tfoot td {

    border-top: 1px solid #DDD;

}

table.dataTable {

    min-width: 938px;

    margin-top: 0px;

    margin-bottom: 0px;

}

.thongtin-donhang {

    font-size: 16px;

    margin-bottom: 20px;

    font-weight: 700;

    color: var(--color-key)
}

.row-order {

    margin-bottom: 10px;

}

.row-order label {

    width: 100px;

}

.group-btn-cart-view {
    display: flex;
    gap: 10px;
}

.group-btn-cart-view>a {
    padding: 9px 20px;
    background: #2d66b1;
    color: #fff;
    border-radius: 3px;
}

.group-btn-cart-view>a:nth-child(1) {}

.group-btn-cart-view>a:nth-child(2) {}

.box-menu-account .box-mnacc-header-page {
    background: #fff;
    color: #000;
    padding: 20px 0px 0;
}

.box-menu-account .box-mnacc-header-page .box-mnacc-header {
    background: none;
    padding: 0;
}

.box-mnacc-header-content {
    padding: 10px 0;
    border: 1px solid #fff;
    border-width: 1px 0 1px 0;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-size: 12px;
}

.box-mnacc-header-content .line-decor-rank-member span:nth-child(1) {
    min-width: unset;
}

.box-mnacc-header-content p {
    margin-bottom: 0;
}

.box-mnacc-header-content p span:nth-child(1) {
    display: inline-block;
    min-width: 80px;
    margin-right: 10px;
}

.box-menu-account .box-mnacc-header {
    color: #000;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.box-menu-account .box-mnacc-header img {
    width: 46px;
    border-radius: 50%;
    background: #fff;
    margin-right: 10px;
}

.box-menu-account .box-mnacc-header .content {
    width: calc(100% - 56px);
}

.box-menu-account .box-mnacc-header .content .name {
    font-size: 16px;
    line-height: 1;
    margin-bottom: 5px;
}

.box-menu-account .box-mnacc-header .content .email {
    margin-bottom: 0px;
    font-size: 12px;
}

.box-menu-account .box-mnacc-body {}

.box-menu-account .box-mnacc-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.box-menu-account .box-mnacc-body ul li ul {
    padding-left: 15px;
}

.box-menu-account .box-mnacc-body ul li ul li a {
    padding: 0px 10px 0px 34px;
    line-height: 30px;
    position: relative;
}

.box-menu-account .box-mnacc-body ul li ul li a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 20px;
    width: 5px;
    height: 5px;
    border-radius: 5px;
    background: #333;
    transform: translateY(-50%);
}

.box-menu-account .box-mnacc-body ul li a {
    padding: 0px 20px 0px 48px;
    font-family: var(--font-title);
    display: block;
    width: 100%;
    border-radius: 0;
    line-height: 40px;
    color: #000;
    font-size: 14px;
    border-left: 3px solid transparent;
}

.box-menu-account .box-mnacc-body ul li a:hover,
.box-menu-account .box-mnacc-body ul li a.active {
    color: #00a9ef;
    border-color: #00a9ef;
    background-color: #E8F4FF !important;
}

.box-menu-account .box-mnacc-body>ul>li.box-mnacc-ic1>a {
    background: url(../images/account_member/user.svg) no-repeat 20px center;
}

.box-menu-account .box-mnacc-body ul li.box-mnacc-ic2 a {
    background: url(../images/account_member/bill.svg) no-repeat 20px center;
}

.box-menu-account .box-mnacc-body ul li.box-mnacc-ic3 a {
    background: url(../images/account_member/user-2.svg) no-repeat 20px center;
}

.box-menu-account .box-mnacc-body ul li.box-mnacc-ic4 a {
    background: url(../images/account_member/work-bag.svg) no-repeat 20px center;
}

.box-menu-account .box-mnacc-body ul li.box-mnacc-ic5 a {
    background: url(../images/account_member/percent.svg) no-repeat 20px center;
}

.box-menu-account .box-mnacc-body ul li.box-mnacc-ic6 a {
    background: url(../images/account_member/link.svg) no-repeat 20px center;
}

.box-menu-account .box-mnacc-body ul li.box-mnacc-ic7 a {
    background: url(../images/account_member/love.svg) no-repeat 20px center;
}

.box-menu-account .box-mnacc-body ul li.box-mnacc-ic8 a {
    background: url(../images/account_member/gif.svg) no-repeat 20px center;
}

.box-menu-account .box-mnacc-body ul li.box-mnacc-ic9 a {
    background: url(../images/account_member/logout.svg) no-repeat 20px center;
}

.item-menu-account {
    background: #ffff;
    margin-top: 20px;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 0 20px #a0a0a040;
    width: 100%;
}

.item-menu-account ul {
    list-style: none;
    padding-left: 0px;
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item-menu-account ul li {}

.item-menu-account ul li a {}

.box-mnacc-header-content>p {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.account-page .basic-single {
    height: 35px;
    border: 0;
    background: #ecf0f3;
    padding: 0px 10px;
    font-size: 12px;
}

.account-page .btn-fill {
    height: 35px;
    font-size: 12px;
}

.group-total-revenue {}

.group-total-revenue ul {
    margin-bottom: 0px;
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.group-total-revenue ul li {
    font-size: 12px;
}

.group-total-revenue ul li span {
    font-weight: 600;
    color: #2d66b1;
}

.box-link-share {}

.btn-add-link-share {}

.active-link-share {
    background: #dbeaff;
}


.status_name {
    background: rgb(45 102 177);
    border-color: rgb(45 102 177);
    color: #fff;
    font-size: 13px;
    height: unset;
    padding: 2px 10px;
    font-size: 12px;
    width: fit-content;
    border-radius: 4px;
}

.cancel_order_user .status_name {
    background: #ee2558;
    border-color: #ee2558;
}

.new_order_user .status_name {
    background: #1cbfd0;
    border-color: #1cbfd0;
}

.shipping_order_user .status_name {
    background: #FF9948;
    border-color: #FF9948;
}

.susces_order_user .status_name {
    background: #04BE5B;
    border-color: #04BE5B;
}

.cofirm_order_user .status_name {
    background: #0c7ce6;
    border-color: #0c7ce6;
}

.wrap-user-fix .container {
    position: relative;
    /* border-radius: 8px; */
    padding: 20px;
    box-sizing: border-box;
    max-width: unset;
    background: #fff;
}

.newsletter-input-group .newsletter-submit {
  width: 64px;
  background: var(--blue-700);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--speed) var(--ease);
  flex: unset;
}

/* ==========================================================================
   PAGE BANNER (breadcrumb header for every subpage)
   ========================================================================== */
.page-banner {
  position: relative;
  background: var(--navy);
  padding: 34px var(--gutter) 34px;
  overflow: hidden;
}
.page-banner-shell {
  max-width: var(--bar-max);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding: 0 24px;
}
.page-banner-crumb {
  margin-bottom: 8px;
}
.page-banner-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
}
.page-banner-crumb ol.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  position: static;
}
.page-banner-crumb .breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  font-size: 12.5px;
  line-height: 1;
}
.page-banner-crumb .breadcrumb-item span {
  font-size: inherit;
  color: inherit;
}
.page-banner-crumb .breadcrumb-item + .breadcrumb-item::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  display: inline-block;
  flex: none;
}
.page-banner-crumb .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.62);
  transition: color var(--speed) var(--ease);
}
.page-banner-crumb .breadcrumb-item a:hover,
.page-banner-crumb .breadcrumb-item:hover span {
  color: var(--white);
}
.page-banner-crumb .breadcrumb-item.active a,
.page-banner-crumb .breadcrumb-item.active span {
  color: var(--white);
  font-weight: 600;
  pointer-events: none;
}
.page-banner-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 24px;
  display: block;
}
.page-banner-wave path {
  fill: var(--paper);
}
@media (max-width: 640px) {
  .page-banner {
    padding: 28px var(--gutter) 24px;
  }
  .page-banner-title {
    font-size: 20px;
  }
}

/* ==========================================================================
   PRODUCTS LIST PAGE (static grid, no owl — full catalog page)
   ========================================================================== */
.products-list-section {
  padding: 36px var(--gutter) 56px;
}
.product-grid-static {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 980px) {
  .product-grid-static {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 720px) {
  /* Stays 2-up all the way down to the smallest phones — a single
     stretched-wide card per row looked worse than a tighter 2-column
     grid, even at ~360-400px. */
  .product-grid-static {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
@media (max-width: 420px) {
  .product-grid-static {
    gap: 8px;
  }
}
.empty-state {
  text-align: center;
  padding: 64px 20px;
  color: var(--ink-soft);
}
.empty-state .icon-empty {
  font-size: 32px;
  color: var(--blue-200);
  margin-bottom: 14px;
  display: block;
}
.empty-state p {
  margin: 0;
  font-size: 15px;
}

/* ==========================================================================
   PRODUCT DETAIL PAGE
   ========================================================================== */
.product-detail-section {
  padding: 36px var(--gutter) 12px;
}
.detail-grid {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 36px;
}
@media (max-width: 900px) {
  .detail-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
.detail-gallery-main {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--blue-100);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(194, 198, 212, 0.25);
  overflow: hidden;
}
/* !important throughout this block: MagicZoomPlus sets inline
   width/height (from the image's natural pixel size) on the <img> —
   and may wrap it in its own .mz-figure element sized the same way —
   when swapping via a thumbnail click. Both otherwise override plain
   CSS here and made the swapped-in photo render at its native size
   instead of filling the frame. */
.detail-gallery-main .mz-figure {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.detail-gallery-main img {
  /* max-width/max-height: MagicZoomPlus's update() sets an inline
     max-width/max-height on this exact <img> node capped to the
     source photo's natural pixel size whenever a thumbnail swap
     happens (confirmed by reading its minified source — it calls
     jSetCss({"max-width": <naturalWidth>, ...}) on this.image.node).
     Since our real product photos are small (~419x228 crop originals),
     that inline cap shrank the swapped-in image far below the frame.
     width/height alone (previous fix) never touched max-width, so the
     cap silently overrode them. */
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block;
}
.detail-gallery-thumbs-wrap {
  margin-top: 12px;
  max-width: 100%;
}
.detail-gallery-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--blue-100);
  border-radius: 8px;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--speed) var(--ease);
}
.detail-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.detail-gallery-thumb.is-active,
.detail-gallery-thumb:hover,
.detail-gallery-thumb.mz-thumb-selected {
  border-color: var(--blue-700);
}
.detail-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}
.detail-info .rating-row {
  margin-bottom: 14px;
}
.detail-price-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  background: var(--blue-050);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}
.detail-price-row .price-current {
  font-size: 24px;
  font-weight: 800;
  color: var(--blue-900);
}
.detail-price-row .price-old {
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: line-through;
}
.detail-tags {
  margin-bottom: 16px;
}
.detail-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin-bottom: 18px;
}
.detail-meta-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  border-top: 1px solid var(--ink-line);
}
.detail-meta-list li {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ink-line);
  font-size: 13.5px;
}
.detail-meta-list li span {
  color: var(--ink-soft);
  min-width: 110px;
}
.detail-meta-list li strong {
  color: var(--ink);
  font-weight: 600;
}
.detail-meta-list li a {
  color: var(--blue-700);
  font-weight: 600;
}
.btn-cta-hotline {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 20px;
  background: var(--blue-900);
  color: var(--white);
  border-radius: var(--radius-lg);
  font-size: 13px;
  margin-bottom: 18px;
  transition: background var(--speed) var(--ease);
}
.btn-cta-hotline:hover {
  background: var(--blue-700);
  color: var(--white);
}
.btn-cta-hotline i {
  font-size: 20px;
}
.btn-cta-hotline strong {
  font-size: 15px;
}
.detail-share {
  display: flex;
  align-items: center;
  gap: 10px;
}
.detail-share-label {
  font-size: 13px;
  color: var(--ink-soft);
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--blue-050);
  color: var(--blue-800);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--speed) var(--ease);
}
.share-btn:hover {
  background: var(--blue-900);
  color: var(--white);
}
.detail-body-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--ink-line);
}
@media (max-width: 900px) {
  .detail-body-grid {
    grid-template-columns: 1fr;
  }
}
.detail-content-body {
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-muted);
  margin-top: 16px;
}
.detail-content-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
.sidebar-block {
  margin-bottom: 28px;
}
.sidebar-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--blue-900);
  display: inline-block;
}
.mini-product-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mini-product-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ink-line);
}
.mini-product-item:last-child {
  border-bottom: none;
}
.mini-product-media {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: var(--blue-100);
}
.mini-product-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mini-product-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mini-product-title:hover {
  color: var(--blue-700);
}
.mini-product-info .price-current {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-900);
}

/* Redesigned subpages use full-bleed .section/.section-shell layouts
   (own internal max-width), so the legacy .wrap-main 1220px cap +
   10px side padding must be lifted for them — same treatment .wrap-home
   already gets on the homepage. Scoped per body class as each subpage
   is migrated to the new design system. */
body.productsPage .wrap-main,
body.productDetailPage .wrap-main,
body.newsPage .wrap-main,
body.newsDetailPage .wrap-main,
body.contactPage .wrap-main {
  max-width: 100%;
  padding: 0;
}

.commitment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.commitment-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink-line);
}
.commitment-item:last-child {
  border-bottom: none;
}
.commitment-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue-050);
  display: flex;
  align-items: center;
  justify-content: center;
}
.commitment-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.commitment-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.commitment-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.commitment-sub {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ==========================================================================
   NEWS DETAIL (ARTICLE) PAGE
   ========================================================================== */
.article-section {
  padding: 36px var(--gutter) 56px;
}
.article-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
}
@media (max-width: 900px) {
  .article-layout {
    grid-template-columns: 1fr;
  }
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.article-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.article-content {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-muted);
}
.article-content p {
  margin: 0 0 16px;
}
.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
.article-share {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--ink-line);
}
.article-related {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--ink-line);
}
.related-article-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.related-article-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ink-line);
}
.related-article-list li:last-child {
  border-bottom: none;
}
.related-article-list li a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.related-article-list li a:hover {
  color: var(--blue-700);
}
.related-article-list li span {
  flex: none;
  font-size: 12px;
  color: var(--ink-soft);
}
.mini-product-date {
  font-size: 12px;
  color: var(--ink-soft);
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-section {
  padding: 36px var(--gutter) 56px;
}
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 36px;
}
@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}
.contact-info-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.contact-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-line);
}
.contact-info-list li:last-child {
  border-bottom: none;
}
.contact-info-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue-800);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.contact-info-label {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 2px;
}
.contact-info-list li a,
.contact-info-list li span:not(.contact-info-label) {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.contact-info-list li a:hover {
  color: var(--blue-700);
}
.contact-form-card {
  background: var(--white);
  border: 1px solid rgba(194, 198, 212, 0.25);
  box-shadow: var(--sh-xs);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.contact-form-card .sidebar-title {
  margin-bottom: 18px;
}
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 460px) {
  .form-row-2 {
    grid-template-columns: 1fr;
  }
}
.contact-form-card .contact-input {
  margin-bottom: 14px;
}
.contact-form-card .form-control {
  width: 100%;
  border: 1px solid var(--ink-line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13.5px;
  font-family: var(--font-body);
  color: var(--ink);
  transition: border-color var(--speed) var(--ease);
}
.contact-form-card .form-control:focus {
  outline: none;
  border-color: var(--blue-700);
}
.contact-form-card textarea.form-control {
  min-height: 110px;
  resize: vertical;
}
.contact-submit {
  width: 100%;
  padding: 13px 20px;
  background: var(--blue-900);
  color: var(--white);
  border: none;
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--speed) var(--ease);
}
.contact-submit:hover:not(:disabled) {
  background: var(--blue-700);
}
.contact-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================================================
   SCROLL REVEAL — section-level entrance (see initScrollReveal() in
   allpage.js). One fade+rise per section, fired once via
   IntersectionObserver, never staggered per-card inside a grid.
   Values match the original design's own .reveal/.is-in exactly
   (aquaworld/styles.css) — that stylesheet's whole "modern effects"
   block (accent-bar shimmer, button glow, frosted header) was already
   merged in; only this piece, and wiring it into the PHP templates,
   was still missing. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}