/* Min Pet Shop — site styles (child theme wpagent-child).
 * Classes on the UX Builder elements follow the reference's section and
 * component names; Flatsome's own wrappers are reset where they collide.
 * Breakpoints of the reference: 1199 / 991 / 767.
 */

/* ---------- 0. Tokens + base ---------- */
:root {
	--mainColor: #043364;
	--hover: #e02223;
	--price: #ff0000;
	--bg: #fafafa;
	--primary-color: #043364;
}
html { background: #fff; }
body {
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: #000;
	background: #fff;
}
body, button, input, select, textarea { letter-spacing: 0; }
h1, h2, h3, h4, h5, h6, .heading-font {
	font-family: "Be Vietnam Pro", sans-serif;
	color: inherit;
	width: auto;
	text-rendering: auto;
}
a { color: inherit; }
a:hover { color: var(--hover); }
#wrapper, #main { background: #fff; }
img { vertical-align: middle; }

/* Content reboot (Bootstrap-like) inside the pages, the footer block. */
:where(#content, #footer) :is(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 .5rem;
	font-weight: 500;
	line-height: 1.2;
	color: inherit;
}
:where(#content, #footer) p { margin: 0 0 1rem; }
:where(#content, #footer) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(#content, #footer) .col-inner :is(ul, ol) li { margin: 0; }
#content .col, #footer .col { padding-bottom: 0; }
#content .section, #footer .section { padding: 0; }
#content .section-content, #footer .section-content { position: relative; }
#content .text > :last-child, #footer .text > :last-child { margin-bottom: 0; }
#content .img, #footer .img { margin: 0; }
#content .img .img-inner, #footer .img .img-inner { overflow: hidden; }
#content .row::before, #content .row::after { content: none; }
#content > section, #content > .section { margin-bottom: 80px; }
@media (max-width: 767px) {
	#content > section, #content > .section { margin-bottom: 40px; }
}
.mps-i {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--i) center / contain no-repeat;
	mask: var(--i) center / contain no-repeat;
}
.mps-i-pin { --i: url(../icons/pin.svg); }
.mps-i-mail { --i: url(../icons/mail.svg); }
.mps-i-phone { --i: url(../icons/phone.svg); }
.mps-i-messenger { --i: url(../icons/messenger.svg); }
.mps-i-facebook { --i: url(../icons/facebook.svg); }
.mps-i-x { --i: url(../icons/x.svg); }
.mps-i-youtube { --i: url(../icons/youtube.svg); }
.mps-i-instagram { --i: url(../icons/instagram.svg); }
.mps-i-search { --i: url(../icons/search.svg); }
.mps-i-calendar { --i: url(../icons/calendar.svg); }
.mps-i-location { --i: url(../icons/location.svg); }
.mps-i-user { --i: url(../icons/user.svg); }
.mps-i-heart { --i: url(../icons/heart.svg); }
.mps-i-cart { --i: url(../icons/cart.svg); }
.mps-i-check { --i: url(../icons/check.svg); }
.mps-i-checkcircle { --i: url(../icons/checkcircle.svg); }
.mps-i-date { --i: url(../icons/date.svg); }
.mps-i-comment { --i: url(../icons/comment.svg); }
.mps-i-arrow { --i: url(../icons/arrow.svg); }
.mps-i-compare { --i: url(../icons/compare.svg); }
.mps-i-wish { --i: url(../icons/wish.svg); }
.mps-i-basket { --i: url(../icons/basket.svg); }

/* ---------- 1. Top bar (inc/header.php) ---------- */
.topbar {
	background: var(--mainColor);
	color: #fff;
	padding: 10px 0;
	font-size: 16px;
	line-height: 1.5;
}
.topbar .container { max-width: 1700px; padding: 0 15px; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 35px; }
.topbar ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.topbar li { margin: 0; }
.topbar .top-bar-right { gap: 15px; }
.topbar .top-bar-right li > span, .topbar .top-bar-right li > a { color: #fff; display: flex; align-items: center; gap: 5px; }
.topbar .top-bar-right li > a:hover { color: #fff; opacity: .7; }
.topbar .top-bar-right .icon {
	background: #fff;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mainColor);
	font-size: 24px;
}
.topbar .social-topbar { gap: 10px; justify-content: flex-end; }
.topbar .social-topbar a {
	padding: 5px;
	border: 1px solid #fff;
	border-radius: 5px;
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 22px;
	transition: all .5s ease;
}
.topbar .social-topbar a:hover { background: #fff; color: var(--mainColor); }
@media (max-width: 1199px) {
	.topbar .top-bar-right { gap: 5px; }
	.topbar-left { display: none; }
	.topbar-inner { justify-content: flex-end; }
}
@media (max-width: 767px) {
	.topbar { padding: 5px 0; }
	.topbar-inner { justify-content: flex-start; min-height: 30px; }
	.topbar .social-topbar { justify-content: flex-start; }
	.topbar .social-topbar a { width: 30px; height: 30px; font-size: 18px; }
}

/* ---------- 2. Header ---------- */
#header { box-shadow: 0 0 5px 0 var(--mainColor); position: relative; z-index: 99; }
.home #header { margin-bottom: 20px; }
#header .header-wrapper:not(.stuck) { position: relative; }
#header .header-main { height: auto; background: #fff; }
#header .header-main .header-inner { min-height: 110px; padding: 10px 15px; }
#header .container { max-width: 1700px; }
#header #logo { width: 210px; margin: 0 30px 0 0; justify-content: center; text-align: center; }
#header #logo a { display: flex; align-items: center; justify-content: center; }
#header #logo img { max-height: 90px; width: auto; height: auto; }
#header .stuck .header-main .header-inner { min-height: 70px; padding-top: 5px; padding-bottom: 5px; }
#header .stuck #logo img { max-height: 60px; }
#header .header-main .flex-left.hide-for-medium { flex: 0 0 570px; max-width: 570px; margin: 0; }
#header .header-main .flex-right.hide-for-medium { flex: 1 1 auto; margin: 0 0 0 30px; justify-content: flex-end; }
#header .header-nav-main { width: 100%; }
#header .header-nav-main > li { margin: 0; }
#header .header-search-form { width: 100%; max-width: 100%; }
#header .header-search-form-wrapper { width: 100%; }
#header .searchform-wrapper { width: 100%; }
#header .searchform { position: relative; height: 50px; background: #fff; border: 1px solid #eee; border-radius: 40px; overflow: hidden; }
#header .searchform .flex-row { height: 100%; }
#header .searchform .search-field {
	height: 48px;
	border: 0;
	box-shadow: none;
	background: transparent;
	padding: 0 50px 0 20px;
	font-size: 14px;
	color: #000;
	border-radius: 0;
}
#header .searchform .search-field::placeholder { color: #000; opacity: 1; }
#header .searchform .flex-col:last-child { position: absolute; right: 5px; top: 4px; }
#header .searchform .ux-search-submit {
	width: 40px;
	height: 40px;
	min-height: 40px;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	background: var(--mainColor);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
}
#header .searchform .ux-search-submit:hover { background: var(--hover); }
#header .header-control-right { display: inline-flex; align-items: center; justify-content: flex-end; gap: 15px; margin: 0; padding: 0; list-style: none; }
#header .header-control-right > li { margin: 0; position: relative; }
#header .header-control-right .icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	color: var(--mainColor);
	padding: 0;
	line-height: 1.5;
	font-size: 14px;
	text-transform: none;
}
#header .header-control-right .mps-i { font-size: 26px; color: var(--mainColor); }
#header .header-control-right .title { color: var(--mainColor); font-weight: 700; white-space: nowrap; }
#header .header-control-right .icon:hover .mps-i, #header .header-control-right .icon:hover .title { color: var(--hover); }
#header .html_top_right_text { margin: 0; }
#header .header-bottom {
	background: #fff;
	border-top: 1px solid #eee;
	min-height: 48px;
}
#header .header-bottom .flex-row { min-height: 47px; padding: 0 15px; }
#header .header-bottom-nav.nav-left { gap: 15px; flex-wrap: nowrap; }
#header .header-bottom-nav > li { margin: 0; padding: 0; }
#header .header-bottom-nav > li > a {
	font-size: 18px;
	font-weight: 500;
	color: #000;
	padding: 10px 0;
	line-height: 27px;
	text-transform: none;
	letter-spacing: 0;
}
#header .header-bottom-nav > li.active > a, #header .header-bottom-nav > li > a:hover { color: var(--mainColor); }
#header .header-bottom-nav > li > a > i.icon-angle-down { display: none; }
#header .header-bottom-nav > li.has-dropdown > a::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 5px 0 5px;
	border-color: currentColor transparent transparent transparent;
	position: relative;
	top: -2px;
	margin-left: 4px;
	color: #000;
}
#header .header-bottom .flex-right { justify-content: flex-end; }
#header .header-bottom .html_nav_position_text { margin: 0; }
#header .khuyenmai-header {
	display: inline-flex;
	align-items: center;
	gap: 0;
	background: #fff;
	border: 2px solid var(--hover);
	border-radius: 10px;
	padding: 2px 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--hover);
	line-height: 1.5;
	text-transform: none;
}
#header .khuyenmai-header img { width: 32px; height: 32px; }
#header .khuyenmai-header:hover { color: var(--mainColor); }
#header .nav-dropdown { border: 0; border-radius: 10px; box-shadow: 0 1px 2px 2px rgba(0, 0, 0, .04); padding: 15px; min-width: 200px; }
#header .nav-dropdown li a { font-size: 16px; color: #000; padding: 3px 20px 3px 10px; border: 0; text-transform: none; }
#header .nav-dropdown li a:hover { color: var(--hover); }
#header .nav-dropdown ul { margin: 0; }
#header .header-bg-color { background: #fff; }

/* Mobile header (< 850 Flatsome) */
@media (max-width: 849px) {
	#header .header-main .header-inner { min-height: 0; padding: 0 15px; height: auto; }
	#header .header-main { height: auto !important; }
	#header #logo { width: auto; min-width: 0; margin: 0; flex: 0 1 auto; order: 2; justify-content: flex-start; }
	#header #logo img { max-height: 65px; }
	#header .header-main .flex-left.show-for-medium { order: 1; flex: 0 0 auto; margin-right: 20px; }
	#header .header-main .flex-right.show-for-medium { order: 3; flex: 1 1 auto; justify-content: flex-end; }
	#header .mobile-nav > .nav-icon { margin: 0; }
	#header .nav-icon a { display: flex; flex-direction: column; align-items: center; color: var(--mainColor); padding: 0; width: 35px; height: 50px; justify-content: center; }
	#header .nav-icon .icon-menu {
		display: block;
		width: 33px;
		height: 18px;
		background:
			linear-gradient(var(--mainColor), var(--mainColor)) 4px 0 / 24px 2px no-repeat,
			linear-gradient(var(--hover), var(--hover)) 3px 8px / 27px 2px no-repeat,
			linear-gradient(var(--mainColor), var(--mainColor)) 0 16px / 33px 2px no-repeat;
		margin-bottom: 4px;
	}
	#header .nav-icon .icon-menu::before { content: none; }
	#header .nav-icon .menu-title { display: block !important; font-weight: 700; font-size: 14px; text-transform: none; color: var(--mainColor); margin: 0; }
	#header .header-control-right { gap: 10px; }
	#header .header-control-right .title { font-size: 12px; }
	#header .header-bottom { border-top: 0; min-height: 0; }
	#header .header-bottom .flex-row { padding: 0 15px 10px; min-height: 0; }
	#header .header-bottom .mobile-nav { width: 100%; }
	#header .header-bottom .mobile-nav > li { width: 100%; margin: 0; }
}
@media (max-width: 767px) {
	#header .header-control-right { gap: 5px; }
	#header .header-control-right .icon { background: var(--mainColor); width: 34px; height: 34px; border-radius: 5px; }
	#header .header-control-right .mps-i { color: #fff; font-size: 20px; }
	#header .header-control-right .title { display: none; }
	#header .stuck .header-bottom { display: none; }
}

/* Mobile menu (off-canvas) */
.mobile-sidebar { background: #fff; border-radius: 0 20px 20px 0; }
.mobile-sidebar .nav-sidebar > li > a { font-size: 16px; font-weight: 600; color: #000; text-transform: none; }

/* Shared contact widget and welcome promotion. */
.backtop { position: fixed; right: 20px; bottom: 107px; z-index: 999; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #fff; border-radius: 50%; color: #fff; background: var(--mainColor); opacity: 0; pointer-events: none; transition: opacity .2s; }
.backtop.show { opacity: 1; pointer-events: auto; }
.backtop:hover { color: #fff; background: var(--hover); }
.main-widget { position: fixed; right: 14px; bottom: 20px; z-index: 1000; }
.main-widget button { margin: 0; min-height: 0; min-width: 0; padding: 0; font-weight: 400; letter-spacing: 0; text-transform: none; }
.main-widget .out-circle { position: relative; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border: 0; border-radius: 50%; background: var(--mainColor); color: #fff; cursor: pointer; }
.main-widget .main-icon { display: flex; flex-direction: column; align-items: center; font-size: 10px; line-height: 15px; }
.main-widget .main-icon svg { width: 20px; height: 20px; margin-bottom: 5px; }
.main-widget .ser-icon { position: absolute; top: 0; left: 0; display: inline-flex; width: 70%; height: 70%; margin: 15%; padding: 10%; border-radius: 50%; overflow: hidden; color: var(--mainColor); background: #fff; transition: .2s all; }
.main-widget .ser-icon.unsee { opacity: 0; transform: scale(0); }
.main-widget .process { display: inline-flex; transform: translateX(0); transition: .15s linear transform; line-height: 0; }
.main-widget .ser-icon .item { display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; margin-right: 40px; font-size: 25px; }
.main-widget .ser-icon .mps-zalo { font-size: 12px; font-weight: 700; }
.main-widget .ser-icon svg { width: 25px; height: 25px; }
.main-widget .mps-contact-x { display: none; font-size: 32px; line-height: 1; }
.main-widget.is-open .main-icon, .main-widget.is-open .ser-icon { display: none; }
.main-widget.is-open .mps-contact-x { display: block; }
.main-widget .def-content { position: absolute; right: 0; bottom: 62px; width: 300px; max-width: calc(100vw - 28px); background: #fff; border-radius: 8px; box-shadow: 0 0 10px #0003; color: #000; }
.main-widget .def-content::after { content: ""; position: absolute; bottom: -8px; right: 22px; border: 8px solid transparent; border-bottom: 0; border-top-color: #fff; }
.main-widget .def-header { position: relative; padding: 10px 38px 10px 10px; border-radius: 8px 8px 0 0; background: var(--mainColor); color: #fff; }
.main-widget .mps-contact-close { position: absolute; right: 10px; top: 6px; width: 26px; height: 26px; border: 0; color: #fff; background: transparent; font-size: 26px; line-height: 1; }
.main-widget .mps-contact-link { display: flex; align-items: center; padding: 5px 10px; color: #000; }
.main-widget .mps-contact-link:hover { color: var(--hover); background: #f7f7f7; }
.main-widget .mps-contact-link .img { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; margin-right: 10px; border-radius: 50%; color: #fff; background: #4eb625; font-size: 20px; }
.main-widget .mps-contact-link .img svg { width: 20px; height: 20px; }
.main-widget .zalo .img { background: #0165f8; font-size: 10px; font-weight: 700; }
.main-widget .mess .img { background: #31adff; }
.main-widget .map .img { background: #d94234; }
.main-widget .detail b { display: block; font-size: 16px; line-height: 1.4; }
.main-widget .detail > span { font-size: 14px; color: #787878; }
.popup-overlay { position: fixed; inset: 0; z-index: 9999; background: #0009; backdrop-filter: blur(10px); pointer-events: none; }
.popup-overlay .popup-inner { pointer-events: auto; }
.popup-overlay[hidden] { display: none; }
.popup-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(600px, 84vw); max-height: 90vh; overflow: auto; border-radius: 10px; }
.popup-inner .row { width: 100%; max-width: none; margin: 0; }
.popup-inner .col { padding: 0; }
.popup-inner .img { margin: 0; width: 100%; }
.popup-inner img { display: block; width: 100%; height: auto; }
.popup-inner .close-popup { position: absolute; top: 5px; right: 5px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 50%; color: #fff; background: var(--mainColor); font-size: 25px; line-height: 1; }
.popup-inner .close-popup:hover { background: var(--hover); }
@media (prefers-reduced-motion: reduce) { .main-widget .ser-icon, .main-widget .process { transition: none; } }

/* ---------- 3. Footer (UX Block "footer") ---------- */
#footer { background: #fff; }
#footer .footer-wave { height: 15vh; min-height: 100px; max-height: 150px; background: url(../icons/wave.svg) center bottom / 100% 100% no-repeat; }
#footer .mid-footer { background: var(--mainColor); padding: 50px 0; color: #fff; }
#footer .mid-footer .row { max-width: 1700px; }
#footer .logo-ft { display: inline-block; width: auto !important; margin-bottom: 20px; background: #fff; padding: 10px; border-radius: 10px; }
#footer .logo-ft img { max-height: 80px; width: auto; }
#footer .content-ft { margin-bottom: 10px; font-size: 18px; color: #fff; }
#footer .footer-social .col-inner { display: flex; gap: 5px; flex-wrap: wrap; }
#footer .footer-social .img { width: auto !important; margin: 0; }
#footer .footer-social .img img { width: auto; height: auto; }
#footer .footer-social .img:hover { opacity: .8; }
#footer .title-menu { font-size: 24px; margin: 0 0 10px; color: #fff; font-weight: 700; line-height: 1.2; }
#footer .group-address li { margin-bottom: 5px; font-size: 18px; color: #fff; }
#footer .group-address li a { color: #fff; }
#footer .group-address { margin: 10px 0 20px; }
#footer .list-menu li { display: block; margin-bottom: 5px; }
#footer .list-menu li a { font-size: 18px; color: #fff; display: flex; align-items: center; }
#footer .list-menu li a::before { content: "\203A"; font-size: 18px; margin-right: 8px; color: #fff; transition: .3s ease; }
#footer .list-menu li a:hover, #footer .list-menu li a:hover::before { color: var(--hover); }
#footer .col-footer { margin-bottom: 20px; }
.absolute-footer {
	background: var(--hover) !important;
	color: #fff;
	padding: 10px 0;
	font-size: 16px;
	text-align: center;
}
.absolute-footer .container { max-width: 1700px; }
.absolute-footer .footer-primary { float: none; padding: 0; }
.absolute-footer .copyright-footer { padding: 0; color: #fff; }
.absolute-footer.dark { color: #fff; }
@media (max-width: 991px) {
	#footer .footer-wave { height: 50px; min-height: 50px; max-height: 50px; }
}
@media (max-width: 767px) {
	#footer .content-ft, #footer .group-address li { font-size: 16px; }
	#footer .title-menu { font-size: 16px; }
	#footer .list-menu li a { font-size: 14px; }
}

/* ---------- 4. Shared pieces ---------- */
.title-index {
	margin-bottom: 20px;
	display: block;
	position: relative;
	text-align: left;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--mainColor);
}
#content .title-index h2, #content .title-index h3 { font-size: inherit; font-weight: inherit; color: inherit; margin: 0; line-height: inherit; }
@media (max-width: 767px) {
	.title-index { margin-bottom: 15px; font-size: 20px; }
}
/* Card rows that scroll sideways (carousels) */
#content .mps-carousel { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
#content .mps-carousel::-webkit-scrollbar { display: none; }
#content .mps-carousel > .col { scroll-snap-align: start; flex-shrink: 0; }
.mps-carousel-wrap { position: relative; }
.mps-nav {
	position: absolute;
	top: 50%;
	z-index: 10;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--mainColor);
	color: #fff;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	min-height: 0;
	line-height: 1;
}
.mps-nav::after { content: ""; width: 10px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(-45deg); margin-left: -4px; }
.mps-nav.prev::after { transform: rotate(135deg); margin: 0 -4px 0 0; }
.mps-nav:hover { background: var(--hover); }
.mps-nav.next { right: 10px; }
.mps-nav.prev { left: 10px; }
.mps-nav[hidden] { display: none; }
@media (max-width: 767px) {
	.mps-nav { width: 25px; height: 25px; }
	.mps-nav::after { width: 7px; height: 7px; }
}

/* ---------- 5. Product card [mps_product] ---------- */
.product-action {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: left;
	overflow: hidden;
	background-color: color-mix(in srgb, var(--mainColor) 5%, transparent);
	border-radius: 10px;
	padding: 5px;
}
.product-action .product-thumbnail { position: relative; overflow: hidden; border-radius: 5px; }
.product-action .image_thumb { position: relative; overflow: hidden; width: 100%; display: flex; align-items: center; justify-content: center; height: auto !important; padding-bottom: 100%; }
.product-action .image_thumb img { width: auto !important; max-height: 100%; position: absolute; inset: 0; margin: auto; opacity: 0; }
.product-action .image_thumb img.active { opacity: 1; z-index: 2; }
.product-action .thumb-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 6; }
.product-action .thumb-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, .5); }
.product-action .thumb-dots span.active { width: 18px; border-radius: 10px; background: var(--mainColor); }
.product-action .sale-off { position: absolute; top: 5px; left: 5px; background: var(--price); color: #fff; font-size: 14px; line-height: 21px; padding: 2px 10px; border-radius: 50px; box-shadow: 0 0 5px 1px #fff; font-weight: 700; z-index: 9; }
.product-action .action { text-align: center; position: absolute; top: 10px; z-index: 6; opacity: 0; right: -100px; transition: all .4s; }
.product-action .action .btn-views { display: flex; justify-content: center; align-items: center; padding: 10px; width: 40px; height: 40px; background: var(--mainColor); color: #fff; border-radius: 50%; margin-bottom: 5px; font-size: 20px; }
.product-action .action .btn-views:hover { background: var(--hover); }
@media (min-width: 991px) {
	.product-action:hover .action { opacity: 1; right: 10px; }
}
.product-action .product-info { padding: 10px 0 0; position: relative; }
.product-action .product-name { font-size: 16px; margin: 0 0 10px !important; font-weight: 500; line-height: 1.2; }
.product-action .product-name a { color: #000; height: calc(1em * 1.4 * 2); }
.product-action .product-name a:hover { color: var(--hover); }
.line-clamp { display: -webkit-box; -webkit-box-orient: vertical; position: relative; line-height: 1.4 !important; overflow: hidden; text-overflow: ellipsis; padding: 0 !important; word-break: break-word; }
.line-clamp-1 { -webkit-line-clamp: 1; max-height: calc(1em * 1.4 * 1); }
.line-clamp-2 { -webkit-line-clamp: 2; max-height: calc(1em * 1.4 * 2); }
.line-clamp-3 { -webkit-line-clamp: 3; max-height: calc(1em * 1.4 * 3); }
.product-action .price-box { min-height: 45px; }
.product-action .price-box .price { font-size: 16px; font-weight: 700; color: var(--price); display: block; }
.product-action .price-box .compare-price { color: #999; font-size: 14px; text-decoration: line-through; }
.product-action .group-button { gap: 10px; display: flex; width: 100%; margin-top: 10px; }
.product-action .group-button a { width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--mainColor); border-radius: 10px; color: #fff; font-size: 14px; }
.product-action .group-button a:hover { background: var(--hover); color: #fff; }
.product-action .group-button .btn-cart { min-width: 40px; width: 40px; flex: 0 0 40px; background: #fff; border: 1px solid var(--mainColor); color: var(--mainColor); font-size: 24px; padding: 7px; }
.product-action .group-button .btn-cart:hover { background: var(--hover); border-color: var(--hover); color: #fff; }
.min-productcount { margin-bottom: 10px; }
.min-productcount .countdown .line { height: 8px; background: #dfdfdf; border-radius: 5px; }
.min-productcount .countdown .line span {
	display: block;
	height: 8px;
	border-radius: 5px;
	background-color: var(--mainColor);
	background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
	background-size: 40px 40px;
}
.min-productcount .countdown .title { font-weight: 700; margin-top: 2px; display: block; }
@media (max-width: 991px) {
	.product-action .group-button .quick-view { display: flex; }
}
@media (max-width: 767px) {
	.product-action .product-name { font-size: 14px; }
}

/* ---------- 6. Grid helpers (reference .row-fix = 10px gutters) ---------- */
#content .row.row-fix { padding: 0 5px; }
#content .row.row-fix > .col { padding: 0 10px; margin-bottom: 20px; }
#content .row, #footer .row { max-width: 1700px; }

/* Carousel rows: cards per view + gap of the reference's Swiper settings */
#content .mps-carousel { --per: 6; --gap: 20px; gap: var(--gap); margin: 0 15px; padding: 2px; width: auto; }
#content .mps-carousel-wrap { margin: 0 15px; }
#content .mps-carousel-wrap > .mps-carousel { margin: 0; }
#content .col-inner .mps-carousel-wrap { margin: 0; }
#content .col-inner .mps-carousel { padding: 2px; margin: 0; width: 100%; }
#content .mps-carousel > .col { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); max-width: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); padding: 0; display: flex; }
#content .mps-carousel > .col > .col-inner { width: 100%; }
#content .danhmuc-row { --per: 8; --gap: 20px; }
#content .coupon-row { --per: 4; --gap: 10px; }
#content .blog-row { --per: 5; --gap: 20px; }
@media (max-width: 1199px) {
	#content .danhmuc-row { --per: 4; }
	#content .coupon-row { --per: 3; }
	#content .product-row { --per: 4; }
	#content .blog-row { --per: 4; --gap: 10px; }
}
@media (max-width: 990px) {
	#content .coupon-row { --per: 2.3; }
	#content .product-row { --per: 3; }
	#content .blog-row { --per: 3; }
}
@media (max-width: 767px) {
	#content .danhmuc-row { --per: 2; --gap: 10px; }
	#content .coupon-row { --per: 1.3; }
	#content .product-row { --per: 2; --gap: 10px; }
	#content .blog-row { --per: 1; }
}
@media (max-width: 639px) {
	#content .coupon-row { --per: 2; }
	#content .product-row { --gap: 20px; }
}
@media (max-width: 499px) {
	#content .coupon-row { --per: 1; }
}
@media (max-width: 449px) {
	#content .product-row { --gap: 6px; }
}

/* ---------- 7. Home: slider + policies ---------- */
.section_slider .section-content > .row { padding: 0 5px !important; }
.section_slider .section-content > .row > .col { padding: 0 10px !important; margin-bottom: 20px; }
.section_slider .home-slider { margin: 0; }
.section_slider .home-slider .flickity-viewport { border-radius: 20px; }
.section_slider .home-slider .img, .section_slider .home-slider .img-inner { border-radius: 20px; overflow: hidden; }
.section_slider .home-slider img { width: 100%; height: auto; display: block; }
.section_slider .thumb-chinhsach > .col-inner { background: var(--mainColor); padding: 20px; border-radius: 20px; }
#content .chinhsach { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin: 0; padding: 0; width: 100%; }
#content .chinhsach > .col { flex: none; max-width: none; width: auto; padding: 0; margin: 0; }
#content .chinhsach > .col > .col-inner { height: 100%; }
.chinhsach .item { background: #fff; padding: 10px; border-radius: 5px; height: 100%; text-align: center; }
.chinhsach .item .icon-box-img { margin: 0 auto !important; width: auto !important; }
.chinhsach .item .icon-box-img img { height: 50px; width: auto; margin: 0 auto; }
.chinhsach .item .icon-box-text { padding: 0; }
.chinhsach .item h5 { display: block; margin: 10px 0 0 !important; font-weight: 700 !important; color: var(--mainColor); font-size: 16px; text-transform: none; letter-spacing: 0; line-height: 1.5 !important; }
.chinhsach .item p { margin: 0 !important; font-size: 14px; line-height: 1.5; }
@media (max-width: 1400px) {
	.chinhsach .item h5 { font-size: 14px; margin-top: 4px !important; }
	.chinhsach .item p { font-size: 12px; }
}
@media (max-width: 1400px) and (min-width: 1199px) {
	.section_slider .thumb-chinhsach > .col-inner { padding: 10px; border-radius: 10px; }
	#content .chinhsach { gap: 10px; }
	.chinhsach .item { padding: 5px; }
	.chinhsach .item .icon-box-img img { height: 42px; }
}
@media (max-width: 1199px) {
	.section_slider .thumb-chinhsach > .col-inner { padding: 10px; border-radius: 10px; }
	#content .chinhsach { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
	.chinhsach .item { padding: 5px; }
}
@media (max-width: 767px) {
	#content .chinhsach { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; }
	#content .chinhsach > .col { flex: 0 0 60%; max-width: 60%; }
	.chinhsach .item { padding: 10px; }
}

/* ---------- 8. Home: featured categories ---------- */
.tab-menu-danhmuc { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.tab-menu-danhmuc > h4 { margin: 0 !important; font-size: 26px; font-weight: 700 !important; color: var(--mainColor) !important; text-transform: none; letter-spacing: 0; line-height: 1.2 !important; }
.tab-menu-danhmuc > .nav { display: flex; gap: 10px; background: #eee; padding: 5px; border-radius: 5px; margin: 0; width: auto; }
.tab-menu-danhmuc > .nav > li { margin: 0; }
.tab-menu-danhmuc > .nav > li > a {
	display: flex;
	align-items: center;
	gap: 5px;
	background: #fff;
	padding: 5px 10px;
	border-radius: 5px;
	color: #000;
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	text-transform: none;
	letter-spacing: 0;
	border: 0;
	min-height: 0;
}
.tab-menu-danhmuc > .nav > li > a::before { content: ""; width: 40px; height: 40px; background: url(/wp-content/uploads/2026/10/icon_danhmuc1.png) center / contain no-repeat; }
.tab-menu-danhmuc > .nav > li + li > a::before { background-image: url(/wp-content/uploads/2026/10/icon_danhmuc2.png); }
.tab-menu-danhmuc > .nav > li.active > a { background: var(--hover); color: #fff; }
.tab-menu-danhmuc > .tab-panels { flex: 0 0 100%; margin-top: 20px; padding: 0; }
.tab-menu-danhmuc > .tab-panels > .panel { padding: 0; }
.danhmuc { width: 100%; margin: 0; }
.danhmuc .box-image { position: relative; padding-bottom: 100%; height: 0 !important; overflow: hidden; border-radius: 10px; background-color: color-mix(in srgb, var(--mainColor) 5%, transparent); }
.danhmuc .box-image img { position: absolute; inset: 0; margin: auto; width: auto !important; max-width: 100%; max-height: 60%; transition: all .5s ease; }
.danhmuc .box-text { padding: 10px 0 0 !important; font-size: 14px; }
.danhmuc .box-text .title { font-size: 18px; font-weight: 700 !important; margin: 0 !important; line-height: 1.5 !important; color: #000; }
.danhmuc .box-text .count { margin: 0 !important; font-size: 14px; line-height: 21px; }
/* "Danh mục nổi bật" = WooCommerce categories ([ux_product_categories class="mps-cat-row"]) drawn as the reference's .danhmuc card */
.mps-cat-row.row { margin-left: -10px !important; margin-right: -10px !important; width: auto !important; max-width: none !important; }
.mps-cat-row .product-category.col { flex-basis: 12.5%; max-width: 12.5%; padding: 0 10px !important; margin: 0 !important; }
.mps-cat-row .box-category { border-radius: 10px; overflow: hidden; }
.mps-cat-row .box-category .box-image { position: relative; padding-bottom: 100%; height: 0; overflow: hidden; border-radius: 10px; background-color: color-mix(in srgb, var(--mainColor) 5%, transparent); }
.mps-cat-row .box-category .box-image > div { position: absolute; inset: 0; padding: 0 !important; }
.mps-cat-row .box-category .box-image img { position: absolute; inset: 0; margin: auto; width: auto !important; height: auto; max-width: 100%; max-height: 60%; transition: all .5s ease; }
.mps-cat-row .box-category .box-text { padding: 10px 0 0 !important; text-align: center; }
.mps-cat-row .box-category .header-title { font-size: 18px; font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1.5; color: #000; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mps-cat-row .box-text-inner { position: relative; padding-bottom: 21px; }
.mps-cat-row .box-text-inner .count, .mps-cat-row .box-text-inner .cat-more { position: absolute; left: 0; bottom: 0; width: 100%; margin: 0; font-size: 14px; line-height: 21px; text-transform: none; letter-spacing: 0; opacity: 1; color: #000; transition-duration: .3s; }
.mps-cat-row .box-text-inner .count:has(+ .count-zero) { display: none; }
.mps-cat-row .box-text-inner .cat-more { opacity: 0; visibility: hidden; transform: translateY(-100%); text-decoration: underline; }
.mps-cat-row .product-category:hover .box-text-inner .count { opacity: 0; visibility: hidden; transform: translateY(100%); }
.mps-cat-row .product-category:hover .box-text-inner .cat-more { opacity: 1; visibility: visible; transform: translateY(0); color: var(--hover); }
.mps-cat-row .flickity-prev-next-button { width: 40px; height: 40px; background: var(--mainColor); color: #fff; border-radius: 50%; opacity: 1; top: 40%; }
.mps-cat-row .flickity-prev-next-button svg { padding: 10px; }
.mps-cat-row .flickity-prev-next-button:disabled { display: none; }
@media (max-width: 1199px) {
	.mps-cat-row .product-category.col { flex-basis: 25%; max-width: 25%; }
}
@media (max-width: 767px) {
	.mps-cat-row.row { margin-left: -5px !important; margin-right: -5px !important; }
	.mps-cat-row .product-category.col { flex-basis: 50%; max-width: 50%; padding: 0 5px !important; }
}
@media (max-width: 767px) {
	.tab-menu-danhmuc { flex-direction: column; align-items: flex-start; gap: 5px; }
	.tab-menu-danhmuc > h4 { font-size: 20px; }
	.tab-menu-danhmuc > .tab-panels { margin-top: 15px; }
}

/* ---------- 9. Home: coupons ---------- */
@media (min-width: 767px) {
	.section_coupon { min-height: 140px; }
}
#content .coupon-row > .col { padding: 10px; }
.coupon-item > .col-inner {
	position: relative;
	display: flex !important;
	flex-direction: column;
	justify-content: space-between;
	min-height: 120px;
	padding: 8px 8px 8px 20px;
	box-shadow: 6px 6px 0 0 rgba(0, 0, 0, .04);
	border: 1px solid #f3f3f3;
	border-radius: 0 10px 10px 0;
	background: #fff;
	filter: drop-shadow(0 0 3px rgba(255, 255, 255, .15));
}
.coupon-item > .col-inner::before {
	content: "";
	position: absolute;
	top: 0;
	left: -3px;
	height: 100%;
	width: 10px;
	color: var(--mainColor);
	background: repeating-linear-gradient(#efefef, #efefef 5px, transparent 0, transparent 9px, #efefef 0, #efefef 10px) 0 / 1px 100% no-repeat, radial-gradient(circle at 0 7px, transparent, transparent 2px, #efefef 0, #efefef 3px, currentColor 0) 1px 0 / 100% 10px repeat-y;
}
.coupon_head { margin-bottom: 5px; font-size: 13px; }
.coupon_head .coupon-code { font-size: 18px; }
.coupon_head .coupon-code b { font-weight: 600; color: var(--hover); }
.coupon_head .coupon-date { font-size: 14px; color: #898989; font-weight: 500; }
.coupon-item .col-inner { flex-wrap: wrap; }
.coupon-item .button { margin: 0 5px 0 0; padding: 5px 20px; font-size: 14px; line-height: 21px; min-height: 0; text-transform: none; letter-spacing: 0; font-weight: 400; border-radius: 20px; border: 0; }
.coupon-item .btn-copy { background: var(--mainColor); }
.coupon-item .btn-detail { background: var(--hover); }
.coupon-item .btn-copy:hover { background: var(--hover); }
.coupon-item .btn-detail:hover { background: var(--mainColor); }
.mps-voucher { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, .6); display: none; align-items: center; justify-content: center; }
.mps-voucher.is-open { display: flex; }
.mps-voucher-box { position: relative; background: #fff; border-radius: 10px; padding: 20px; width: 400px; max-width: 90vw; }
.mps-voucher-title { font-size: 20px; font-weight: 700; color: var(--mainColor); margin-bottom: 10px; }
.mps-voucher-close { position: absolute; right: 10px; top: 5px; border: 0; background: none; font-size: 26px; cursor: pointer; margin: 0; padding: 0; min-height: 0; line-height: 1; }
.mps-voucher li { margin: 0 0 5px; list-style: none; }

/* ---------- 10. Home: flash sale ---------- */
.section_flashsale .row-title-flash {
	margin: 0 15px 20px !important;
	width: auto;
	background-color: color-mix(in srgb, var(--hover) 5%, transparent);
	padding: 20px 5px;
	border-radius: 20px;
	box-shadow: 0 0 5px 0 var(--hover);
	align-items: center;
}
.section_flashsale .row-title-flash > .col { padding: 0 15px; }
.title1 { display: inline-flex !important; width: auto !important; align-items: center; gap: 5px; background: #fff; color: var(--mainColor); padding: 5px 15px; border-radius: 25px; font-weight: 700; border: 1px solid var(--mainColor); margin-bottom: 10px; }
.title1 .icon-box-img { margin: 0 !important; width: 25px !important; }
.title1 .icon-box-img img { width: 25px; height: auto; }
.title1 .icon-box-text { padding: 0 !important; }
.title1 p { margin: 0 !important; line-height: 1.5; font-size: 14px; }
.title-block .title2 { font-size: 36px; font-weight: 700 !important; margin: 0 0 10px !important; line-height: 1.2 !important; color: #000; }
.title-block .title2 a { color: inherit; }
.title-block .title3 { font-size: 18px; margin: 0 0 10px !important; }
.check-list li { display: flex !important; align-items: center; gap: 10px; margin: 0 0 5px !important; color: #696969; font-weight: 500; font-size: 16px; }
.check-list li::before { content: ""; width: 24px; height: 24px; flex: none; background: var(--mainColor); -webkit-mask: url(../icons/checkcircle.svg) center / contain no-repeat; mask: url(../icons/checkcircle.svg) center / contain no-repeat; }
.col-flash-count > .col-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.col-flash-count .banner-flash { width: 400px !important; max-width: 100%; position: relative; bottom: -10px; margin: 0 auto; }
.col-flash-count .ux-timer {
	display: inline-flex;
	justify-content: center;
	gap: 5px;
	align-items: center;
	font-size: 14px !important;
	text-align: center;
	color: #000;
	background: #fff;
	padding: 40px;
	margin: auto;
	border: 2px dashed var(--mainColor);
	border-radius: 10px;
	position: relative;
	z-index: 1;
}
.col-flash-count .ux-timer .block-timer { display: inline-flex; justify-content: center; align-items: center; background: var(--hover); padding: 5px; width: 80px; height: 80px; border-radius: 5px; color: #fff; }
.col-flash-count .ux-timer .block-timer p { margin: 0 !important; font-size: 16px; line-height: 1.5; }
.col-flash-count .ux-timer .block-timer b { display: flex; font-size: 30px; line-height: 35px; align-items: center; justify-content: center; }
.col-flash-count .ux-timer > i { font-style: normal; font-size: 30px; font-weight: 600; color: #000; }
.col-flash-count .ux-timer > span { background: var(--hover); color: #fff; border-radius: 5px; width: 80px; height: 80px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; margin: 0; box-shadow: none; }
.col-flash-count .ux-timer > span strong { font-size: 16px; font-weight: 400; text-transform: none; color: #fff; padding: 0; }
@media (max-width: 767px) {
	.title-block .title2 { font-size: 20px; }
	.title-block .title3, .check-list li { font-size: 14px; }
	.col-flash-count .ux-timer { padding: 15px; }
	.col-flash-count .ux-timer .block-timer { width: 50px; height: 50px; }
	.col-flash-count .ux-timer .block-timer b { font-size: 24px; line-height: 24px; }
	.col-flash-count .ux-timer > i { font-size: 16px; line-height: 16px; margin: 0 5px; }
}

/* ---------- 11. Home: about ---------- */
.section_about .image-about { margin-bottom: 20px; }
.title-about1 { display: inline-flex !important; width: auto !important; align-items: center; gap: 5px; background: var(--mainColor); color: #fff; padding: 5px 15px; border-radius: 25px; font-weight: 700; border: 1px solid var(--mainColor); margin-bottom: 10px; }
.title-about1 .icon-box-img { margin: 0 !important; width: 25px !important; }
.title-about1 .icon-box-text { padding: 0 !important; }
.title-about1 p { margin: 0 !important; font-size: 14px; line-height: 1.5; }
.about-text .title-about2 { font-size: 36px; font-weight: 700 !important; margin: 0 0 10px !important; line-height: 1.2 !important; color: #000; }
.about-text .content-about { font-size: 16px; margin: 0 0 20px !important; }
.about-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.about-list li { padding: 10px; border-radius: 5px; display: flex !important; align-items: center; gap: 5px; font-weight: 600; font-size: 16px; margin: 0 !important; }
.about-list li::before { content: ""; width: 18px; height: 18px; flex: none; background: var(--mainColor); -webkit-mask: url(../icons/check.svg) center / contain no-repeat; mask: url(../icons/check.svg) center / contain no-repeat; }
.about-list li:nth-child(1), .about-list li:nth-child(6) { background: #dff5fa; }
.about-list li:nth-child(2), .about-list li:nth-child(5) { background: #ffe5d6; }
.about-list li:nth-child(3) { background: #edf5dc; }
.about-list li:nth-child(4) { background: #f3dfff; }
@media (max-width: 767px) {
	.about-text .title-about2 { font-size: 20px; }
	.about-text .content-about, .about-list li { font-size: 14px; }
}

/* ---------- 12. Home: reasons ---------- */
#content .section_lydo { padding: 70px 0 !important; background-color: color-mix(in srgb, var(--mainColor) 5%, transparent); }
.section_lydo .section-bg img, .section_lydo .bg { object-fit: cover; }
.section_lydo .title-name h3 { text-align: center; font-size: 36px; font-weight: 700 !important; color: var(--mainColor); margin: 0 0 50px !important; line-height: 1.2 !important; }
.lydo-item { display: flex !important; align-items: center; gap: 20px; margin-bottom: 40px; }
.lydo-item .icon-box-img { position: relative; flex: 0 0 100px; width: 100px !important; height: 100px; margin: 0 !important; display: flex; align-items: center; justify-content: center; background: var(--mainColor); border-radius: 50%; }
.lydo-item .icon-box-img::before { content: ""; position: absolute; left: 10px; top: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border: 1px dashed #fff; border-radius: 50%; }
.lydo-item .icon-box-img .icon, .lydo-item .icon-box-img .icon-inner { display: flex; align-items: center; justify-content: center; }
.lydo-item .icon-box-img img { max-height: 60px; width: auto; }
.lydo-item .icon-box-text { padding: 0 !important; }
.lydo-item .lydo-title { font-weight: 700 !important; font-size: 20px; margin: 0 !important; line-height: 1.5 !important; color: #000; }
.lydo-item p { margin: 0 !important; font-size: 16px; line-height: 1.5; }
@media (min-width: 1199px) {
	.list-lydo-left .lydo-item { flex-direction: row-reverse; text-align: right; }
	.list-lydo-left .lydo-item:nth-child(2), .list-lydo-left .lydo-item:nth-child(3) { padding-right: 50px; }
	.list-lydo-right .lydo-item:nth-child(2), .list-lydo-right .lydo-item:nth-child(3) { padding-left: 50px; }
}
@media (max-width: 1198px) {
	.list-lydo-left .lydo-item { flex-direction: row; text-align: left; }
	.lydo-center { margin-bottom: 20px; text-align: center; }
}
@media (max-width: 991px) {
	.section_lydo .title-name h3 { margin-bottom: 20px !important; }
	.lydo-item { margin-bottom: 15px; }
	.lydo-item .icon-box-img { flex-basis: 70px; width: 70px !important; height: 70px; }
	.lydo-item .icon-box-img img { max-height: 40px; }
	.lydo-item .lydo-title { font-size: 16px; }
	.lydo-item p { font-size: 14px; }
}
@media (max-width: 767px) {
	.section_lydo .title-name h3 { font-size: 24px; }
}

/* ---------- 13. Home: product blocks + banners ---------- */
.section_product .thumb-title-product, .section_product_tab .thumb-title-product {
	margin: 0 15px 20px !important;
	width: auto;
	padding: 20px 5px;
	border-radius: 20px;
	box-shadow: 0 0 5px 0 var(--mainColor);
	background-color: color-mix(in srgb, var(--mainColor) 5%, transparent);
}
.section_product .thumb-title-product > .col, .section_product_tab .thumb-title-product > .col { padding: 0 15px; }
.section_product .col-img-pro .img { text-align: center; }
.section_product .img-pro img { max-height: 400px; width: auto; margin: 0 auto; }
.section_2_banner .img, .section_2_banner .img-inner { border-radius: 0; }
.section_product_tab .title-block .title2 { font-size: 50px; max-width: 50%; }
.section_product_tab .row-tabs .tabbed-content > .nav { display: flex; gap: 10px; margin: 0 0 40px; flex-wrap: nowrap; }
@media (max-width: 1199px) {
	.section_product_tab .title-block .title2 { max-width: 100%; }
}
@media (max-width: 767px) {
	.section_product_tab .title-block .title2 { font-size: 20px; }
}

/* Product tab pills */
.tabs-title > .nav > li { margin: 0; }
.tabs-title > .nav > li > a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 120px;
	justify-content: center;
	font-size: 15px;
	font-weight: 400;
	color: #000;
	background: #fff;
	border: 1px solid #bfbfbf;
	padding: 10px 15px;
	border-radius: 30px;
	text-transform: none;
	letter-spacing: 0;
	line-height: 22px;
}
.tabs-title > .nav > li > a::before { content: ""; width: 20px; height: 20px; background: url(/wp-content/uploads/2026/10/title_image_1_allpro1.png) center / contain no-repeat; }
.tabs-title > .nav > li:nth-child(2) > a::before { background-image: url(/wp-content/uploads/2026/10/title_image_2_allpro1.png); }
.tabs-title > .nav > li:nth-child(3) > a::before { background-image: url(/wp-content/uploads/2026/10/title_image_3_allpro1.png); }
.tabs-title > .nav > li:nth-child(4) > a::before { background-image: url(/wp-content/uploads/2026/10/title_image_4_allpro1.png); }
.tabs-title > .nav > li.active > a, .tabs-title > .nav > li > a:hover { color: #fff; background: var(--mainColor); border-color: var(--mainColor); }
.tabs-title > .tab-panels { padding: 0; }
.tabs-title .panel { padding: 0; }
#content .product-grid { margin: 0 -10px; width: auto; }
#content .product-grid > .col { padding: 0 10px; margin-bottom: 20px; }
@media (max-width: 1199px) {
	#content .product-grid { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; }
	.section_product_tab .row-tabs .tabbed-content > .nav { overflow-x: auto; }
}
@media (max-width: 767px) {
	.section_product_tab .row-tabs .tabbed-content > .nav { margin-bottom: 20px; }
}
@media (max-width: 500px) {
	#content .product-grid { margin: 0 -5px; }
	#content .product-grid > .col { padding: 0 5px; margin-bottom: 10px; }
}

/* ---------- 14. Home: calorie calculator ---------- */
.thumb-image-banner, .section_calculator .thumb-image-banner .img-inner { box-shadow: 0 0 5px 0 var(--mainColor); }
.section_calculator .row-calculator > .col > .col-inner, .section_form .row-form > .col > .col-inner { height: 100%; }
.pet-calculator { --text: #222; height: 100%; }
.pet-calculator__inner { width: 100%; margin: auto; padding: 20px; background-color: color-mix(in srgb, var(--mainColor) 5%, transparent); border-radius: 10px; min-height: 100%; }
.pet-calculator__head { margin-bottom: 30px; }
.pet-calculator__head .title-index { margin: 0 0 4px; }
.pet-calculator__head p { margin: 0 !important; font-size: 14px; }
.pet-calculator__field { margin-bottom: 38px; }
.pet-calculator__field--speed { margin-top: 8px; }
.pet-calculator__label { margin-bottom: 14px; font-size: 14px; font-weight: 500; }
.pet-calculator__tabs { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); height: 35px; border-radius: 20px; background: #f6f8f5; }
.pet-calculator__tabs[data-name="weight-speed"] { grid-template-columns: repeat(3, 1fr); }
.pet-calculator__tabs button { position: relative; z-index: 2; height: 35px; min-height: 0; margin: 0; padding: 0 15px; border: 0; border-radius: 20px; background: transparent; font-family: inherit; font-size: 13px; font-weight: 400; color: #999; cursor: pointer; text-transform: none; letter-spacing: 0; line-height: 1.5; }
.pet-calculator__tabs button.is-active { color: #222; font-weight: 500; background: #fff; border: 1px solid var(--mainColor); box-shadow: 0 8px 15px rgba(0, 0, 0, .12); }
.pet-calculator__numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 40px; }
.pet-calculator__number { padding: 10px 10px 11px; border-radius: 8px; background-color: color-mix(in srgb, var(--mainColor) 5%, transparent); }
.pet-calculator__number-title { margin-bottom: 4px; font-size: 12px; font-weight: 500; color: var(--mainColor); white-space: nowrap; }
.pet-calculator__number-control { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.pet-calculator__number-control > button { display: flex; align-items: center; justify-content: center; flex: 0 0 22px; width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--mainColor); font-size: 18px; line-height: 1; cursor: pointer; }
.pet-calculator__number-control > button:hover { background: var(--mainColor); color: #fff; }
.pet-calculator__number-value { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pet-calculator__number-value strong { display: block; font-size: 18px; font-weight: 600; color: #111; line-height: 1.5; }
.pet-calculator__number-value span { margin-top: 4px; font-size: 10px; color: var(--mainColor); line-height: 1.5; }
.pet-calculator__note { margin-top: 14px; font-size: 11px; font-style: italic; }
.pet-calculator__submit { display: flex; align-items: center; justify-content: center; min-width: 225px; height: 50px; margin: 0 auto; padding: 0 25px; border: 0; border-radius: 40px; background: var(--mainColor); color: #fff; font-family: inherit; font-size: 17px; font-weight: 600; cursor: pointer; text-transform: none; letter-spacing: 0; line-height: 1.5; }
.pet-calculator__submit:hover { background: var(--hover); color: #fff; }
.pet-calculator__result { display: none; margin-top: 35px; padding: 25px; border-radius: 12px; background-color: color-mix(in srgb, var(--hover) 5%, transparent); text-align: center; }
.pet-calculator__result.is-show { display: block; }
.pet-calculator__result-title { margin-bottom: 8px; font-size: 14px; color: var(--mainColor); }
.pet-calculator__result-calories { display: flex; align-items: baseline; justify-content: center; gap: 7px; }
.pet-calculator__result-calories strong { font-size: 36px; color: var(--mainColor); }
.pet-calculator__result-calories span { font-size: 13px; color: #555; }
.pet-calculator__result-desc { margin-top: 8px; font-size: 12px; color: #777; }
@media (max-width: 1199px) {
	.section_calculator .col-calo-img, .section_form .col-form-img, .section_faq .col-faq-img { margin-bottom: 20px; }
}
/* Wide screens: image 5/12, content 7/12 (the reference's col-xl-5 / col-xl-7 above 1500px). */
@media (min-width: 1501px) {
	.section_calculator .col-calo-img, .section_form .col-form-img, .section_faq .col-faq-img { flex-basis: 41.6667%; max-width: 41.6667%; }
	.section_calculator .col-calo, .section_form .col-form, .section_faq .thumb-faq { flex-basis: 58.3333%; max-width: 58.3333%; }
}
@media (max-width: 767px) {
	.pet-calculator__numbers { gap: 8px; grid-template-columns: 1fr; }
	.pet-calculator__number { padding: 10px 6px; }
	.pet-calculator__number-title { font-size: 10px; }
	.pet-calculator__number-control { gap: 2px; }
	.pet-calculator__number-control > button { flex-basis: 20px; width: 20px; height: 20px; }
	.pet-calculator__number-value strong { font-size: 17px; }
	.pet-calculator__tabs button { font-size: 12px; }
}

/* ---------- 15. Home: reviews ---------- */
#content .section_review { padding: 100px 0 !important; background-color: color-mix(in srgb, var(--mainColor) 5%, transparent); }
.video-review video { width: 100%; display: block; border-radius: 20px; border: 5px solid var(--mainColor); }
.section_review .title-index h2 { font-size: 26px; }
.review-swiper { margin: 0; }
.review-thumb { margin: auto; position: relative; background: #fff; padding: 50px; border-radius: 20px; display: flex !important; flex-direction: column; align-items: center; }
.review-thumb .testimonial-image { width: 96px !important; height: 96px; border-radius: 20px !important; overflow: hidden; margin: 0 auto 10px !important; order: 0; }
.review-thumb .testimonial-image img { border-radius: 20px; width: 96px; height: 96px; object-fit: cover; }
.review-thumb .icon-box-text { display: flex; flex-direction: column; align-items: center; padding: 0 !important; }
.review-thumb .star-rating { order: 0; margin: 0 auto 20px; color: #ffc800; font-size: 21px; }
.review-thumb .testimonial-meta { order: 1; text-align: center; margin-bottom: 20px; padding: 0; display: flex; flex-direction: column; }
.review-thumb .testimonial-name { font-size: 24px; font-weight: 700; color: var(--mainColor); }
.review-thumb .testimonial-name-divider { display: none; }
.review-thumb .testimonial-company { font-weight: 700; color: #000; }
.review-thumb .testimonial-text { order: 2; font-size: 18px; text-align: center; font-style: italic; line-height: 1.5; }
.review-thumb .testimonial-text p { margin: 0 !important; }
@media (max-width: 1199px) {
	.section_review .col-video { margin-bottom: 20px; }
}
@media (max-width: 767px) {
	.review-thumb .testimonial-name { font-size: 20px; }
	.review-thumb .testimonial-text { font-size: 16px; }
}

/* ---------- 16. Home: booking form (Contact Form 7) ---------- */
.section_form .title-index h3 { margin: 0; font-size: 26px; }
.section_form .title-index { padding: 5px; }
.section_form .radio-group { padding: 20px; background-color: color-mix(in srgb, var(--mainColor) 5%, transparent); border-radius: 10px; margin-bottom: 20px; }
.section_form .name-input { color: var(--mainColor); font-weight: 700; font-size: 20px; margin-bottom: 10px; }
.section_form .wpcf7-radio { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.section_form .wpcf7-radio .wpcf7-list-item { margin: 0; text-align: center; }
.section_form .wpcf7-radio label { display: block; padding: 10px; border-radius: 10px; background: #fff; width: 100%; height: 100%; margin: 0; font-size: 14px; font-weight: 400; border: 1px solid transparent; cursor: pointer; }
.section_form .wpcf7-radio label:has(input:checked), .section_form .wpcf7-radio label:hover { border-color: var(--mainColor); box-shadow: 0 0 5px 0 var(--mainColor); }
.section_form .wpcf7-radio input { display: none; }
.section_form .wpcf7-list-item-label { display: block; }
.section_form .wpcf7-list-item-label::before { content: ""; display: block; width: 100%; aspect-ratio: 1; margin: 0 auto; background: url(/wp-content/uploads/2026/10/dv_1.jpg) center / contain no-repeat; }
.section_form .wpcf7-list-item:nth-child(2) .wpcf7-list-item-label::before { background-image: url(/wp-content/uploads/2026/10/dv_2.jpg); }
.section_form .wpcf7-list-item:nth-child(3) .wpcf7-list-item-label::before { background-image: url(/wp-content/uploads/2026/10/dv_3.jpg); }
.section_form .wpcf7-list-item:nth-child(4) .wpcf7-list-item-label::before { background-image: url(/wp-content/uploads/2026/10/dv_4.jpg); }
.section_form .wpcf7-list-item:nth-child(5) .wpcf7-list-item-label::before { background-image: url(/wp-content/uploads/2026/10/dv_5.jpg); }
.section_form .wpcf7-list-item:nth-child(6) .wpcf7-list-item-label::before { background-image: url(/wp-content/uploads/2026/10/dv_6.jpg); }
.section_form .group_contact { padding: 20px; background-color: color-mix(in srgb, var(--mainColor) 5%, transparent); border-radius: 10px; }
.section_form .form-row-2 { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.section_form .form-group { flex: 0 0 50%; max-width: 50%; padding: 0 10px; margin-bottom: 20px; }
.section_form .form-group label { display: block; font-weight: 700; font-size: 14px; margin: 0 0 .5rem; width: auto; color: #000; }
.section_form .form-group input { display: block; width: 100%; height: auto; padding: 10px; border-radius: 10px; border: 1px solid #eee; box-shadow: none; font-size: 14px; line-height: 1.5; margin: 0; background: #fff; }
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.button-style .wpcf7-submit, .button-style button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 50px;
	padding: 0 5px 0 25px;
	margin: 0;
	border: 0;
	border-radius: 40px;
	background: var(--mainColor);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.5;
}
.button-style .wpcf7-submit:hover { background: var(--hover); }
.wpcf7-spinner { display: none; }
@media (max-width: 767px) {
	.section_form .wpcf7-radio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
	.section_form .form-group { flex-basis: 100%; max-width: 100%; }
}

/* ---------- 17. Home: latest news + cards ---------- */
.title-blog h2 { font-size: 26px; margin: 0 !important; }
.title-blog h2 a { color: var(--mainColor); }
.item-blog { overflow: hidden; background-color: color-mix(in srgb, var(--mainColor) 5%, transparent); border-radius: 10px; padding: 15px; width: 100%; height: 100%; }
.item-blog .box-image { position: relative; padding-bottom: 100%; height: 0 !important; margin-bottom: 10px; border-radius: 0; overflow: hidden; }
.item-blog .box-image img { position: absolute; inset: 0; margin: auto; width: auto !important; max-height: 100%; transition: all .5s ease; }
.item-blog:hover .box-image img { transform: scale(1.2); }
.item-blog .box-text { padding: 0 !important; font-size: 14px; }
.item-blog .info-post { display: flex !important; gap: 8px; align-items: center; margin: 0 0 10px !important; }
.item-blog .info-post li { display: flex !important; align-items: center; gap: 5px; margin: 0 !important; }
.item-blog .info-post li::before { content: ""; width: 16px; height: 16px; background: var(--hover); -webkit-mask: url(../icons/date.svg) center / contain no-repeat; mask: url(../icons/date.svg) center / contain no-repeat; }
.item-blog .info-post li.comment::before { -webkit-mask-image: url(../icons/comment.svg); mask-image: url(../icons/comment.svg); }
.item-blog .blog-title { margin: 0 0 .5rem !important; font-size: 16px; line-height: 1.2 !important; }
.item-blog .blog-title a { color: #000; font-size: 16px; font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.4; max-height: calc(1em * 1.4 * 2); }
.item-blog .blog-title a:hover { color: var(--mainColor); }
.item-blog .blog-excerpt { margin: 0 0 10px !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; line-height: 1.4; max-height: calc(1em * 1.4 * 3); }
.item-blog .read-more a { color: var(--mainColor); display: inline-flex; gap: 2px; align-items: center; font-weight: 700; }
.item-blog .read-more a::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url(../icons/arrow.svg) center / 13px no-repeat; mask: url(../icons/arrow.svg) center / 13px no-repeat; }
.item-blog .read-more a:hover { color: var(--hover); }

/* ---------- 18. Home: FAQ ---------- */
.section_faq .thumb-image-banner .img-inner, .section_faq .thumb-image-banner { box-shadow: 0 0 5px 0 var(--mainColor); }
.section_faq .thumb-faq > .col-inner { padding: 20px; background-color: color-mix(in srgb, var(--mainColor) 5%, transparent); border-radius: 10px; min-height: 100%; }
.section_faq .row-faq > .col > .col-inner { height: 100%; }
.title-faq { margin-bottom: 30px; }
.title-faq h2 { font-size: 26px; font-weight: 700 !important; color: var(--mainColor); margin: 0 !important; line-height: 1.5 !important; }
.title-faq p { font-size: 14px; color: #000; margin: 0 !important; }
.faq .accordion-item { padding: 10px 20px; border-radius: 10px; margin-bottom: 10px; background: #fff; border: 0; }
.faq .accordion-item:last-child { margin-bottom: 0; }
.faq .accordion-title {
	position: relative;
	font-size: 16px;
	font-weight: 500;
	padding: 5px 35px 5px 0;
	border: 0;
	color: #000;
	line-height: 1.2;
	display: block;
}
.faq .accordion-title.active { color: var(--mainColor); background: transparent; }
.faq .accordion-title .toggle {
	position: absolute;
	right: 0;
	left: auto;
	top: 50%;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	min-height: 0;
	transform: translateY(-50%);
	background: var(--mainColor);
	border-radius: 50%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	line-height: 1;
}
.faq .accordion-title .toggle i { font-size: 16px; color: #fff; margin: 0; transition: .5s; }
.faq .accordion-title.active .toggle { background: var(--hover); }
.faq .accordion-title.active .toggle i { transform: rotate(180deg); }
.faq .accordion-inner { margin-top: 10px; padding: 10px 0 0; font-size: 14px; border-top: 1px solid #eee; }
.faq .accordion-inner p { margin: 0 !important; }
@media (max-width: 767px) {
	.faq .accordion-item { padding: 10px; }
}

/* ---------- 19. Home: brands ---------- */
#content .brand-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 0 15px; margin: 0 auto; }
#content .brand-row > .col { max-width: none; width: auto; flex: none; padding: 0; }
.brand-item { border-radius: 5px; overflow: hidden; padding: 5px; text-align: center; background-color: color-mix(in srgb, var(--mainColor) 5%, transparent); }
.brand-item .box-image { position: relative; padding-bottom: 40%; height: 0 !important; }
.brand-item .box-image img { position: absolute; inset: 0; margin: auto; width: auto !important; max-height: 100%; }
.brand-item .box-text { padding: 0 !important; }
.brand-item .brand-name { margin: 10px 0 0 !important; font-size: 16px; font-weight: 700; color: #000; }
@media (max-width: 1199px) {
	#content .brand-row { grid-template-columns: repeat(6, calc((100% - 40px) / 5)); overflow-x: auto; }
}
@media (max-width: 990px) {
	#content .brand-row { grid-template-columns: repeat(6, calc((100% - 30px) / 4)); }
}
@media (max-width: 767px) {
	#content .brand-row { grid-template-columns: repeat(6, calc((100% - 20px) / 3)); }
}

/* ---------- 20. Fixes after the first compare ---------- */
.coupon-item > .col-inner { flex-direction: row !important; flex-wrap: wrap; align-content: space-between; align-items: center; gap: 0; }
.coupon-item .coupon_head { flex: 0 0 100%; }
.coupon-item .button { flex: none; width: auto; display: inline-flex; }
.col-flash-count .ux-timer { display: inline-flex !important; width: auto !important; }
/* "Xem tất cả" pill with the red arrow circle */
#content .row-more { margin-top: 20px; }
.button-style .button.btn-more, .button-style .wpcf7-submit {
	background: var(--mainColor);
	color: #fff;
	padding: 7px 7px 7px 20px;
	border-radius: 25px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 18px;
	line-height: 27px;
	min-height: 0;
	margin: 0;
	border: 0;
	text-transform: none;
	letter-spacing: 0;
	height: auto;
}
.button-style .button.btn-more::after {
	content: "";
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: var(--hover) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M15 18l6-6-6-6'/%3E%3Cpath d='M3 12h17'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.button-style .button.btn-more:hover { background: var(--hover); }
.button-style .button.btn-more:hover::after { background-color: var(--mainColor); }
.wpcf7 .button-style { position: relative; display: inline-block; }
.wpcf7 .button-style .wpcf7-submit { padding-right: 52px; height: 49px; }
.wpcf7 .button-style::after {
	content: "";
	position: absolute;
	right: 7px;
	top: 7px;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	pointer-events: none;
	background: var(--hover) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M15 18l6-6-6-6'/%3E%3Cpath d='M3 12h17'/%3E%3C/svg%3E") center / 20px no-repeat;
}
@media (max-width: 767px) {
	.button-style .button.btn-more, .button-style .wpcf7-submit { font-size: 16px; }
	.button-style .button.btn-more::after { width: 30px; height: 30px; }
}
/* Product tabs: the pills sit inside the title box like the reference */
.section_product_tab .thumb-title-product { padding-bottom: 84px !important; }
#content .section_product_tab .row-tabs { margin-top: -84px; position: relative; z-index: 2; }
.section_product_tab .row-tabs .tabbed-content > .nav { padding: 0 20px; }
/* Reviews: navy blob behind the video, card order */
.section_review .video-review { position: relative; }
.section_review .video-review::before {
	content: "";
	position: absolute;
	width: 130%;
	height: 130%;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	-webkit-mask: url(../icons/after_review.png) center / contain no-repeat;
	mask: url(../icons/after_review.png) center / contain no-repeat;
	background-color: var(--mainColor);
	opacity: .6;
	z-index: 0;
}
.section_review .video-review video { position: relative; z-index: 1; }
.review-thumb .testimonial-text { order: 1; margin-bottom: 20px; }
.review-thumb .testimonial-meta { order: 2; margin-bottom: 0; }
.review-thumb .star-rating { margin-bottom: 20px; }

/* ---------- 21. Container widths of the reference (Bootstrap 4 + 1700 on xl) ---------- */
:root { --cw: 1700px; }
@media (max-width: 1199px) { :root { --cw: 960px; } }
@media (max-width: 991px) { :root { --cw: 720px; } }
@media (max-width: 767px) { :root { --cw: 540px; } }
@media (max-width: 575px) { :root { --cw: 100%; } }
#wrapper .container, .topbar .container, #header .container, .absolute-footer .container { max-width: var(--cw); }
#content .section-content > .row, #footer .section-content > .row { max-width: var(--cw); }
#content .section-content > .mps-carousel, #content .section-content > .mps-carousel-wrap {
	width: calc(min(100%, var(--cw)) - 30px);
	margin-left: auto;
	margin-right: auto;
}
#content .mps-carousel-wrap > .mps-carousel { width: 100%; }
.section_flashsale .row-title-flash, .section_product .thumb-title-product, .section_product_tab .thumb-title-product {
	width: calc(min(100%, var(--cw)) - 30px) !important;
	max-width: none !important;
	margin: 0 auto 20px !important;
}
#content .brand-row { width: calc(min(100%, var(--cw)) - 30px); padding: 0; }

/* Mobile header: logo row 10 + 65 + 10, search 15 + 50 + 10 (= 150) */
@media (max-width: 849px) {
	#header .header-main .header-inner { padding: 10px 15px 0; min-height: 75px; }
	#header .header-bottom .flex-row { padding: 15px 15px 10px; }
	#header .header-bottom .searchform { height: 50px; }
}

/* Reasons below 1199: image first, two lists side by side (one on phones) */
@media (max-width: 1198px) {
	.section_lydo .row-lydo > .lydo-center { order: -1; flex-basis: 100%; max-width: 100%; }
}

/* ---------- 22. Product card built from the Image Box element ---------- */
.box.product-action { padding: 5px; border-radius: 10px; overflow: hidden; background-color: color-mix(in srgb, var(--mainColor) 5%, transparent); height: 100%; position: relative; margin: 0; width: 100%; }
.product-action .box-image { position: relative; padding-bottom: 100%; height: 0 !important; overflow: hidden; border-radius: 5px; width: 100% !important; }
.product-action .box-image img { position: absolute; inset: 0; margin: auto; width: auto !important; max-width: 100%; max-height: 100%; }
.product-action .box-text { padding: 10px 0 0 !important; position: static; font-size: 14px; }
.product-action .box-text-inner { position: static; }
.product-action .sale-off { position: absolute; top: 10px; left: 10px; background: var(--price); color: #fff; font-size: 14px; line-height: 21px; padding: 2px 10px; border-radius: 50px; box-shadow: 0 0 5px 1px #fff; font-weight: 700; z-index: 9; }
.product-action .min-productcount { font-weight: 700; margin: 2px 0 10px; line-height: 21px; }
.product-action .min-productcount::after {
	content: "";
	display: block;
	height: 8px;
	border-radius: 5px;
	background: linear-gradient(var(--mainColor), var(--mainColor)) 0 0 / 62% 100% no-repeat, #dfdfdf;
}
.product-action .product-name { font-size: 16px !important; margin: 0 0 10px !important; font-weight: 400 !important; line-height: 1.4 !important; }
.product-action .product-name a { color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: calc(1em * 1.4 * 2); }
.product-action .price-box { min-height: 45px; }
.product-action .price-box .price { font-size: 16px; font-weight: 700; color: var(--price); display: block; line-height: 1.5; }
.product-action .price-box .compare-price { color: #999; font-size: 14px; line-height: 1.5; }
.product-action .group-button { gap: 10px; display: flex; width: 100%; margin-top: 10px; }
.product-action .group-button a { width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--mainColor); border-radius: 10px; color: #fff; font-size: 14px; }
.product-action .group-button a:hover { background: var(--hover); color: #fff; }
.product-action .group-button .btn-cart { flex: 0 0 40px; width: 40px; font-size: 0; background: #fff; border: 1px solid var(--mainColor); color: var(--mainColor); }
.product-action .group-button .btn-cart::before { content: ""; width: 24px; height: 24px; background: currentColor; -webkit-mask: url(../icons/basket.svg) center / contain no-repeat; mask: url(../icons/basket.svg) center / contain no-repeat; }
.product-action .group-button .btn-cart:hover { background: var(--hover); border-color: var(--hover); color: #fff; }
@media (max-width: 767px) {
	.product-action .product-name { font-size: 14px !important; }
}

/* ---------- 23. Fixes after the second compare ---------- */
.coupon-item > .col-inner { justify-content: flex-start !important; }
@media (max-width: 1199px) {
	#content .product-grid > .col { flex-shrink: 0; }
}
.tabs-title > .nav > li > a { flex-direction: row !important; white-space: nowrap; }
.tabs-title > .nav { flex-wrap: nowrap !important; }
@media (max-width: 1198px) {
	.list-lydo-left .lydo-item .icon-box-img { order: 0 !important; }
	.list-lydo-left .lydo-item .icon-box-text { order: 1 !important; text-align: left; }
}
.review-thumb .testimonial-text, .review-thumb .testimonial-text p { font-size: 18px !important; line-height: 1.5 !important; }
@media (max-width: 767px) {
	.review-thumb .testimonial-text, .review-thumb .testimonial-text p { font-size: 16px !important; }
}
.review-thumb .star-rating { width: auto; letter-spacing: 0; }
@media (max-width: 500px) {
	#content .row.row-fix { padding: 0 10px; }
	#content .row.row-fix > .col { padding: 0 5px; margin-bottom: 10px; }
}

/* ---------- 24. Inner pages: breadcrumb ---------- */
#content > .section.bread-crumb { background: #eee; margin-bottom: 50px; padding: 0 !important; }
.bread-crumb .breadcrumb-line { margin: 0; font-size: 16px; padding: 15px 0; line-height: 24px; color: #000; }
.bread-crumb .breadcrumb-line a { color: #000; }
.bread-crumb .breadcrumb-line a:hover, .bread-crumb .breadcrumb-line strong { color: var(--mainColor); }
.bread-crumb .breadcrumb-line strong { font-weight: 700; }
.bread-crumb .mr_lr { padding: 0 8px; color: #000; }
#content > .section.about, #content > .section.blog_wrapper, #content > .section.page-faq, #content > .section.layout-contact { margin-bottom: 0; }

/* About */
#content .about-card-row { margin: 0 0 30px; width: 100%; }
#content .about-card-row > .col { padding: 0; }
.about .thumb-content > .col-inner { padding: 20px; border-radius: 20px; background: var(--bg); }
.about .about-card-img, .about .about-card-img .img-inner { border-radius: 20px; overflow: hidden; }
.about .thumb-left .about-card-img, .about .about-card-text .title-index, .about .thumb-right .about-card-text .content { margin-bottom: 10px !important; }
.about .about-card-text .title-index { font-size: 26px; font-weight: 700 !important; color: var(--mainColor); line-height: 1.2 !important; }
.about .about-card-text .content { font-size: 16px; margin: 0 !important; }
@media (max-width: 767px) {
	.about .about-card-text .title-index { font-size: 20px; }
}

/* Blog list */
#content > .section.blog_wrapper { margin-bottom: 50px; }
.title-page h1 { color: var(--mainColor); font-size: 36px; font-weight: 700 !important; line-height: 1.2 !important; margin: 0 0 .5rem !important; }
#content .list-blogs { margin: 0 -10px; width: auto; }
#content .list-blogs > .col { padding: 0 10px; margin-bottom: 20px; }
.aside-item .title-head { font-size: 22px; font-weight: 700 !important; margin: 0 0 10px !important; color: var(--mainColor); line-height: 1.2 !important; }
.nav-category li { position: relative; }
.nav-category li a { display: block; padding: 8px 30px 8px 0; font-size: 16px; color: #000; font-weight: 700; }
.nav-category li.active > a, .nav-category li a:hover { color: var(--hover); }
.nav-category li.has-sub::after { content: "+"; position: absolute; right: 7px; top: 8px; font-size: 18px; line-height: 24px; color: #000; font-weight: 300; }
.blog-latest-title { margin-top: 30px; }
.blog-mini { display: flex !important; gap: 10px; margin-bottom: 15px; align-items: flex-start; }
.blog-mini .box-image { flex: 0 0 150px; width: 150px !important; margin: 0; }
.blog-mini .box-text { padding: 0 !important; text-align: left; }
.blog-mini .mini-title { font-size: 16px; font-weight: 700 !important; margin: 0 0 3px !important; line-height: 1.4 !important; }
.blog-mini .mini-title a { color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.blog-mini .mini-date { margin: 0 !important; color: var(--mainColor); font-size: 14px; }

/* FAQ page */
#content > .section.page-faq { margin-bottom: 20px; }
.page-faq .faq-title { font-size: 30px; font-weight: 700 !important; margin: 0 0 10px !important; color: #000; line-height: 1.2 !important; }
.faq-page-list { margin-bottom: 25px; }
.faq-page-list .accordion-item { margin-bottom: 7px; border: 0; }
.faq-page-list .accordion-title {
	display: block;
	color: #000;
	padding: 12px 20px;
	font-size: 18px !important;
	font-weight: 500;
	line-height: 1.3 !important;
	background: #e3e3e3;
	border: 0;
	border-radius: 5px;
}
.faq-page-list .accordion-title .toggle { display: none; }
.faq-page-list .accordion-title.active { background: var(--mainColor); color: #fff; border-radius: 5px 5px 0 0; }
.faq-page-list .accordion-inner { border: 1px solid #acacac; border-top: 0; padding: 15px 20px; border-radius: 0 0 5px 5px; }
.faq-page-list .accordion-inner p { margin-bottom: 0; font-size: 16px; }
.faq-page-list .accordion-inner ol { padding-left: 40px !important; margin-bottom: 1rem !important; font-size: 14px; }
.faq-page-list .accordion-inner ul { padding: 0 !important; margin: 0 !important; list-style: none !important; font-size: 14px; }
.faq-page-list .accordion-inner li { margin: 0 !important; }
.faq-page-list .accordion-inner ol { list-style: decimal !important; }

/* Contact page */
#content > .section.layout-contact { margin-bottom: 30px; }
.layout-contact .title-index { font-size: 26px; font-weight: 700 !important; margin: 0 !important; line-height: 1.2 !important; }
.layout-contact .contact-head .content { font-size: 16px; margin: 0 0 30px !important; display: block; }
.layout-contact .group_contact input:not([type=submit]), .layout-contact .group_contact textarea { border: 1px solid #e6e6e6; width: 100%; outline: none; font-size: 16px; border-radius: 25px; background: #fff; margin: 0 0 10px; box-shadow: none; }
.layout-contact .group_contact input:not([type=submit]) { padding: 5px 20px; height: 50px; }
.layout-contact .group_contact textarea { padding: 10px 20px; height: 142px; min-height: 0; }
.layout-contact .contact-form .wpcf7-form { text-align: center; }
.layout-contact .contact-form .group_contact { text-align: left; }
.layout-contact .contact-form .button-style { margin-top: 20px; display: table; margin-left: auto; margin-right: auto; }
.contact-map { height: 100%; border-radius: 20px; overflow: hidden; }
.contact-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.contact-map { position: relative; min-height: 176px; }
@media (min-width: 768px) { .contact-map iframe { position: absolute; inset: 0; } }
@media (max-width: 767px) { .contact-map iframe { height: 176px; } }
.col-map > .col-inner { height: 100%; }
#content .group-address { margin: 10px -10px 0; width: auto; }
#content .group-address > .col { padding: 0 10px; margin-bottom: 15px; display: flex; }
#content .group-address > .col > .col-inner { width: 100%; }
.info-thumb { position: relative; width: 100%; height: 100%; border-radius: 10px; padding: 20px 20px 20px 70px; font-size: 14px; border: 1px solid #eee; display: flex; flex-direction: column; justify-content: center; }
.info-thumb::before { content: ""; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; background: var(--mainColor); -webkit-mask: var(--ci) center / contain no-repeat; mask: var(--ci) center / contain no-repeat; }
.info-c-pin { --ci: url(../icons/c-pin.svg); }
.info-c-clock { --ci: url(../icons/c-clock.svg); }
.info-c-phone { --ci: url(../icons/c-phone.svg); }
.info-c-mail { --ci: url(../icons/c-mail.svg); }
.info-thumb .info-title { display: block; font-size: 18px; margin: 0 0 5px !important; color: var(--mainColor); font-weight: 700 !important; line-height: 1.5 !important; }
.info-thumb p { margin: 0 !important; color: #000; }
.info-thumb a { color: #000; }
@media (max-width: 991px) {
	.info-thumb { padding: 10px 10px 10px 60px; }
	.info-thumb::before { left: 15px; }
}
@media (max-width: 767px) {
	.contact-map { margin-top: 20px; }
	.info-thumb .info-title { font-size: 16px; }
}

/* ---------- 25. Header promo button keeps its own box ---------- */
#header .header-bottom-nav > li > a.khuyenmai-header { padding: 2px 10px; line-height: 1.5; font-size: 14px; font-weight: 700; color: var(--hover); }
#header .header-bottom-nav > li > a.khuyenmai-header:hover { color: var(--mainColor); }

/* ---------- 26. Footer grid (10px gutters) + icon size ---------- */
#footer .row.row-fix { padding: 0 5px; }
#footer .row.row-fix > .col { padding: 0 10px; margin-bottom: 20px; }
#footer .footer-social .img img { height: 32px; width: auto; }
#footer .footer-social { margin: 0; width: auto; }
#footer .footer-social > .col { padding: 0; margin: 0; }
@media (max-width: 500px) {
	#footer .row.row-fix { padding: 0 10px; }
	#footer .row.row-fix > .col { padding: 0 5px; margin-bottom: 10px; }
}

/* ---------- 27. FAQ page box padding (.pg_page of the reference) ---------- */
.page-faq .section-content > .row > .col > .col-inner { padding: 10px; background: #fff; border-radius: 10px; }

/* ---------- 28. Title blocks are divs in the reference (line-height 1.5) ---------- */
.title-block .title2, .about-text .title-about2 { line-height: 1.5 !important; }
.title-block .title3 { font-size: 18px !important; line-height: 1.5 !important; }
.about-text .content-about { font-size: 16px !important; line-height: 1.5 !important; }
.about-list li, .check-list li { font-size: 16px !important; line-height: 1.5 !important; }
@media (max-width: 767px) {
	.title-block .title3, .about-text .content-about, .about-list li, .check-list li { font-size: 14px !important; }
}

/* ---------- 29. Tab pills stay one line on phones ---------- */
.tabs-title > .nav > li > a, .tab-menu-danhmuc > .nav > li > a { display: flex !important; flex-direction: row !important; align-items: center; }
.tabs-title > .nav > li > a > span, .tab-menu-danhmuc > .nav > li > a > span { display: inline; width: auto; }

/* ---------- 30. Review card spacing like the reference ---------- */
.review-thumb { padding: 50px !important; }
.review-thumb .testimonial-image { margin: 0 auto 10px !important; }
.review-thumb .star-rating { display: none !important; }
.review-thumb .icon-box-text::before { content: "\2605\2605\2605\2605\2605"; order: 0; display: block; font-size: 21px; line-height: 21px; height: 21px; margin: 0 0 20px; color: #ffc800; letter-spacing: 0; }
.review-thumb .testimonial-text { margin: 0 0 20px !important; padding: 0 !important; }
.review-thumb .testimonial-meta { padding: 0 !important; }
.review-thumb .testimonial-name { font-size: 24px !important; line-height: 1.5 !important; }
.review-thumb .testimonial-company { font-size: 14px; line-height: 1.5; }
.review-swiper .flickity-prev-next-button { width: 40px; height: 40px; border-radius: 50%; background: var(--mainColor); color: #fff; opacity: 1 !important; transform: translateY(-50%); margin: 0; padding: 10px; }
.review-swiper .flickity-prev-next-button.next { right: 10px !important; }
.review-swiper .flickity-prev-next-button.previous { left: 10px !important; }
.review-swiper .flickity-prev-next-button[disabled] { display: none; }
.review-swiper .flickity-prev-next-button svg { fill: #fff; }
.review-swiper .flickity-prev-next-button:hover { background: var(--hover); }
@media (max-width: 767px) {
	.review-thumb .testimonial-name { font-size: 20px !important; }
	.review-swiper .flickity-prev-next-button { width: 25px; height: 25px; padding: 5px; }
}

/* ---------- 31. Image margins beat the #content .img reset; pills never wrap ---------- */
#content .section_about .image-about { margin-bottom: 20px; }
.tabs-title > .nav > li, .tab-menu-danhmuc > .nav > li { flex: none; }
.tabs-title > .nav > li > a, .tab-menu-danhmuc > .nav > li > a { flex-wrap: nowrap !important; }

/* ---------- 32. WooCommerce product card ([ux_products], shop, categories, related) ---------- */
.product-small.col > .col-inner { position: relative; height: 100%; }
.product-small .badge-container { top: 15px; left: 15px; margin: 0; z-index: 9; }
.product-small .badge-container .badge { width: auto !important; height: auto !important; margin: 0; opacity: 1; }
.product-small .badge-container .badge-inner {
	background: var(--price) !important;
	color: #fff;
	font-size: 14px;
	line-height: 21px;
	padding: 2px 10px;
	border-radius: 50px;
	box-shadow: 0 0 5px 1px #fff;
	font-weight: 700;
	white-space: nowrap;
}
.product-small .badge-container .onsale { font-size: inherit; font-weight: inherit; }
.product-action .box-image .image-tools:empty { display: none; }
.product-action .box-text-products .title-wrapper { padding: 0; }
.product-action .price-wrapper { padding: 0; }
.product-action .price-box .amount { color: inherit; font-weight: inherit; font-size: inherit; }
.product-action .price-box .compare-price { text-decoration: line-through; display: block; }
.product-action .group-button .added_to_cart { display: none !important; }
.product-action .group-button .btn-cart.loading { opacity: .5; }
.product-action .group-button .btn-cart.added::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--hover); }
.product-action .group-button .btn-cart { position: relative; }
.product-action .min-productcount::after { display: none; }
.product-action .min-productcount .countdown .line { margin-top: 2px; }
.product-small .min-productcount { display: none; }
.section_flashsale .product-small .min-productcount { display: block; }
/* Grid tabs and carousels: the cards fill their column */
#content .product-grid > .col.product-small, #content .mps-carousel > .col.product-small { padding-bottom: 0; }
#content .product-grid > .col.product-small { padding: 0 10px; margin-bottom: 20px; }
@media (max-width: 500px) {
	#content .product-grid > .col.product-small { padding: 0 5px; margin-bottom: 10px; }
}

/* ---------- 33. WooCommerce pages: shop, cart, checkout in the site's colours ---------- */
.woocommerce-cart .button, .woocommerce-checkout .button, .single-product .single_add_to_cart_button, .wc-proceed-to-checkout .checkout-button {
	border-radius: 10px;
}
.shop-container .products.row > .product-small, .related-products-wrapper .product-small { padding-bottom: 0; margin-bottom: 20px; }
.shop-page-title .breadcrumbs a, .woocommerce-breadcrumb a { color: inherit; }
.product-info .price .amount, .product-info .price ins .amount { color: var(--price); }

/* ---------- 34. Fix r1: reviews, booking form, FAQ, brand carousel (as the reference) ---------- */
/* Review card: stars 10px above / 30px below (star margin + .info-image margin), job title margin 5px, square avatar */
.review-thumb .icon-box-text::before { margin-bottom: 30px; }
.review-thumb .testimonial-company { margin-bottom: 5px; }
.review-thumb .testimonial-image.circle, .review-thumb .testimonial-image.circle img { border-radius: 20px !important; }
.review-swiper .review-thumb { width: 100%; box-sizing: border-box; }
.review-thumb .icon-box-text { width: 100%; max-width: 100%; }
/* Flatsome's .flickity-slider>.icon-box { padding-left/right: 3% !important } beat the card's 50px; its arrows
   are hidden below 550px while the reference keeps them */
.review-swiper .flickity-slider > .review-thumb { padding: 50px !important; }
@media (max-width: 549px) {
	.slider-wrapper.review-swiper .flickity-prev-next-button:not([disabled]) { display: block; }
}
.review-swiper.slider-wrapper .flickity-prev-next-button svg { border: 0 !important; }
/* Booking form: Bootstrap .form-group (1rem), 17px labels and 41px fields (measured on the reference) */
.section_form .form-group { margin-bottom: 1rem; }
.section_form .form-group label { line-height: 17px; }
.section_form .form-group input { height: 41px; }
.wpcf7 .button-style { vertical-align: top; }
/* Flatsome gives every form margin-bottom: 1.3em; the reference's booking form ends at its box */
.section_form .wpcf7-form { margin-bottom: 0; }
/* The reference's fields and submit sit in .col-fix (margin-bottom 20px, 10px up to 500px), labels on the
   body line (14px x 1.5); service tiles have no border until hovered or checked */
.section_form .form-group label { line-height: 1.5; }
.section_form .form-group, .section_form .wpcf7 .button-style { margin-bottom: 20px; }
@media (max-width: 500px) {
	.section_form .form-group, .section_form .wpcf7 .button-style { margin-bottom: 10px; }
}
.section_form .wpcf7-radio label { border: 0; }
.section_form .wpcf7-radio label:has(input:checked), .section_form .wpcf7-radio label:hover { box-shadow: inset 0 0 0 1px var(--mainColor), 0 0 5px 0 var(--mainColor); }
@media (max-width: 767px) {
	.wpcf7 .button-style .wpcf7-submit { height: 44px; padding-right: 47px; }
	.wpcf7 .button-style::after { width: 30px; height: 30px; }
}
/* FAQ questions: line box of the reference */
.faq .accordion-title { line-height: 1.4; }
/* Brands: a two-row carousel with the reference's arrows */
#content .mps-carousel-wrap > .brand-row { width: 100%; }
#content .brand-row { scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
#content .brand-row::-webkit-scrollbar { display: none; }
#content .brand-row > .col { scroll-snap-align: start; }
/* Footer: white band above the wave below 992px; social icons sit on a text line (inline items) like the
   reference's <ul class="social">, the marketplace row keeps its 20px bottom margin */
@media (max-width: 991px) {
	#footer { padding-top: 40px; }
}
#footer .footer-social .col-inner { display: block; font-size: 14px; line-height: 1.5; }
#footer .footer-social .img { display: inline-block; vertical-align: baseline; margin: 0 5px 0 0; }
#footer .footer-info + .footer-social { margin-bottom: 20px; }

/* ---------- 35. Footer line boxes (fix:r2 home-02) ---------- */
/* .img-inner (overflow hidden) gives the inline-block .img no text baseline, so the icon sat on the line's
   baseline with the descender gap under it; the reference's <li><img> sits on the middle (32px line) */
#footer .footer-social .img { vertical-align: middle; }
/* the address list keeps the reference's 20px bottom margin (the .text > :last-child reset took it) */
#footer .text.footer-info > .group-address { margin-bottom: 20px; }
/* copyright: "© …" then "Cung cấp bởi …" on one line, two lines up to 576px like #copyright .copy-right */
.absolute-footer .copyright-footer .copy-right { display: inline-block; }
.absolute-footer .copyright-footer a { color: #fff; font-weight: 700; }
.absolute-footer .copyright-footer a:hover { color: #fff; opacity: .7; }
@media (max-width: 576px) {
	.absolute-footer .copyright-footer .copy-right { display: block; }
}
/* the reference's h4.title-menu takes Bootstrap's heading line-height 1.4 (not 1.2) */
#footer .title-menu { line-height: 1.4; }