/*
 * Min Solar — child theme CSS (Flatsome). Rebuilds the reference (min-solar.myharavan.com)
 * on Flatsome's markup and the classes given to UX Builder elements.
 * §0 tokens + Flatsome resets · §1 base · §2 header · §3 mega menu · §4 header tools
 * §5 mobile header · §6 hero/breadcrumb · §7 buttons · §8 footer · §9 forms
 * §10 floating booking · §11 popup · §12 back to top
 * §13–§28 home sections (titles, carousels, cards; §24 product card used by every product grid)
 */

/* §0 Tokens + Flatsome resets ------------------------------------------------ */
:root {
	--ms-main: #0d2b6b;
	--ms-hover: #4aab3d;
	--ms-bg: #f3faf2;
	--ms-price: #ff0000;
	--ms-radius: 10px;
	--ms-font: "Be Vietnam Pro", sans-serif;
	--ms-font-head: "Montserrat", sans-serif;
	--ms-container: 1380px;
}

html { background-color: var(--ms-bg); overflow-x: hidden; }
html body { font-family: var(--ms-font); font-size: 14px; color: #000; background-color: var(--ms-bg); }
#wrapper, #main, .page-wrapper, .shop-container { background-color: transparent; }
h1, h2, h3, h4, h5, h6 { font-family: var(--ms-font-head); color: inherit; text-rendering: auto; }
a:hover { color: var(--ms-hover); }
p:empty { display: block; }
.wpcf7 label { width: auto; }
ul ul, .col-inner ul li { margin: 0; }

/* Liquid background blobs (reference .liquid-bg) */
body::before, body::after {
	content: "";
	position: fixed;
	z-index: -1;
	width: 600px;
	height: 600px;
	border-radius: 50%;
	filter: blur(120px);
	opacity: .5;
	pointer-events: none;
	animation: ms-move 20s infinite alternate ease-in-out;
}
body::before { background: radial-gradient(circle, var(--ms-main), transparent 70%); top: 10%; left: 10%; }
body::after { background: radial-gradient(circle, var(--ms-hover), transparent 70%); bottom: 10%; right: 10%; animation-delay: 5s; }
@keyframes ms-move {
	0% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(100px, -80px) scale(1.2); }
	100% { transform: translate(-80px, 100px) scale(.9); }
}
#wrapper { position: relative; z-index: 0; }

/* §1 Base ---------------------------------------------------------------------- */
.container, .row { max-width: 1410px; }
.ms-text-main { color: var(--ms-main); }
.ms-text-hover { color: var(--ms-hover); }

/* §2 Header (reference: header.header absolute, top bar + white box, 1380 wide) */
#header.header { position: absolute; top: 0; left: 0; right: 0; z-index: 30; background: transparent; }
#header .header-wrapper { width: calc(100% - 30px); max-width: var(--ms-container); margin: 30px auto 0; }
#header .header-bg-container, #header .header-bg-color { display: none; }

#top-bar.header-top {
	min-height: 52px;
	background-color: var(--ms-hover);
	border-radius: var(--ms-radius) var(--ms-radius) 0 0;
	color: #fff;
}
#top-bar .flex-row.container { max-width: none; padding: 0 10px; min-height: 52px; }
#top-bar .nav > li { margin: 0; }
#top-bar .html_topbar_left, #top-bar .nav > li.html { font-size: 16px; font-weight: 600; color: #fff; letter-spacing: 0; text-transform: none; }
.ms-topbar-text { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-weight: 600; font-size: 16px; line-height: 30px; }

#masthead.header-main {
	height: 96px;
	background: linear-gradient(145deg, rgba(74, 171, 61, .2) 0%, rgba(13, 43, 107, 0) 50%, rgba(74, 171, 61, .2) 100%), #fff;
	border-radius: 0 0 var(--ms-radius) var(--ms-radius);
}
#masthead .header-inner { max-width: none; padding: 0 15px; position: relative; flex-wrap: nowrap; }

/* Text logo (until the customer's logo is uploaded) */
#logo { width: 238px; flex: 0 0 238px; margin-right: 0; }
#logo > a {
	display: inline-block;
	font-family: var(--ms-font-head);
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
	color: var(--ms-main);
	text-transform: uppercase;
	letter-spacing: .02em;
	white-space: nowrap;
}
#logo img { max-height: 56px; width: auto; max-width: 100%; }
@media (max-width: 849px) { #logo img { max-height: 40px; } }

/* Main navigation: one line, clipped like the reference (scrollable with a trackpad) */
#masthead .flex-col.flex-left.flex-grow {
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	position: static;
}
#masthead .flex-col.flex-left.flex-grow::-webkit-scrollbar { display: none; }
#masthead .header-nav-main.nav-left { flex-wrap: nowrap; white-space: nowrap; position: static; }
#masthead .header-nav-main.nav-left > li { position: static; margin: 0; padding: 0 12px; }
#masthead .header-nav-main.nav-left > li:first-child { padding-left: 0; }
#masthead .header-nav-main.nav-left > li > a {
	padding: 5px 0;
	font-family: var(--ms-font);
	font-size: 18px;
	font-weight: 600;
	color: #000;
	text-transform: none;
	letter-spacing: 0;
	line-height: 24px;
	flex-wrap: nowrap;
}
#masthead .header-nav-main.nav-left > li:hover > a,
#masthead .header-nav-main.nav-left > li.active > a,
#masthead .header-nav-main.nav-left > li.current-menu-item > a,
#masthead .header-nav-main.nav-left > li > a[aria-current="page"] { color: var(--ms-hover); } /* current item green (inc/header.php also matches custom links by path) */
#masthead .header-nav-main.nav-left > li > a .icon-angle-down { display: none; }
#masthead .header-nav-main.nav-left > li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 4px;
	border-style: solid;
	border-width: 5px 5px 0;
	border-color: currentColor transparent transparent;
	vertical-align: middle;
	transition: transform .5s;
}
#masthead .header-nav-main.nav-left > li.menu-item-has-children:hover > a::after { transform: rotate(180deg); }
#masthead .flex-col.flex-right { margin-left: 30px; flex: 0 0 auto; }
#masthead .header-nav-main.nav-right > li { margin: 0; }

/* §3 Mega menu "Sản phẩm" (menu item class ms-mega) ------------------------------ */
#masthead .header-nav-main > li.ms-mega > .nav-dropdown {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	min-width: 0;
	padding: 10px;
	background: #fff;
	border: 0;
	border-radius: 5px;
	box-shadow: 0 2px 6px 0 rgba(50, 50, 50, .33);
	white-space: normal;
	transform: translateY(20px);
	transition: opacity .2s ease-out, transform .2s ease-out, visibility .2s;
}
#masthead .header-nav-main > li.ms-mega:hover > .nav-dropdown,
#masthead .header-nav-main > li.ms-mega.current-dropdown > .nav-dropdown {
	left: 253px !important;
	right: 338px;
	top: calc(100% - 20px);
	opacity: 1;
	visibility: visible;
	max-height: none;
	transform: translateY(0);
}
#masthead li.ms-mega > .nav-dropdown > li {
	display: block;
	width: 25%;
	padding: 10px;
	margin: 0;
	text-align: left;
	border: 0;
}
#masthead li.ms-mega > .nav-dropdown > li > a {
	display: inline-block;
	padding: 0;
	margin-bottom: 10px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ms-main);
	text-transform: none;
	border: 0;
}
#masthead li.ms-mega > .nav-dropdown > li > a:hover { color: var(--ms-hover); background: none; }
#masthead li.ms-mega .nav-dropdown .nav-column,
#masthead li.ms-mega .nav-dropdown li > ul { display: block; padding: 0; margin: 0; position: static; box-shadow: none; border: 0; background: none; }
#masthead li.ms-mega .nav-dropdown li > ul > li { display: block; width: auto; padding: 0; margin: 0; line-height: 1.3; border: 0; }
#masthead li.ms-mega .nav-dropdown li > ul > li + li { padding-top: 5px; }
#masthead li.ms-mega .nav-dropdown li > ul > li > a {
	display: block;
	padding: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	color: #000;
	text-transform: none;
	border: 0;
}
#masthead li.ms-mega .nav-dropdown li > ul > li > a:hover { color: var(--ms-hover); background: none; }

/* §4 Header tools: pill + round icons ----------------------------------------- */
.ms-tools { display: flex; align-items: center; justify-content: flex-end; }
.ms-tools__book { margin-right: 5px; }
.ms-pill {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	padding: 6px 6px 6px 10px;
	overflow: hidden;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: #fff;
	background: var(--ms-hover);
	border-radius: 30px;
}
.ms-pill::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	z-index: -1;
	width: 0;
	background-color: var(--ms-main);
	border-radius: inherit;
	transition: width .4s ease-out;
}
.ms-pill:hover { color: #fff; }
.ms-pill:hover::before { width: 100%; }
.ms-pill__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-left: 5px;
	color: #000;
	background: #fff;
	border-radius: 50%;
}
.ms-pill__icon svg { width: 14px; height: 14px; transition: transform .4s ease-in-out; }
.ms-pill:hover .ms-pill__icon svg { transform: rotate(45deg); }

.ms-tools__list { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 0; list-style: none; }
.ms-tools__list > li.ms-tool { position: relative; display: flex; align-items: center; margin: 0; padding: 0; }
.ms-tool__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: #fff;
	background: var(--ms-main);
	border-radius: 50%;
}
.ms-tool__icon:hover { color: #fff; }
.ms-tool__icon svg { width: 26px; height: 26px; }
.ms-tool__count {
	position: absolute;
	top: -4px;
	right: -3px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: #000;
	background: var(--ms-hover);
	border-radius: 50%;
}
.ms-drop {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 40;
	display: none;
	padding: 10px;
	background: var(--ms-main);
	border-radius: 5px;
	text-align: left;
}
.ms-drop::before {
	content: "";
	position: absolute;
	top: -9px;
	right: 15px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid var(--ms-main);
}
.ms-drop::after { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 10px; }
.ms-tool:hover > .ms-drop, .ms-tool.is-open > .ms-drop { display: block; }
.ms-drop--account { width: 130px; }
.ms-drop--account a { display: block; font-size: 16px; line-height: 1.5; color: #fff; }
.ms-drop--account a:hover { color: var(--ms-hover); }
.ms-drop--search { width: 400px; }
.ms-search-form { position: relative; height: 40px; margin: 0; overflow: hidden; background: rgba(255, 255, 255, .3); border-radius: 10px; }
.ms-search-form input[type="search"] {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 40px 0 20px;
	font-size: 14px;
	color: #fff;
	background: transparent;
	border: 0;
	box-shadow: none;
}
.ms-search-form input[type="search"]::placeholder { color: #fff; opacity: 1; }
.ms-search-form button {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	color: #fff;
	background: transparent;
	border: 0;
}
.ms-search-form button:hover { color: var(--ms-hover); }
.ms-search-form button svg { width: 24px; height: 24px; }
.ms-search-keys__title { margin-top: 8px; font-size: 14px; font-weight: 600; color: #fff; }
.ms-search-keys ul { margin: 0; padding: 0; list-style: none; }
.ms-search-keys li { display: inline-block; margin: 5px 5px 0 0; }
.ms-search-keys li a {
	display: block;
	padding: 3px 10px;
	font-size: 14px;
	line-height: 1.5;
	color: #000;
	background: var(--ms-bg);
	border: 1px solid var(--ms-main);
	border-radius: 10px;
}
.ms-search-keys li a:hover { background: var(--ms-hover); color: #000; }

/* §5 Mobile header (reference ≤ 991: header in the flow, 30px icons) ----------- */
@media (max-width: 849px) {
	#header.header { position: relative; }
	#header .header-wrapper { width: auto; max-width: none; margin: 10px 10px 0; }
	#top-bar.header-top, #top-bar .flex-row.container { min-height: 42px; }
	#top-bar .nav { justify-content: flex-start; }
	.ms-topbar-text, #top-bar .nav > li.html { font-size: 13px; }
	#masthead.header-main { height: 78px; }
	#masthead .header-inner { padding: 0 10px; }
	#logo { width: auto; flex: 0 1 auto; max-width: 52vw; }
	#logo > a { font-size: 20px; }
	.ms-tools__book { display: none; }
	.ms-tools__list { gap: 5px; }
	.ms-tool__icon { width: 30px; height: 30px; }
	.ms-tool__icon svg { width: 20px; height: 20px; }
	.ms-tool__count { top: auto; bottom: -4px; width: 14px; height: 14px; font-size: 10px; }
	.ms-drop--search { position: fixed; top: 140px; left: 10px; right: 10px; width: auto; }
	.ms-drop--search::before { display: none; }
	#masthead .mobile-nav.nav-right { flex-wrap: nowrap; gap: 5px; }
	#masthead .mobile-nav > li { margin: 0; }
	#masthead .mobile-nav > li.nav-icon > a,
	#masthead .mobile-nav > li.nav-icon .button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		min-height: 0;
		margin: 0;
		padding: 0;
		color: #fff;
		background: var(--ms-main);
		border: 0;
		border-radius: 50%;
		box-shadow: none;
	}
	#masthead .mobile-nav > li.nav-icon i { font-size: 16px; color: #fff; }
}

/* Off-canvas mobile menu */
.off-canvas .sidebar-menu, .mobile-sidebar { font-family: var(--ms-font); }
.off-canvas .nav-sidebar > li > a { font-size: 16px; font-weight: 600; color: #000; text-transform: none; }
.off-canvas .nav-sidebar li li > a { font-size: 15px; color: #000; text-transform: none; }
.off-canvas .nav-sidebar li a:hover, .off-canvas .nav-sidebar li.active > a { color: var(--ms-hover); }

/* §6 Page hero + breadcrumb (reference: section.bread-crumb) ---------------------- */
.ms-hero { padding: 10px; font-weight: 700; }
.ms-hero__bg {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	min-height: 500px;
	margin-bottom: 40px;
	padding: 50px 0;
	overflow: hidden;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: var(--ms-radius);
}
.ms-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, .26);
	mix-blend-mode: multiply;
	pointer-events: none;
}
.ms-hero .container { position: static; }
.ms-hero__thumb { position: absolute; bottom: 100px; }
.ms-hero__title {
	margin: 0;
	padding: 0;
	font-family: var(--ms-font-head);
	font-size: 44px; /* reference 50px Exo 2; Montserrat runs ~13 % wider, so 44px gives the reference's width */
	font-weight: 600;
	line-height: 1.4; /* reference .line-clamp */
	color: #fff;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ms-breadcrumb { width: 100%; margin: 0; padding: 15px 0; font-size: 16px; line-height: 24px; list-style: none; }
.ms-breadcrumb li { display: inline; margin: 0; color: #fff; }
.ms-breadcrumb li a { color: #fff; }
.ms-breadcrumb li a:hover, .ms-breadcrumb li strong { color: var(--ms-hover); }
.ms-breadcrumb__sep { padding: 0 3px; color: #fff; }
.ms-breadcrumb__sep svg { width: 10px; height: 10px; margin: -2px 3px 0; vertical-align: middle; }
@media (max-width: 991px) {
	.ms-hero__bg { margin-bottom: 20px; }
}
@media (max-width: 767px) {
	.ms-hero__bg { min-height: 200px; padding: 20px 0; } /* the reference's inline background shorthand keeps size auto + center */
	.ms-hero__thumb { bottom: 0; }
	.ms-hero__title { font-size: 18px; }
}

/* §7 Buttons (reference .button-style: pill + white circle arrow) ------------------ */
.button.ms-btn, .ms-btn, .wpcf7 .ms-cf--icon .wpcf7-submit {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	min-height: 0;
	margin: 15px 0 0;
	padding: 8px 8px 8px 20px;
	overflow: hidden;
	font-family: var(--ms-font);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
	background: var(--ms-main);
	border: 0;
	border-radius: 30px;
	box-shadow: none;
}
.button.ms-btn::before, .ms-btn::before, .wpcf7 .ms-cf--icon .wpcf7-submit::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	z-index: -1;
	width: 0;
	background-color: var(--ms-hover);
	border-radius: inherit;
	transition: width .4s ease-out;
}
.button.ms-btn:hover, .ms-btn:hover, .wpcf7 .ms-cf--icon .wpcf7-submit:hover { color: #fff; box-shadow: none; }
.button.ms-btn:hover::before, .ms-btn:hover::before, .wpcf7 .ms-cf--icon .wpcf7-submit:hover::before { width: 100%; }
.ms-btn__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: 10px;
	color: #000;
	background: #fff;
	border-radius: 50%;
}
.ms-btn__icon svg { width: 16px; height: 16px; transition: transform .4s ease-in-out; }
.ms-btn:hover .ms-btn__icon svg, .wpcf7-submit:hover .ms-btn__icon svg { transform: rotate(45deg); }
@media (max-width: 767px) {
	.button.ms-btn, .ms-btn, .wpcf7 .ms-cf--icon .wpcf7-submit { padding: 5px 8px 5px 15px; font-size: 16px; }
	.ms-btn__icon { width: 30px; height: 30px; }
}

/* §8 Footer (UX Block "footer" = section.ms-footer + Flatsome absolute footer) ------ */
#footer.footer-wrapper { padding: 10px; background: transparent; }
.ms-footer.section {
	padding-top: 70px;
	padding-bottom: 0;
	background-color: var(--ms-main);
	background-image: url("../img/footer-bg.png");
	background-repeat: repeat;
	border-radius: var(--ms-radius) var(--ms-radius) 0 0;
	color: #fff;
}
.ms-footer .row.ms-footer__mid { margin-bottom: 80px; }
.ms-footer .ms-footer__col { padding-bottom: 20px; }
.ms-footer .ms-footer__info { padding: 20px; color: #000; background: var(--ms-bg); border-radius: var(--ms-radius); }
.ms-footer .ms-footer__logo {
	display: block;
	margin-bottom: 10px;
	font-family: var(--ms-font-head);
	font-size: 40px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--ms-main);
	text-transform: uppercase;
}
.ms-footer .ms-footer__desc { margin: 0 0 10px; font-size: 18px; line-height: 1.5; color: #000; }
.ms-footer .ms-footer__title h3, .ms-footer .ms-footer__title p {
	margin: 0 0 10px;
	font-family: var(--ms-font-head);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ms-hover);
	text-transform: uppercase;
}
.ms-footer .ux-menu.ms-footer__menu .ux-menu-link { margin: 0 0 5px; }
.ms-footer .ux-menu.ms-footer__menu .ux-menu-link__link {
	min-height: 0;
	padding: 0;
	font-size: 18px;
	line-height: 1.5;
	color: #fff;
	border: 0;
}
.ms-footer .ux-menu.ms-footer__menu .ux-menu-link__link:hover { color: var(--ms-hover); }
.ms-footer .ms-footer__news p { margin: 0 0 10px; font-size: 16px; line-height: 1.5; color: #fff; }
.ms-footer .ms-cf--newsletter input[type="email"] {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 10px;
	padding: 13px 20px;
	font-size: 14px;
	line-height: 1.5;
	color: #000;
	background: #fff;
	border: 0;
	border-radius: 24px;
	box-shadow: none;
}
.ms-footer .wpcf7 .ms-cf--newsletter .wpcf7-submit { margin: 0; padding: 4px 4px 4px 20px; font-size: 16px; background: var(--ms-hover); }
.ms-footer .wpcf7 .ms-cf--newsletter .wpcf7-submit::before { background: var(--ms-main); opacity: .4; }
.ms-footer .wpcf7 .ms-cf--newsletter .ms-btn__icon { width: 40px; height: 40px; }
.ms-footer .wpcf7-response-output { color: #fff; }

#footer .absolute-footer {
	margin: 0;
	padding: 10px 0;
	font-size: 16px;
	color: #fff;
	text-align: center;
	background: var(--ms-hover);
	border-radius: 0 0 var(--ms-radius) var(--ms-radius);
}
#footer .absolute-footer .container { max-width: 1410px; }
#footer .absolute-footer .footer-primary { float: none; padding: 0; }
#footer .absolute-footer .copyright-footer { padding: 0; color: #fff; }
#footer .absolute-footer .copyright-footer b, #footer .absolute-footer a { color: #fff; font-weight: 700; }
#footer .absolute-footer .footer-secondary { display: none; }
@media (max-width: 767px) {
	.ms-footer.section { padding-top: 30px; }
	.ms-footer .row.ms-footer__mid { margin-bottom: 10px; }
	.ms-footer .ms-footer__desc { font-size: 14px; }
	.ms-footer .ms-footer__logo { font-size: 30px; }
	.ms-footer .ms-footer__title h3, .ms-footer .ms-footer__title p { font-size: 16px; }
	.ms-footer .ux-menu.ms-footer__menu .ux-menu-link__link { font-size: 14px; }
	.ms-footer .ms-footer__news p { font-size: 14px; }
}

/* §9 Forms (Contact Form 7) ------------------------------------------------------ */
.wpcf7 form .wpcf7-response-output { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; font-size: 14px; }
.wpcf7-not-valid-tip { font-size: 13px; }
.ms-cf input[type="text"], .ms-cf input[type="email"], .ms-cf input[type="tel"], .ms-cf input[type="date"], .ms-cf textarea {
	font-family: var(--ms-font);
	box-shadow: none;
}
.ms-cf--booking .ms-cf__group { margin-bottom: 15px; }
.ms-cf--booking label { display: block; margin-bottom: 5px; font-size: 16px; font-weight: 600; color: #000; }
.ms-cf--booking input[type="text"], .ms-cf--booking input[type="email"], .ms-cf--booking input[type="tel"], .ms-cf--booking input[type="date"] {
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 8px 16px;
	font-size: 16px;
	background: #fff;
	border: 1px solid #ced4da;
	border-radius: 5px;
}
.ms-cf--booking .wpcf7-submit { margin-top: 0; font-size: 16px; }

/* §10 Floating booking button (reference .popup-form, bottom left) --------------- */
.ms-float-book { position: fixed; bottom: 20px; left: 17px; z-index: 90; }
.ms-float-book__icon {
	position: relative;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	min-height: 0;
	margin: 0;
	padding: 0;
	color: #fff;
	background: var(--ms-main);
	border: 1px solid #fff;
	border-radius: 50%;
	box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
	cursor: pointer;
	animation: ms-pulse 2s infinite;
}
.ms-float-book__icon svg { width: 26px; height: 26px; }
@keyframes ms-pulse {
	0% { box-shadow: 0 0 0 0 rgba(13, 43, 107, .5); }
	70% { box-shadow: 0 0 0 14px rgba(13, 43, 107, 0); }
	100% { box-shadow: 0 0 0 0 rgba(13, 43, 107, 0); }
}
.ms-float-book__content {
	position: absolute;
	bottom: 27px;
	left: 20px;
	width: 500px;
	padding: 20px 10px 40px;
	color: #000;
	background: var(--ms-bg);
	border-radius: var(--ms-radius);
	box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
	transform: scale(0);
	transform-origin: 0 bottom;
	transition: transform .35s cubic-bezier(.165, .84, .44, 1);
}
.ms-float-book.active .ms-float-book__content { transform: scale(1); transition-delay: .1s; }
.ms-float-book__close {
	position: absolute;
	top: 5px;
	right: 5px;
	min-height: 0;
	margin: 0;
	padding: 4px;
	line-height: 0;
	color: #000;
	background: none;
	border: 0;
}
.ms-float-book__close svg { width: 15px; height: 15px; }
.ms-float-book__title { margin-bottom: 5px; font-family: var(--ms-font-head); font-size: 22px; font-weight: 700; color: var(--ms-main); }
.ms-float-book__desc { margin-bottom: 15px; font-size: 14px; }
@media (max-width: 767px) {
	.ms-float-book__content { width: 300px; padding: 10px 10px 14px; left: 27px; }
}

/* §11 Promo popup "Ưu đãi lớn cho khách hàng mới" (reference .popup-overlay) --------- */
.ms-popup {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	background: rgba(0, 0, 0, .6);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.ms-popup.active { display: block; }
.ms-popup__inner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 600px;
	max-width: calc(100% - 30px);
	transform: translate(-50%, -50%);
	border-radius: var(--ms-radius);
	overflow: hidden;
}
.ms-popup__card {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 50px;
	background-position: center;
	background-size: cover;
	color: #fff;
	text-align: center;
}
.ms-popup__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 36px 20px 30px;
	background: rgba(13, 43, 107, .88);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(13, 43, 107, .35);
}
.ms-popup__title { font-family: var(--ms-font-head); font-size: 52px; font-weight: 800; line-height: 1.1; text-transform: uppercase; color: #fff; }
.ms-popup__sub { margin-top: 6px; font-family: var(--ms-font-head); font-size: 28px; font-weight: 800; line-height: 1.2; text-transform: uppercase; color: var(--ms-hover); }
.ms-popup__text { margin-top: 18px; font-size: 18px; line-height: 1.4; color: #fff; }
.ms-popup__btn {
	margin-top: 22px;
	padding: 10px 30px;
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(180deg, #4aab3d, #2f7f25);
	border: 2px solid rgba(255, 255, 255, .6);
	border-radius: 40px;
	box-shadow: 0 6px 14px rgba(0, 0, 0, .3);
}
.ms-popup__close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-height: 0;
	margin: 0;
	padding: 0;
	color: #fff;
	background: transparent;
	border: 0;
	cursor: pointer;
}
.ms-popup__close svg { width: 18px; height: 18px; transition: transform .3s; }
.ms-popup__close:hover { color: var(--ms-hover); }
.ms-popup__close:hover svg { transform: rotate(90deg); }
@media (max-width: 767px) {
	.ms-popup__card { padding: 24px; }
	.ms-popup__title { font-size: 34px; }
	.ms-popup__sub { font-size: 19px; }
	.ms-popup__text { font-size: 15px; }
	.ms-popup__btn { font-size: 18px; }
}

/* §12 Back to top (reference .backtop) -------------------------------------------- */
#top-link.back-to-top {
	right: 20px;
	bottom: 107px;
	width: 40px;
	height: 40px;
	min-height: 0;
	color: #fff;
	background: var(--ms-main);
	border: 1px solid #fff;
}
#top-link.back-to-top:hover { background: var(--ms-hover); }

/* §13 Home: shared section frame, titles, carousels, buttons ------------------------ */
.ms-sec.section { padding: 0 !important; margin-bottom: 80px; line-height: 1.5; }
.ms-sec .col { padding-bottom: 0; }
.ms-sec .text p:last-child, .ms-sec .text ul:last-child { margin-bottom: 0; }
.ms-sec .img, .ms-sec .img-inner { margin: 0; }
.ms-sec--boxed.section { width: auto; margin-left: 10px; margin-right: 10px; border-radius: var(--ms-radius); overflow: hidden; }
@media (max-width: 991px) { .ms-sec.section { margin-bottom: 50px; } }
/* reference Bootstrap .container is 720 px at 768–991: cap the home rows the same way */
@media (min-width: 768px) and (max-width: 991px) { .ms-sec:not(.ms-sec--boxed) > .section-content > .row { max-width: 720px; } }

.ms-title { margin-bottom: 40px; }
.ms-title__label {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 30px;
	padding-left: 60px;
	font-size: 20px;
	font-weight: 700;
	color: var(--ms-hover);
}
.ms-title__label::before { content: ""; position: absolute; left: 0; top: 50%; width: 50px; height: 1px; background: var(--ms-hover); }
.ms-title__label::after {
	content: "";
	position: absolute;
	left: 40px;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	background: var(--ms-hover);
	animation: ms-spin 2s linear infinite;
}
@keyframes ms-spin { to { transform: rotate(360deg); } }
.ms-title__head { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.4; color: var(--ms-main); }
.ms-title--light .ms-title__head { color: #fff; }
@media (max-width: 767px) {
	.ms-title { margin-bottom: 20px; }
	.ms-title__label { font-size: 16px; }
	.ms-title__head { font-size: 20px; }
}

/* Grid rows like the reference's .row-fix: 20px gutters (10px under 500px) */
.row.ms-row-fix { padding: 0 5px; }
.row.ms-row-fix > .col { padding: 0 10px; margin-bottom: 20px; }
@media (max-width: 500px) {
	.row.ms-row-fix { padding: 0 10px; }
	.row.ms-row-fix > .col { padding: 0 5px; margin-bottom: 10px; }
}

/* Carousels: n cards per view with a gap (Flickity cells) */
.ms-carousel { --n: 1; --gap: 20px; }
.ms-carousel .slider:not(.flickity-enabled) > *, .ms-carousel .slider .flickity-slider > * {
	width: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n)) !important;
	margin-right: var(--gap);
}
.ms-carousel .slider:not(.flickity-enabled) { display: flex; overflow: hidden; }
.ms-carousel .slider:not(.flickity-enabled) > * { flex: 0 0 auto; }
/* Flatsome starts Flickity when the slider scrolls near the view; while it builds, the new viewport can be a
   direct child of a not-yet-enabled .slider and took the 1/n cell width above, so the cells were measured
   ~70 px wide (tall, overlapping, band 1153 px). The viewport is always the full slider width. */
.ms-carousel .slider > .flickity-viewport { flex: none; width: 100% !important; margin-right: 0; }
.ms-cs__slider, .ms-plan__slider { --n: 4; }
.ms-team__slider { --n: 4; }
.ms-duan__slider { --n: 2; }
.ms-logo__slider { --n: 6; }
@media (max-width: 1399px) { .ms-plan__slider { --n: 3; } }
@media (max-width: 1199px) { .ms-cs__slider, .ms-team__slider { --n: 3; } }
@media (max-width: 990px) { .ms-cs__slider, .ms-plan__slider, .ms-team__slider { --n: 2; } .ms-logo__slider { --n: 4; } }
@media (max-width: 767px) { .ms-duan__slider, .ms-team__slider { --n: 1; } .ms-logo__slider { --n: 2; } }
@media (max-width: 499px) { .ms-cs__slider, .ms-plan__slider { --n: 1; } .ms-logo__slider, .ms-cs__slider, .ms-plan__slider { --gap: 10px; } }

/* Button with the white round arrow; centred "Xem tất cả" */
.button.ms-btn { margin-right: 0; }
.button.ms-btn--arrow::after {
	content: "";
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	margin-left: 10px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center / 16px no-repeat;
	border-radius: 50%;
	transition: transform .4s ease-in-out;
}
.button.ms-btn--arrow:hover::after { transform: rotate(45deg); }
.button.ms-btn--center { display: flex; width: max-content; margin: 20px auto 0; }
@media (max-width: 767px) { .button.ms-btn--arrow::after { flex-basis: 30px; width: 30px; height: 30px; } }

/* Read more (reference .button-more-style) */
.ms-more { margin-top: 10px; }
.ms-more a { display: inline-flex; align-items: center; font-size: 16px; font-weight: 700; color: var(--ms-main); }
.ms-more a:hover { color: var(--ms-hover); }
.ms-more__icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 5px; color: #fff; background: var(--ms-main); border-radius: 50%; }
.ms-more__icon svg { width: 10px; height: 10px; }

/* Cover thumbs with a fixed ratio */
.ms-thumb { position: relative; display: block; padding-bottom: 67%; overflow: hidden; background: #eee; border-radius: var(--ms-radius); }
.ms-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }

/* §14 Home S1 slider ------------------------------------------------------------------ */
.ms-hero-slider.section { margin-top: 10px; }
.ms-slider__main .flickity-page-dots { display: none; }
.ms-slide__box.text-box { max-width: 1200px; padding: 0 15px; }
.ms-slide { text-align: center; color: #fff; }
.ms-slide__t1 { font-size: 20px; }
.ms-slide .ms-slide__t2 { margin: 5px 0 10px; font-size: 34px; font-weight: 700 !important; line-height: 1.3; color: #fff; }
.ms-slide__desc { font-size: 18px; }
.ms-slide__box .button.ms-btn { margin-top: 20px; }
@media (max-width: 1199px) {
	.ms-slide .ms-slide__t2 { font-size: 28px; }
	.ms-slide__desc { font-size: 16px; }
}
@media (max-width: 767px) {
	.ms-slide-banner.banner { padding-top: 0 !important; height: auto !important; background: #a9b6c6; }
	.ms-slide-banner .banner-inner,
	.ms-slide-banner .banner-layers { position: relative !important; height: auto !important; max-height: none !important; }
	.ms-slide-banner .banner-bg { position: relative !important; height: auto !important; padding-top: 51.7% !important; }
	.ms-slide-banner .banner-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
	.ms-slide-banner .banner-layers .banner-link { display: none; }
	.ms-slide__box.text-box { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; max-height: none !important; margin: 0 !important; transform: none !important; padding: 15px; }
	.ms-slide__t1, .ms-slide__desc { font-size: 12px; }
	.ms-slide .ms-slide__t2 { font-size: 20px !important; }
}

/* §15 Home S2 about --------------------------------------------------------------------- */
.ms-about__img img { width: 100%; border-radius: var(--ms-radius); }
.ms-about__content { margin-bottom: 30px; font-size: 18px; text-align: justify; }
.ms-about__list ul { margin: 0; padding-left: 20px; list-style: none; }
.ms-about__list li {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 0 20px !important;
	padding: 10px 10px 10px 40px;
	color: #fff;
	background: var(--ms-main);
	border-radius: var(--ms-radius);
	box-shadow: 1px 0 18px rgba(0, 0, 0, .03);
}
.ms-about__list li:last-child { margin-bottom: 0 !important; }
.ms-about__num {
	position: absolute;
	top: -10px;
	left: -20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	font-size: 26px;
	font-weight: 700;
	background: var(--ms-hover);
	border-radius: var(--ms-radius);
}
.ms-about__text b { display: block; font-size: 20px; font-weight: 700; color: var(--ms-hover); }
.ms-about__text span { display: block; font-size: 16px; }
@media (min-width: 992px) and (max-width: 1199px) { .ms-about__col-img .col-inner { position: sticky; top: 10px; } }
@media (max-width: 991px) {
	.ms-about__col-img, .ms-about__col-text { flex-basis: 100% !important; max-width: 100% !important; }
	.ms-about__col-text { margin-top: 20px; }
}
@media (max-width: 767px) {
	.ms-about__content { font-size: 16px; }
	.ms-about__text b { font-size: 16px; }
	.ms-about__text span { font-size: 14px; }
}

/* §16 Home S3 policies ------------------------------------------------------------------ */
.ms-cs__slider .ms-cs__item.stack { padding: 20px !important; } /* Flatsome's .flickity-slider > div { padding: 0 !important } */
.ms-cs__item.stack { position: relative; gap: 5px; padding: 20px; overflow: hidden; background: #fff; border-radius: var(--ms-radius); }
.ms-cs__bg.img { position: absolute; inset: 0; z-index: 0; width: 100% !important; opacity: 0; transform: translate(-30%, 30%) scale(.9); transition: all .5s ease; }
.ms-cs__item:hover .ms-cs__bg { opacity: .5; transform: none; }
.ms-cs__icon.img { position: relative; width: auto !important; }
.ms-cs__icon img { width: auto; max-height: 80px; }
.ms-cs__text { position: relative; font-size: 18px; }
.ms-cs__title { margin: 0 0 5px; font-size: 20px; font-weight: 700; color: var(--ms-main); }
@media (max-width: 767px) {
	.ms-cs__icon img { max-width: 60px; }
	.ms-cs__text { font-size: 14px; }
}

/* §17 Home S4 services (tabs) ---------------------------------------------------------------- */
.ms-dv.section { padding: 100px 0 !important; }
.ms-dv__tabs ul { margin: 0 0 22px; padding: 0; list-style: none; }
.ms-dv__tabs li {
	margin: 0 0 10px !important;
	padding: 10px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	background: var(--ms-main);
	border-radius: var(--ms-radius);
	transition: background .3s;
}
.ms-dv__tabs li.is-active, .ms-dv__tabs li:hover { background: var(--ms-hover); }
.ms-dv__side img { width: 100%; border-radius: var(--ms-radius); }
.row.ms-dv__item { display: none; margin: 0 !important; padding: 10px 0; background: #fff; border-radius: var(--ms-radius); }
.row.ms-dv__item.is-active { display: flex; }
.ms-dv__item > .col { padding: 0 10px; }
.ms-dv__img img { width: 100%; border-radius: var(--ms-radius); }
.ms-dv__title { margin: 0 0 10px; font-size: 20px; font-weight: 700; color: var(--ms-main); }
.ms-dv__body ul { margin: 0; padding: 0; list-style: none; }
.ms-dv__body li { display: flex; margin: 0 0 5px !important; font-size: 16px; }
.ms-dv__body li span { flex: 0 0 6px; height: 6px; margin: 9px 10px 0 0; background: var(--ms-hover); border-radius: 50%; }
@media (max-width: 991px) {
	.ms-dv__col-tabs, .ms-dv__col-items { flex-basis: 100% !important; max-width: 100% !important; }
	.ms-dv__side { display: none; }
}
@media (max-width: 549px) { .ms-dv__item .col + .col { margin-top: 10px; } }
/* reference .dichvu-thumb > .container is 720 px at 768-991 (the boxed sections were left out of the 720 cap above) */
@media (min-width: 768px) and (max-width: 991px) { .ms-dv > .section-content > .row { max-width: 720px; } }

/* §18 Home S5 why ---------------------------------------------------------------------- */
.ms-why__item.stack { position: relative; overflow: hidden; border-radius: var(--ms-radius); }
.ms-why__img img { width: 100%; transition: transform .7s ease; }
.ms-why__item:hover .ms-why__img img { transform: scale(1.1) rotate(2deg); }
.ms-why__icon.img { position: absolute; top: 10px; left: 10px; width: 80px !important; height: 80px; padding: 10px; background: #fff; border-radius: 50%; }
.ms-why__icon img { transition: transform .5s; }
.ms-why__item:hover .ms-why__icon img { transform: scaleX(-1); }
.ms-why__text { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 10px; background: #fff; border-radius: var(--ms-radius); }
.ms-why__title { margin: 0 0 5px; font-size: 20px; font-weight: 700; color: var(--ms-main); }

/* §19 Home S6 numbers ------------------------------------------------------------------- */
.ms-num { text-align: center; }
.ms-num__value { font-size: 40px; font-weight: 700; line-height: 1.3; color: var(--ms-hover); }
.ms-num__value .ms-count { margin-right: 5px; }
.ms-num__title { font-size: 22px; }
@media (max-width: 767px) { .ms-num__value { font-size: 30px; } .ms-num__title { font-size: 16px; } }

/* §20 Home S7 four banners -------------------------------------------------------------- */
.ms-b4.banner { overflow: hidden; border-radius: var(--ms-radius); }
.ms-b4--gap.banner { margin-bottom: 20px; }
.ms-b4 .banner-bg img { transition: transform .7s ease; }
.ms-b4:hover .banner-bg img { transform: scale(1.1) rotate(2deg); }
.ms-b4 .banner-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--ms-main), transparent 80%); opacity: 0; transition: opacity .6s; }
.ms-b4:hover .banner-bg::after { opacity: 1; }
.ms-b4 .banner-layers { max-width: none; padding: 0; pointer-events: none; }
.ms-b4 .text-box.ms-b4__box {
	top: auto !important;
	right: 10px;
	bottom: 10px;
	left: 10px !important;
	width: auto !important;
	transform: translateY(calc(100% + 10px)) !important;
	transition: transform .6s cubic-bezier(.77, 0, .01, .98);
}
.ms-b4:hover .text-box.ms-b4__box { transform: none !important; }
.ms-b4__content { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #fff; text-align: left; }
.ms-b4__name { font-size: 20px; font-weight: 700; }
.ms-b4__btn { position: relative; padding: 8px 20px; font-size: 16px; font-weight: 500; white-space: nowrap; background: var(--ms-hover); border-radius: 30px; }
@media (max-width: 849px) { .ms-b4 .text-box.ms-b4__box { transform: none !important; } .ms-b4 .banner-bg::after { opacity: 1; } }

/* §21 Home S8 projects / S13 team / S16 news: Flatsome [blog_posts] cards ---------------------- */
.row.ms-posts { margin-left: -10px !important; margin-right: -10px !important; }
.row.ms-posts > .col, .row.ms-posts .flickity-slider > .col { padding: 0 10px; }
.ms-posts .col-inner { height: 100%; }
.ms-posts .box-blog-post { height: 100%; background: #fff; border-radius: var(--ms-radius); }
.ms-posts .box-image { overflow: hidden; border-radius: var(--ms-radius); }
.ms-posts .box-image .image-cover { background: #eee; border-radius: var(--ms-radius); }
.ms-posts .box-image img { transition: transform .7s ease; }
.ms-posts .box-blog-post:hover .box-image img { transform: scale(1.1) rotate(2deg); }
.ms-posts .box-text { padding: 0; }
.ms-posts .is-divider { display: none; }
.ms-posts .post-title { margin: 0 0 10px; font-size: 18px; font-weight: 700; line-height: 1.4; }
.ms-posts .post-title a { color: #000; }
.ms-posts .post-title a:hover { color: var(--ms-hover); }
.ms-posts .slider-wrapper .flickity-page-dots { display: none; }

.ms-duan-posts .box-blog-post { padding: 10px; }
.ms-duan-posts .box-image { width: 100% !important; }
.ms-duan-posts .box-text { margin-top: 10px; }
.ms-duan__specs { font-size: 14px; }
.ms-duan__specs ul { margin: 0; padding-left: 20px; list-style: disc; }
.ms-duan__specs li { margin: 0 0 5px !important; }
@media (min-width: 1200px) {
	.ms-duan-posts .box-blog-post { display: flex; gap: 20px; }
	.ms-duan-posts .box-image { flex: 0 0 calc(50% - 10px); width: auto !important; }
	.ms-duan-posts .box-text { flex: 1; margin-top: 0; vertical-align: top; }
}
@media (max-width: 1199px) {
	.ms-duan-posts .box-vertical,
	.ms-duan-posts .box-vertical .box-image,
	.ms-duan-posts .box-vertical .box-text { display: block; }
	.ms-duan-posts .box-vertical .box-text { padding: 0; }
}
@media (max-width: 767px) { .row.ms-duan-posts .flickity-slider > .col { max-width: 100%; flex-basis: 100%; } }

.ms-team-posts .box-blog-post { padding: 10px; }
.ms-team-posts .box-image .image-cover::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, var(--ms-hover), transparent); opacity: 0; transition: opacity .5s; }
.ms-team-posts .box-blog-post:hover .image-cover::before { opacity: .6; }
.ms-team-posts .box-text { margin-top: 5px; padding: 10px; }
.ms-team-posts .post-title { margin: 0; font-size: 20px; }
.ms-team__role { margin-top: 6px; font-size: 15px; color: var(--ms-hover); }
@media (max-width: 767px) { .ms-team-posts .post-title { font-size: 18px; } }
@media (min-width: 992px) and (max-width: 1199px) { .row.ms-team-posts .flickity-slider > .col { max-width: 33.333%; flex-basis: 33.333%; } }
@media (max-width: 767px) { .row.ms-team-posts .flickity-slider > .col { max-width: 100%; flex-basis: 100%; } }

.row.ms-news-posts > .col { margin-bottom: 20px; }
.ms-news-posts .box-blog-post { position: relative; display: flex; gap: 15px; }
.ms-news-posts .box-image { flex: 0 0 50%; width: 50% !important; }
.ms-news-posts .box-text { flex: 1; min-width: 0; padding: 10px 10px 10px 0; }
.ms-news-posts .box-blog-post:hover .box-image img { transform: scale(1.2); }
.ms-news-posts .post-title { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ms-news-posts .from_the_blog_excerpt { display: -webkit-box; margin-bottom: 10px; overflow: hidden; font-size: 14px; line-height: 1.4; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ms-news__date, .ms-news__info { position: absolute; z-index: 1; padding: 5px 15px; font-size: 14px; font-weight: 600; line-height: 1.5; color: #fff; background: var(--ms-main); }
.ms-news__date { top: 0; left: 0; border-radius: var(--ms-radius) 0 10px 0; }
.ms-news__info { right: calc(50% + 15px); bottom: 0; display: flex; gap: 10px; border-radius: 10px 0 var(--ms-radius) 0; }
.ms-news__info > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ms-news__info svg { width: 14px; height: 14px; }
@media (max-width: 991px) { .row.ms-news-posts > .col { flex-basis: 100%; max-width: 100%; } }
@media (max-width: 767px) {
	.ms-news-posts .box-blog-post { flex-direction: column; gap: 0; }
	.ms-news-posts .box-image { width: 100% !important; }
	.ms-news-posts .box-text { padding: 10px; }
	.ms-news__info { right: 0; bottom: auto; top: calc((100vw - 30px) * .67 - 31px); }
}
/* Flatsome's .box-text is position:relative, so the date badge sat on the title: anchor both badges to the card */
.ms-news-posts .box-text { position: static; }
.row.ms-news-posts .box-text .post-title { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* the clamp alone let 3-line titles through (reference: 2 lines at every width): cap the box at 2 lines too */
.row.ms-news-posts .box-text .post-title { max-height: 2.8em; line-height: 1.4; }
.row.ms-news-posts .box-text .post-title a { display: inline; }
/* stacked card (<768): the 50 % flex-basis of the side-by-side layout became 50 % of the card HEIGHT and cut the photo */
@media (max-width: 767px) { .ms-news-posts .box-image { flex: none; } }
@media (max-width: 500px) { .row.ms-news-posts > .col { margin-bottom: 10px; } } /* reference .row-fix .col-fix ≤500 */
/* the reference's Bootstrap .container is 720 px at 768–991 (dự án + tin tức bands) */
@media (min-width: 768px) and (max-width: 991px) { .ms-duans > .section-content > .row, .ms-blog > .section-content > .row { max-width: 720px; } }
/* Dự án: the reference swiper shows 2 × 2 cards (slidesPerColumn 2) from 768 px, one card per view below:
   a 4-post grid ≥768, the slider <768 */
.row.ms-duan-grid { display: none; }
@media (min-width: 768px) {
	.row.ms-duan-grid { display: flex; }
	.ms-duan-slide { display: none !important; }
}

/* §22 Home S9 process ------------------------------------------------------------------------ */
.ms-qt.section { padding: 100px 0 !important; }
.row.ms-qt__row { position: relative; }
.ms-qt__item.stack {
	position: relative;
	margin: 80px 20px 80px 45px;
	padding: 35px 20px 30px 45px;
	color: #fff;
	background: var(--ms-main);
	border: 5px solid #fff;
	border-radius: var(--ms-radius);
}
.ms-qt__icon.img {
	position: absolute;
	top: -50px;
	left: -50px;
	z-index: 1;
	width: 100px !important;
	height: 100px;
	padding: 20px;
	background: var(--ms-hover);
	border: 5px solid #fff;
	border-radius: 50%;
}
.ms-qt__title { margin: 0 0 10px; font-size: 20px; font-weight: 700; color: var(--ms-hover); }
.ms-qt__des { font-size: 16px; }
.ms-qt__num {
	position: absolute;
	right: -25px;
	bottom: -25px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	font-size: 24px;
	font-weight: 700;
	background: var(--ms-hover);
	border: 5px solid #fff;
	border-radius: 50%;
}
@media (min-width: 768px) {
	.row.ms-qt__row::before { content: ""; position: absolute; top: 50%; left: 15px; right: 15px; height: 2px; margin-top: -1px; background: #fff; }
	.ms-qt__item::before, .ms-qt__item::after { content: ""; position: absolute; left: 50%; background: #fff; }
	.ms-qt__item::before { width: 2px; height: 82px; margin-left: -1px; }
	.ms-qt__item::after { width: 18px; height: 18px; margin-left: -9px; background: var(--ms-hover); border-radius: 50%; }
	.ms-qt__item--1::before, .ms-qt__item--2::before { bottom: -86px; }
	.ms-qt__item--1::after, .ms-qt__item--2::after { bottom: -94px; }
	.ms-qt__item--3::before, .ms-qt__item--4::before { top: -86px; }
	.ms-qt__item--3::after, .ms-qt__item--4::after { top: -94px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
	.ms-qt__item--1::before, .ms-qt__item--1::after, .ms-qt__item--2::before, .ms-qt__item--2::after { left: 30%; }
	.ms-qt__item--3::before, .ms-qt__item--3::after, .ms-qt__item--4::before, .ms-qt__item--4::after { left: 70%; }
}
@media (max-width: 1199px) {
	.ms-qt__spacer { display: none; }
	.ms-qt__col { flex-basis: 50% !important; max-width: 50% !important; }
}
@media (max-width: 991px) { .ms-qt__col { flex-basis: 100% !important; max-width: 100% !important; } }
@media (max-width: 767px) {
	.ms-qt__col1 { order: 1; } .ms-qt__col3 { order: 2; } .ms-qt__col2 { order: 3; } .ms-qt__col4 { order: 4; }
	.ms-qt__item.stack { margin: 50px 0 0 20px; padding: 20px 30px 10px 34px; }
	.ms-qt__icon.img { top: -31px; left: -35px; width: 70px !important; height: 70px; padding: 10px; }
	.ms-qt__num { right: -16px; }
}

/* §23 Home S10 price plans ------------------------------------------------------------------- */
.ms-plan.stack { display: grid !important; grid-template-areas: "media" "text"; align-content: start; padding: 10px; background: #fff; border-radius: var(--ms-radius); }
.ms-plan__slider .ms-plan.stack { padding: 10px !important; } /* Flatsome's .flickity-slider > div { padding: 0 !important } */
.ms-plan__img.img, .ms-plan__info { grid-area: media; }
.ms-plan__img.img { position: relative; overflow: hidden; border-radius: var(--ms-radius); }
.ms-plan__img .img-inner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, var(--ms-main)); }
.ms-plan__img .img-inner { padding-top: 100%; } /* reference photos are 500x500 at their natural ratio */
.ms-plan__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ms-plan__info { position: relative; z-index: 1; align-self: end; padding: 10px; }
.ms-plan__title { margin: 0; font-size: 16px; font-weight: 700; color: #fff; }
.ms-plan__price { font-size: 30px; font-weight: 700; line-height: 1.3; color: var(--ms-hover); }
.ms-plan__text { grid-area: text; margin-top: 10px; }
.ms-plan__des { font-size: 16px; font-weight: 700; }
.ms-plan__text ul { margin: 10px 0 0; padding: 0; list-style: none; }
.ms-plan__text li { display: flex; margin: 0 0 5px !important; }
.ms-plan__text li::before {
	content: "";
	flex: 0 0 20px;
	height: 20px;
	margin-right: 5px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234aab3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* §24 Product cards (reference .product-action) + home product tabs ------------------------------ */
.product-small.col > .col-inner {
	position: relative;
	height: 100%;
	padding: 10px;
	text-align: left;
	background: #fff;
	border: 1px solid var(--ms-main);
	border-radius: 20px;
}
.product-small .box-image { overflow: hidden; background: #f9f9f9; border-radius: 20px; }
.product-small .box-image img { transition: transform .5s ease; }
.product-small .category, .product-small .grid-tools { display: none !important; }
.product-small .image-tools.top.right { padding: 5px; opacity: 1; transform: none; }
.ms-wish {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	min-height: 0;
	margin: 0;
	padding: 5px;
	color: #fff;
	background: var(--ms-main);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.ms-wish svg { width: 20px; height: 20px; fill: #fff; stroke: none; }
.ms-wish.is-active svg { fill: red; }
.ms-wish:hover { background: var(--ms-hover); }
.product-small .badge-container { margin: 15px; }
.product-small .badge { width: auto; height: auto; }
.product-small .badge-inner { padding: 2px 10px; font-size: 14px; font-weight: 700; line-height: 1.5; color: #000; background: var(--ms-hover); border-radius: 5px; box-shadow: 0 0 5px 1px #fff; }
.product-small .box-text { padding: 10px 0 0; }
.product-small .title-wrapper { margin-bottom: 5px; }
.product-small .product-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; }
.product-small .product-title a { display: -webkit-box; overflow: hidden; color: #000; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.product-small .product-title a:hover { color: var(--ms-hover); }
.product-small .price-wrapper .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--ms-price); }
.product-small .price .amount { color: inherit; }
.product-small .price ins { order: -1; color: var(--ms-price); text-decoration: none; }
.product-small .price del { font-size: 12px; font-weight: 400; color: #999; opacity: 1; }
.ms-card__buttons { display: flex; gap: 10px; margin-top: 10px; }
.ms-card__cart { display: flex; flex: 0 0 40px; align-items: center; justify-content: center; height: 40px; padding: 6px; color: #fff; background: var(--ms-main); border-radius: var(--ms-radius); }
.ms-card__cart svg { width: 20px; height: 20px; }
.ms-card__cart:hover { color: #fff; background: var(--ms-hover); }
.ms-card__cart.loading { opacity: .6; }
.ms-card__cart.loading::after, .ms-card__buttons .added_to_cart { display: none !important; }
.ms-card__qv.quick-view {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	height: 40px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ms-main);
	border: 1px solid var(--ms-main);
	border-radius: var(--ms-radius);
	transition: all .3s;
}
.ms-card__qv.quick-view:hover { color: #fff; background: var(--ms-hover); border-color: var(--ms-hover); }
@media (max-width: 1199px) { .ms-card__qv.quick-view { font-size: 13px; } }
@media (max-width: 767px) {
	.product-small.col > .col-inner { border-radius: 10px; }
	.product-small .product-title { font-size: 14px; }
}

.ms-ptabs > .nav { display: flex; flex-wrap: wrap; gap: 0 10px; margin: 0 0 10px; }
.ms-ptabs > .nav > li { margin: 0 0 10px; }
.ms-ptabs > .nav > li > a {
	padding: 10px;
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ms-main);
	border: 1px solid var(--ms-main);
	border-radius: var(--ms-radius);
}
.ms-ptabs > .nav > li > a::before { display: none; }
.ms-ptabs > .nav > li.active > a, .ms-ptabs > .nav > li > a:hover { color: #fff; background: var(--ms-main); }
.ms-ptabs .tab-panels { padding-top: 0; }
.ms-ptabs .tab-panels .panel { padding: 0; }
.row.ms-pgrid { margin-left: -10px !important; margin-right: -10px !important; }
.row.ms-pgrid > .col { padding: 0 10px 20px; }
@media (min-width: 992px) and (max-width: 1199px) { .row.ms-pgrid > .col { flex-basis: 33.333%; max-width: 33.333%; } }
@media (max-width: 991px) {
	.ms-ptabs > .nav { flex-wrap: nowrap; overflow-x: auto; }
	.ms-ptabs > .nav > li > a { white-space: nowrap; }
	.row.ms-pgrid { flex-wrap: nowrap; overflow-x: auto; }
	.row.ms-pgrid > .col { flex: 0 0 41.667%; max-width: 41.667%; }
}
@media (max-width: 575px) { .row.ms-pgrid > .col { flex-basis: 58.333%; max-width: 58.333%; } }

/* §25 Home S12 one banner ------------------------------------------------------------------- */
.ms-b1__banner .banner-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--ms-main), transparent); opacity: .8; }
.ms-b1__box.text-box { max-width: 1200px; padding: 0 15px; }
.ms-b1__text { text-align: center; color: #fff; }
.ms-b1__title { margin: 0 0 15px; font-size: 34px; font-weight: 700; color: #fff; }
.ms-b1__content { font-size: 18px; }
@media (max-width: 991px) { .ms-b1__title { margin-bottom: 5px; font-size: 30px; } .ms-b1__content { font-size: 14px; } }
@media (max-width: 767px) {
	/* reference keeps the photo ratio (26.04 %) here and lets the overflow crop the button */
	.ms-b1 .ms-b1__text .ms-b1__title { font-size: 20px; }
	.ms-b1__content { display: none; }
	.ms-b1__box .button.ms-btn { margin-top: 10px; }
}

/* §26 Home S14 reviews ---------------------------------------------------------------------- */
.ms-review__side img { width: 100%; border-radius: var(--ms-radius); }
.ms-reviews .ms-title { margin-bottom: 10px; }
.ms-review.stack {
	display: grid !important;
	grid-template-columns: 96px 1fr;
	grid-template-areas: "avatar info" "text text";
	column-gap: 20px;
	padding: 25px !important;
	color: #fff;
	background: var(--ms-main);
	border: 5px solid var(--ms-hover);
	border-radius: var(--ms-radius);
}
.ms-review__avatar.img { grid-area: avatar; width: 96px !important; margin-bottom: 20px; }
.ms-review__avatar img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; }
.ms-review__info { grid-area: info; align-self: center; margin-bottom: 20px; }
.ms-review__name { margin: 0; font-size: 24px; font-weight: 700; color: #fff; }
.ms-review__type { margin-bottom: 5px; font-weight: 700; }
.ms-review__stars { font-size: 21px; line-height: 1; letter-spacing: 2px; color: var(--ms-hover); }
.ms-review__text { grid-area: text; font-size: 18px; }
@media (max-width: 1199px) {
	.ms-review__col-img { display: none; }
	.ms-review__col-text { flex-basis: 100% !important; max-width: 100% !important; }
}
@media (max-width: 767px) { .ms-review__name { font-size: 20px; } .ms-review__text { font-size: 16px; } }
/* reference .review-info { margin-bottom: 20px }: Flatsome's .stack > * { margin: 0 !important } drops the avatar/info margins, so the grid gap carries it.
   From 768 up (1440 [13] was -27 for the same reason); at 390 the same gap gave home [13] -4 -> +16, so it stays off there. */
@media (min-width: 768px) { .ms-review.stack { row-gap: 20px; } }

/* §27 Home S15 FAQ -------------------------------------------------------------------------- */
.ms-faq__img img { width: 100%; border-radius: var(--ms-radius); }
.ms-faq .accordion-item { margin-bottom: 10px; padding: 15px 20px; background: #fff; border-radius: var(--ms-radius); transition: background .3s; }
.ms-faq .accordion-item:hover, .ms-faq .accordion-item:has(.accordion-title.active) { background: var(--ms-main); }
.ms-faq .accordion-title {
	position: relative;
	padding: 0 30px 0 0;
	font-family: var(--ms-font-head);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: #000;
	border: 0;
}
.ms-faq .accordion-item:hover .accordion-title, .ms-faq .accordion-title.active { color: #fff; background: transparent; }
.ms-faq .accordion-title .toggle { position: absolute; top: 50%; right: 0; left: auto; width: 20px; height: 20px; min-height: 0; margin: -10px 0 0; padding: 0; display: flex; align-items: center; justify-content: center; line-height: 1; color: inherit; opacity: 1; }
.ms-faq .accordion-title .toggle i { display: block; margin: 0; font-size: 20px; line-height: 1; transition: transform .3s; }
.ms-faq .accordion-title .toggle i::before { content: ""; display: block; width: 10px; height: 10px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.ms-faq .accordion-title.active .toggle i { transform: rotate(180deg); }
.ms-faq .accordion-inner { margin-top: 10px; padding: 10px 0 0; font-size: 16px; color: #fff; border-top: 1px solid #9d9d9d; }
@media (max-width: 991px) {
	.ms-faq__col-img, .ms-faq__col-text { flex-basis: 100% !important; max-width: 100% !important; }
	.ms-faq__img { max-width: 620px; margin: 0 auto 20px !important; }
}
@media (max-width: 767px) {
	.ms-faq .accordion-item { padding: 10px; }
	.ms-faq .accordion-title { font-size: 16px; }
	.ms-faq .accordion-inner { font-size: 14px; }
}

/* §28 Home S17 partner logos ------------------------------------------------------------------ */
.ms-logo.img .img-inner { position: relative; padding-bottom: 60%; overflow: hidden; background: #fff; border-radius: var(--ms-radius); }
.ms-logo.img img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 10px; object-fit: contain; transition: transform .5s; }
.ms-logo.img:hover img { transform: scale(.8); }

/* §29 Shop + category archives (reference collection page) ----------------------------------------------- */
.ms-shop { max-width: 1410px; margin: 0 auto; padding: 0 15px 30px; }
.ms-shop-banners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.ms-shop-banners__item { display: block; overflow: hidden; border-radius: 10px; }
.ms-shop-banners__item img { display: block; width: 100%; height: auto; aspect-ratio: 1292 / 1144; object-fit: cover; transition: transform .5s; }
.ms-shop-banners__item:hover img { transform: scale(1.05); }
.ms-shop .row.ms-shop__row { width: auto; max-width: none; margin: 0 -10px; padding: 0; }
.ms-shop .ms-shop__row > .col { padding: 0 10px; }
.ms-shop .ms-shop__aside { padding-bottom: 30px; }
.ms-shop .sidebar-inner { padding: 0; }
.ms-shop .shop-container { padding: 0; }

/* Sidebar boxes */
.ms-aside { margin-bottom: 30px; padding: 10px; background: #fff; border-radius: 10px; }
.ms-aside__head { margin-bottom: 5px; font-size: 30px; font-weight: 700; line-height: 1.5; color: var(--ms-main); }
.ms-aside__title { padding: 0 0 5px; font-size: 22px; font-weight: 700; line-height: 1.5; color: var(--ms-main); }
.ms-navcat ul { margin: 0; padding: 0; list-style: none; }
.ms-navcat li { position: relative; margin: 0; }
.ms-navcat li > a { display: block; padding: 8px 30px 8px 0; font-size: 16px; font-weight: 700; line-height: 1.5; color: #000; word-break: break-word; }
.ms-navcat li.current-menu-item > a, .ms-navcat li:hover > a { color: var(--ms-hover); }
.ms-navcat .sub-menu { display: none; padding-left: 10px; }
.ms-navcat li.is-open > .sub-menu { display: block; }
.ms-navcat .sub-menu a { font-weight: 500; }
.ms-navcat__toggle { position: absolute; top: 21px; right: 7.5px; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; background: none; border: 0; transform: translateY(-50%); cursor: pointer; }
.ms-navcat__toggle::before, .ms-navcat__toggle::after { content: ""; position: absolute; top: 50%; left: 50%; background: #000; transform: translate(-50%, -50%) rotate(-90deg); transition: transform .4s, opacity .4s; }
.ms-navcat__toggle::before { width: 11px; height: 1px; }
.ms-navcat__toggle::after { width: 1px; height: 11px; }
.ms-navcat li:hover > .ms-navcat__toggle::before, .ms-navcat li:hover > .ms-navcat__toggle::after,
.ms-navcat li.current-menu-item > .ms-navcat__toggle::before, .ms-navcat li.current-menu-item > .ms-navcat__toggle::after { background: var(--ms-hover); }
.ms-navcat li.is-open > .ms-navcat__toggle::before { opacity: 0; }
.ms-navcat li.is-open > .ms-navcat__toggle::after, .ms-navcat li.is-open > .ms-navcat__toggle::before { transform: translate(-50%, -50%) rotate(90deg); }
.ms-aside__list { max-height: 200px; margin: 0; padding: 0; overflow-y: auto; font-size: 16px; font-weight: 500; list-style: none; }
.ms-aside__list::-webkit-scrollbar { width: 3px; }
.ms-aside__list::-webkit-scrollbar-thumb { background: var(--ms-main); }
.ms-aside__list li { display: flex; align-items: center; margin: 0 0 10px; }
.ms-aside__list li:last-child { margin-bottom: 5px; }
.ms-aside__list label { display: flex; align-items: center; margin: 0; font-size: 16px; font-weight: 500; line-height: 1.5; color: #000; cursor: pointer; }
.ms-aside__list label:hover { color: var(--ms-main); }
.ms-aside__list input[type="checkbox"] { width: 15px; height: 15px; margin: 0 5px 0 0; }
.ms-filter__clear { display: inline-block; margin-bottom: 15px; padding: 5px 10px; font-size: 14px; color: #fff; background: var(--ms-main); border-radius: 5px; }
.ms-filter__clear:hover { color: #fff; background: var(--ms-hover); }

/* Sorting pills */
.ms-sort { display: flex; align-items: center; margin-bottom: 20px; }
.ms-sort__label { display: flex; flex: 0 0 auto; align-items: center; margin: 2px 0 0; font-size: 14px; color: #000; }
.ms-sort__label svg { width: 22px; height: 22px; margin-right: 2px; }
.ms-sort__list { display: flex; margin: 0; padding: 0; list-style: none; }
.ms-sort__list li { margin: 0 0 0 10px; }
.ms-sort__list a { display: block; padding: 5px 10px; font-size: 14px; line-height: 20px; color: #000; background: #fff; border: 1px solid #eee; border-radius: 5px; }
.ms-sort__list li.active a, .ms-sort__list a:hover { color: #fff; background: var(--ms-hover); border-color: var(--ms-hover); }

/* Grid: 20px gutters; 4 / 3 / 2 per row */
.ms-shop .products.row { margin: 0 -10px; }
.ms-shop .products.row > .col { padding: 0 10px 20px; }
@media (min-width: 992px) and (max-width: 1199px) { .ms-shop .products.row > .col { flex-basis: 33.333%; max-width: 33.333%; } }
.ms-shop .woocommerce-pagination { margin-top: 10px; }
/* "Xem thêm sản phẩm" pill (reference .collection-loadmore .btn-loadmore) */
.ms-loadmore { padding-bottom: 50px; text-align: center; }
.ms-shop:has(.ms-loadmore) { padding-bottom: 0; }
.ms-loadmore__btn { display: inline-block; padding: 10px 25px; font-size: 16px; font-weight: 700; line-height: 24px; color: #fff; background: var(--ms-main); border-radius: 25px; }
.ms-loadmore__btn:hover, .ms-loadmore__btn:focus { color: #fff; background: var(--ms-hover); }
.ms-loadmore__btn.is-loading { opacity: .6; cursor: wait; }
.ms-empty-alert { padding: 12px 20px; font-size: 16px; color: #856404; background: #fff3cd; border: 1px solid #ffeeba; border-radius: 5px; }

/* Off-canvas filters under 992px (reference .dqdt-sidebar + #open-filters) */
.ms-shop__open, .ms-shop__overlay { display: none; }
@media (max-width: 991px) {
	.ms-shop .ms-shop__aside {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		display: block !important;
		width: 80%;
		max-width: 80%;
		padding: 10px 15px 0;
		overflow-y: auto;
		visibility: hidden;
		background: #fff;
		transform: translateX(100%);
		transition: all .35s ease;
	}
	.ms-shop.is-filter-open .ms-shop__aside { visibility: visible; transform: none; }
	.ms-shop .ms-shop__aside .ms-aside { padding: 0; }
	.ms-shop__open {
		position: fixed;
		top: 35%;
		right: 0;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 43px;
		height: 40px;
		min-height: 0;
		margin: 0;
		padding: 0;
		color: #fff;
		background: var(--ms-main);
		border: 0;
		border-radius: 5px 0 0 5px;
		box-shadow: 1px 3px 6px #888;
		transition: all .35s ease;
	}
	.ms-shop__open svg { width: 16px; height: 16px; }
	.ms-shop__open .ms-shop__open-filter + svg { display: none; }
	.ms-shop.is-filter-open .ms-shop__open { right: 80%; }
	.ms-shop.is-filter-open .ms-shop__open-filter { display: none; }
	.ms-shop.is-filter-open .ms-shop__open .ms-shop__open-filter + svg { display: block; }
	.ms-shop.is-filter-open .ms-shop__overlay { position: fixed; inset: 0; z-index: 9998; display: block; background: rgba(0, 0, 0, .8); }
	.ms-shop .ms-shop__main { flex-basis: 100%; max-width: 100%; }
	.ms-shop-banners { display: flex; overflow-x: auto; gap: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.ms-shop-banners::-webkit-scrollbar { display: none; }
	.ms-shop-banners__item { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; }
}
@media (min-width: 768px) and (max-width: 991px) {
	.ms-shop { max-width: 720px; } /* reference Bootstrap .container at 768–991 */
	.ms-shop .ms-shop__aside { width: 400px; max-width: 400px; }
	.ms-shop.is-filter-open .ms-shop__open { right: 400px; }
}
@media (max-width: 767px) {
	.ms-shop-banners { margin-bottom: 30px; }
	.ms-shop-banners__item { flex-basis: 100%; }
	.ms-aside__head { font-size: 20px; }
	.ms-sort__label { min-width: 90px; }
	.ms-sort__list { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
	.ms-sort__list li { flex: 0 0 auto; white-space: nowrap; }
	.ms-shop .products.row { margin: 0 -5px; }
	.ms-shop .products.row > .col { padding: 0 5px 10px; }
}

/* §30 Add to cart notice (reference #add-to-cart-notice) ------------------------------------------------- */
.ms-cart-notice {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 100000;
	padding: 40px 60px;
	font-size: 24px;
	text-align: center;
	color: #333;
	background: #fff;
	border: 2px solid #15b088;
	border-radius: 14px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
	opacity: 0;
	transform: translate(-50%, -50%) scale(.8);
	transition: all .4s ease;
	pointer-events: none;
}
.ms-cart-notice.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ms-cart-notice__icon { display: inline-block; margin-bottom: 20px; opacity: 0; transform: scale(.2); transition: all .4s ease .2s; }
.ms-cart-notice.is-in .ms-cart-notice__icon { opacity: 1; transform: scale(1); }
.ms-cart-notice__icon svg { width: 100px; height: 100px; }
@media (max-width: 549px) { .ms-cart-notice { width: calc(100% - 40px); padding: 30px 20px; font-size: 20px; } }

/* §31 Single product (reference /products/<handle>) ------------------------------------------------------ */
.ms-pd__wrap { max-width: 1410px; margin: 0 auto; padding: 0 15px; }
.ms-pd__tab .entry-content { padding: 0; }
.ms-pd__box { padding: 10px; background: #fff; border-radius: 10px; }
.ms-pd__top { display: grid; grid-template-columns: minmax(0, 1fr) calc(25% - 22.5px); gap: 0 30px; align-items: start; }
.ms-pd__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 30px; align-items: start; }
.ms-pd__gallery { position: sticky; top: 10px; }
.admin-bar .ms-pd__gallery { top: 42px; }
.ms-pd__gallery .product-images { margin: 0; }
.ms-pd__gallery .woocommerce-product-gallery__image { border-radius: 5px; overflow: hidden; background: #fff; }
.ms-pd__gallery .woocommerce-product-gallery__image img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.ms-pd__gallery .image-tools.bottom { display: none; }
.ms-pd__gallery .badge-container { margin: 10px; }
.ms-pd__wish { position: absolute; top: 10px; right: 10px; z-index: 9; display: flex; width: 25px; height: 25px; min-height: 0; margin: 0; padding: 0; color: #000; background: none; border: 0; cursor: pointer; }
.ms-pd__wish svg { width: 25px; height: 25px; }
.ms-pd__wish.is-active svg { fill: red; stroke: red; }
.ms-pd__gallery .product-gallery-slider .flickity-prev-next-button { width: 26px; height: 30px; margin-top: -15px; padding: 5px 4px; color: #fff; background: var(--ms-main); border-radius: 3px; opacity: 1; transform: none; }
.ms-pd__gallery .product-gallery-slider .flickity-prev-next-button svg { position: static; width: 100%; height: 100%; padding: 0; fill: #fff; border: 0; }
.ms-pd__gallery .product-gallery-slider .flickity-prev-next-button.previous { left: 10px; }
.ms-pd__gallery .product-gallery-slider .flickity-prev-next-button.next { right: 10px; }
.ms-pd__gallery .product-thumbnails { margin: 20px -5px 0; padding: 0; }
.ms-pd__gallery .product-thumbnails .col { padding: 0 5px !important; }
.ms-pd__gallery .product-thumbnails .ms-thumb { display: block; overflow: hidden; background: #fff; border: 2px solid #ebebeb; border-radius: 10px; transform: none !important; cursor: pointer; }
.ms-pd__gallery .product-thumbnails img { width: 100%; aspect-ratio: 1; object-fit: contain; opacity: 1 !important; transform: none !important; }
.ms-pd__gallery .product-thumbnails .is-nav-selected .ms-thumb,
.ms-pd__gallery .product-thumbnails .ms-thumb:hover { border-color: var(--ms-main); }
.ms-pd__title { margin: 0 0 5px; font-size: 26px; font-weight: 700; line-height: 1.4; color: #000; }
.ms-pd__meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; margin-bottom: 20px; font-size: 16px; font-weight: 700; color: #000; }
.ms-pd__meta-value { font-weight: 500; color: var(--ms-main); }
.ms-pd__price { margin-bottom: 30px; padding: 20px; background: var(--ms-bg); border-radius: 10px; }
.ms-pd__price .price { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0; font-size: 30px; line-height: 30px; font-weight: 700; color: var(--ms-price); }
.ms-pd__price .price .amount { color: var(--ms-price); }
.ms-pd__price .price ins { order: -1; text-decoration: none; }
.ms-pd__price .price del { font-size: 16px; font-weight: 400; color: #545454; opacity: 1; }
.ms-pd__price .price del .amount { color: #545454; }

.ms-pd__promo { position: relative; margin-bottom: 20px; padding: 30px 10px 10px; border: 2px solid var(--ms-main); border-radius: 5px; }
.ms-pd__promo-title { position: absolute; top: -10px; left: -7px; display: flex; align-items: center; padding: 4px 10px; font-size: 16px; font-weight: 700; color: #fff; background: var(--ms-price); border-radius: 5px 5px 5px 0; }
.ms-pd__promo-title::after { content: ""; position: absolute; top: 100%; left: 0; border-top: 4px solid #652900; border-left: 6px solid transparent; }
.ms-pd__promo-title svg { width: 22px; height: 22px; margin-right: 5px; }
.ms-pd__promo-list { margin: 0; padding: 0; list-style: none; }
.ms-pd__promo-list li { display: flex; align-items: center; margin: 0 0 10px; font-size: 14px; }
.ms-pd__promo-list li:last-child { margin-bottom: 0; }
.ms-pd__promo-list svg { flex: 0 0 24px; width: 24px; height: 24px; margin-right: 5px; }
.ms-pd__promo-list svg circle { fill: var(--ms-main); stroke: var(--ms-main); }
.ms-pd__promo-list svg path { stroke: #fff; stroke-width: 2.2; }

.ms-pd__cart { margin-bottom: 20px; }
.ms-pd__cart form.cart { margin: 0; }
.ms-pd__cart form.cart:not(.variations_form),
.ms-pd__cart .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.ms-pd__cart form.cart > .ms-qty-label, .ms-pd__cart .woocommerce-variation-add-to-cart > .ms-qty-label { flex: 0 0 auto; }
.ms-pd__cart .variations { margin-bottom: 15px; }
.ms-qty-label { margin: 0 10px 0 0; font-size: 14px; font-weight: 600; white-space: nowrap; }
.ms-pd__cart .ux-quantity { flex: 0 0 auto !important; display: flex; margin: 0 10px 0 0 !important; padding: 2px; border: 1px solid var(--ms-main); border-radius: 10px; }
.ms-pd__cart .ux-quantity .button { width: 35px; height: 35px; min-height: 0; margin: 0; padding: 0; font-size: 20px; line-height: 35px; color: #fff; background: var(--ms-main); border: 0; border-radius: 10px; box-shadow: none; }
.ms-pd__cart .ux-quantity .button:hover { background: var(--ms-hover); }
.ms-pd__cart .ux-quantity .qty { width: 60px; max-width: none; height: 35px; min-height: 0; margin: 0; padding: 0 2px; font-size: 15px; text-align: center; background: none; border: 0; box-shadow: none; }
.ms-pd__cart .single_add_to_cart_button { flex: 1 1 0 !important; height: 40px; min-height: 0; margin: 0; padding: 0 10px; font-size: 18px; font-weight: 700; line-height: 40px; text-transform: none; letter-spacing: 0; color: #fff; background: var(--ms-main); border: 0; border-radius: 10px; }
.ms-pd__cart .single_add_to_cart_button:hover { opacity: .8; }
.ms-pd__cart .ms-buynow { flex: 0 0 100%; height: 40px; min-height: 0; margin: 10px 0 0; padding: 5px; font-size: 14px; font-weight: 600; line-height: 30px; text-transform: uppercase; color: #fff; background: var(--ms-main); border: 0; border-radius: 10px; cursor: pointer; }
.ms-pd__cart .ms-buynow:hover { opacity: .8; }

.ms-viewed__title { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: #000; }
.ms-viewed__empty { margin: 0; font-size: 14px; }
.ms-viewed__list { max-height: 202px; padding-right: 10px; overflow-y: auto; }
.ms-viewed__item { display: flex; align-items: center; margin-bottom: 10px; padding: 10px; background: var(--ms-bg); border-radius: 10px; }
.ms-viewed__img { flex: 0 0 80px; width: 80px; }
.ms-viewed__img img { display: block; width: 80px; height: 80px; object-fit: contain; }
.ms-viewed__info { min-width: 0; padding-left: 20px; }
.ms-viewed__name { display: block; margin-bottom: 5px; font-size: 16px; font-weight: 700; color: #000; }
.ms-viewed__price { display: block; font-weight: 700; color: var(--ms-price); }
.ms-viewed__regular { font-size: 12px; color: #999; text-decoration: line-through; }

.ms-pd__commit { margin: 20px 0; padding: 10px; background: var(--ms-bg); border-radius: 10px; }
.ms-pd__commit ul { margin: 0; padding: 0; list-style: none; }
.ms-pd__commit li { display: flex; align-items: center; margin: 0 0 5px; font-size: 16px; font-weight: 700; color: #000; }
.ms-pd__commit img { width: 50px; height: auto; margin-right: 10px; }
.ms-pd__support { padding: 10px; text-align: center; border: 1px solid var(--ms-main); border-radius: 10px; }
.ms-pd__support-title { font-size: 14px; font-weight: 700; color: #000; }
.ms-pd__support-image { position: relative; height: 150px; }
.ms-pd__support-image img { position: absolute; inset: 0; width: auto; max-height: 100%; margin: auto; }
.ms-pd__support-text { font-size: 14px; line-height: 23px; }
.ms-pd__support-btn { display: block; margin-top: 20px; padding: 10px 20px; font-size: 16px; font-weight: 600; color: #fff; background: var(--ms-main); border-radius: 5px; }
.ms-pd__support-btn:hover { color: #fff; background: var(--ms-hover); }

.ms-pd__tabs { margin-top: 50px; }
.ms-pd__tabs-nav { display: flex; margin: 0 0 20px; padding: 0; list-style: none; }
.ms-pd__tabs-nav li { margin: 0 10px; cursor: pointer; }
.ms-pd__tabs-nav li:first-child { margin-left: 0; }
.ms-pd__tabs-nav h3 { margin: 0; padding: 4px 15px; font-size: 22px; font-weight: 600; line-height: 1.5; color: #000; border: 1px solid var(--ms-main); border-radius: 10px; }
.ms-pd__tabs-nav li.is-active h3,
.ms-pd__tabs-nav li:hover h3 { color: #fff; background: var(--ms-main); }
.ms-pd__tab { display: none; }
.ms-pd__tab.is-active { display: block; }
.ms-pd__tab .entry-content { font-size: 14px; }
.ms-pd__tab .entry-content img { height: auto; }
.ms-desc { position: relative; }
.ms-desc.has-height .ms-desc__body { height: 650px; overflow: hidden; }
.ms-desc.is-expanded .ms-desc__body { height: auto; }
.ms-desc__more { display: none; position: relative; text-align: center; }
.ms-desc.has-height .ms-desc__more { display: block; }
.ms-desc.has-height:not(.is-expanded) .ms-desc__more::before { content: ""; display: block; height: 100px; margin-top: -60px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .91) 50%, #fff 55%); }
.ms-desc__btn { min-height: 0; margin: 20px 0 20px; padding: 5px 15px; font-size: 16px; font-weight: 400; line-height: 1.5; text-transform: none; color: var(--ms-main); background: #fff; border: 1px solid var(--ms-main); border-radius: 10px; cursor: pointer; }
.ms-desc__btn:hover { color: #fff; background: var(--ms-main); }
.ms-desc.has-height:not(.is-expanded) .ms-desc__btn { margin-top: 0; }
.ms-desc__less-text, .ms-desc.is-expanded .ms-desc__more-text { display: none; }
.ms-desc.is-expanded .ms-desc__less-text { display: inline; }

.ms-pd__related { margin: 45px 0 50px; }
.ms-pd__related + .ms-pd__peers { margin-top: -5px; }
.ms-pd__related .ms-title { margin-bottom: 45px; }
.ms-pd__related .related-products-wrapper { margin: 0; padding: 0; }
.ms-pd__related .row-slider { width: auto; max-width: none; margin: 0 -10px; }
.ms-pd__related .row-slider .product-small.col { padding: 0 10px 2px; }

@media (max-width: 1199px) {
	.ms-pd__top { grid-template-columns: minmax(0, 1fr); }
	.ms-pd__meta { grid-template-columns: 1fr; }
	.ms-pd__aside { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px; }
	.ms-pd__commit { margin: 0; }
}
@media (max-width: 991px) {
	.ms-pd__main { grid-template-columns: minmax(0, 1fr); }
	.ms-pd__gallery { position: relative; top: 0; margin-bottom: 15px; }
	.ms-pd__related { margin-bottom: 30px; }
	.ms-pd__aside { grid-template-columns: 1fr; }
}
/* reference Bootstrap container is 720 px at 768–991 (gallery, summary, commitments, support stacked) */
@media (min-width: 768px) and (max-width: 991px) { .ms-pd__wrap { max-width: 720px; } }
@media (max-width: 767px) {
	.ms-pd__title { font-size: 22px; }
	.ms-pd__aside { grid-template-columns: 1fr; }
	.ms-pd__tabs { margin-top: 30px; }
	.ms-pd__tabs-nav { overflow-x: auto; }
	.ms-pd__tabs-nav li { flex: 0 0 auto; white-space: nowrap; }
	.ms-pd__tabs-nav h3 { font-size: 20px; }
	.ms-pd__cart .ux-quantity { margin-right: 0 !important; }
	.ms-pd__cart .single_add_to_cart_button { flex: 0 0 100% !important; margin-top: 10px; }
	.ms-pd__related .row-slider { margin: 0 -5px; }
	.ms-pd__related .row-slider .product-small.col { padding: 0 5px 2px; }
}
/* reference related swipers: 1.5 cards per view, 15 px apart below 450 px */
@media (max-width: 449px) {
	.ms-pd__related .ms-title { margin-bottom: 20px; }
	.ms-pd__related .row-slider { margin: 0 -7.5px; }
	.ms-pd__related .row-slider .product-small.col { flex-basis: 66.667%; max-width: 66.667%; padding: 0 7.5px 2px; }
}

/* §32 Cart, checkout, account, wishlist (references /cart, /checkout, /account/login, /pages/san-pham-yeu-thich) ---- */
.ms-store-page .page-wrapper { padding-top: 0; padding-bottom: 50px; }
.ms-store-page #content > .row-main { max-width: 1410px; }
.ms-store-page #content > .row-main > .col { padding-bottom: 0; }
.ms-store-page .woocommerce-message.message-wrapper, .ms-store-page .woocommerce-info.message-wrapper, .ms-store-page .woocommerce-error { margin-bottom: 20px; }

/* Cart */
.woocommerce-cart .woocommerce > .row, .woocommerce-cart .cart-container > .woocommerce { width: auto; }
.woocommerce-cart .woocommerce.row { margin: 0; padding: 20px 10px; background: #fff; border-radius: 10px; }
.woocommerce-cart .woocommerce.row.row-divided > .col + .col:not(.large-12) { border-left: 0; }
.woocommerce-cart .large-7 { flex-basis: 66.666%; max-width: 66.666%; }
.woocommerce-cart .cart-collaterals.large-5 { flex-basis: 33.333%; max-width: 33.333%; }
.woocommerce-cart table.cart th { font-size: 15px; font-weight: 700; color: var(--ms-main); text-transform: none; letter-spacing: 0; border-bottom: 2px solid #ebebeb; }
.woocommerce-cart table.cart td { padding-top: 15px; padding-bottom: 15px; border-bottom: 1px solid #ebebeb; }
.woocommerce-cart table.cart .product-thumbnail { width: 100px; }
.woocommerce-cart table.cart .product-thumbnail img { width: 80px; max-width: 80px; border: 1px solid #ebebeb; border-radius: 10px; }
.woocommerce-cart table.cart .product-name a { font-size: 16px; font-weight: 600; color: #000; }
.woocommerce-cart table.cart .product-name a:hover { color: var(--ms-hover); }
.woocommerce-cart table.cart .amount { font-weight: 700; color: var(--ms-price); }
.woocommerce-cart table.cart .remove { width: 26px; height: 26px; line-height: 22px; color: var(--ms-main) !important; border-color: var(--ms-main); }
.woocommerce-cart table.cart .remove:hover { color: #fff !important; background: var(--ms-main); }
.woocommerce-cart .ux-quantity .button, .woocommerce-checkout .ux-quantity .button { width: 30px; min-height: 35px; color: #fff; background: var(--ms-main); border: 0; border-radius: 10px; }
.woocommerce-cart .ux-quantity input.qty { width: 50px; height: 35px; min-height: 35px; border: 0; box-shadow: none; }
.woocommerce-cart .ux-quantity { padding: 2px; border: 1px solid #ebebeb; border-radius: 10px; }
.woocommerce-cart td.actions .button[name="update_cart"] { min-height: 40px; padding: 0 20px; font-size: 15px; text-transform: none; background: var(--ms-main); border-radius: 10px; }
.woocommerce-cart .cart-sidebar { padding: 20px; background: var(--ms-bg); border-radius: 10px; }
.woocommerce-cart .cart_totals > h2, .woocommerce-cart .cart_totals th.product-name { font-size: 22px; font-weight: 700; color: var(--ms-main); text-transform: none; letter-spacing: 0; }
.woocommerce-cart .cart_totals tr.order-total th, .woocommerce-cart .cart_totals tr.order-total td { font-size: 18px; border-bottom: 0; }
.woocommerce-cart .cart_totals tr.order-total .amount { font-size: 24px; color: var(--ms-price); }
.ms-cart-note { margin: 5px 0 15px; font-size: 14px; color: #555; }
.ms-cart-note p { margin: 0 0 5px; }
.wc-proceed-to-checkout .ms-cart-checkout { display: block; width: 100%; min-height: 45px; margin: 0 0 10px; padding: 0 15px; font-size: 18px; font-weight: 700; line-height: 45px; text-transform: uppercase; color: #fff; background: var(--ms-price); border-radius: 10px; }
.wc-proceed-to-checkout .ms-cart-checkout:hover { background: var(--ms-main); }
.ms-cart-continue { display: block; text-align: center; font-size: 15px; font-weight: 600; color: var(--ms-main); }
.ms-cart-continue:hover { color: var(--ms-hover); }
.woocommerce-cart .ux-cart-coupon .widget-title { font-size: 16px; color: var(--ms-main); }
.woocommerce-cart .ux-cart-coupon .button { border-radius: 10px; }

/* Empty cart */
/* reference .bg-thumb (p20 r10, ≤767 p5 r5) > .cart-empty: img max-height 300, button mt20 20px r10 */
.ms-cart-empty { padding: 20px; text-align: center; background: #fff; border-radius: 10px; }
@media (max-width: 767px) { .ms-cart-empty { padding: 5px; border-radius: 5px; } }
.ms-cart-empty .wc-empty-cart-message, .ms-cart-empty .cart-empty, .ms-cart-empty .woocommerce-info { margin: 0; padding: 0; position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ms-cart-empty__img { display: block; width: auto; max-width: 100%; height: 300px; margin: 0 auto; }
.ms-cart-empty .return-to-shop { margin: 0; font-size: 14px; line-height: 1.5; }
.ms-cart-empty__btn { display: inline-block; margin-top: 20px; padding: 5px 20px; font-size: 20px; font-weight: 700; line-height: 1.5; color: #fff; background: var(--ms-main); border: 1px solid transparent; border-radius: 10px; }
.ms-cart-empty__btn:hover { color: #fff; background: var(--ms-hover); }

/* Checkout */
.woocommerce-checkout .woocommerce { padding: 20px; background: #fff; border-radius: 10px; }
.woocommerce-checkout form.checkout > .row { margin: 0 -15px; }
.woocommerce-checkout h3, .woocommerce-checkout #order_review_heading { font-size: 22px; font-weight: 700; color: var(--ms-main); text-transform: none; letter-spacing: 0; }
.woocommerce-checkout .form-row label { font-size: 15px; font-weight: 600; color: #000; }
.woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row textarea, .woocommerce-checkout .form-row select { min-height: 45px; border: 1px solid #d9d9d9; border-radius: 10px; box-shadow: none; }
.woocommerce-checkout .form-row textarea { min-height: 100px; }
.woocommerce-checkout .form-row input.input-text:focus, .woocommerce-checkout .form-row textarea:focus { border-color: var(--ms-main); }
.woocommerce-checkout .col-inner.has-border { padding: 20px; background: var(--ms-bg); border: 0; border-radius: 10px; }
.woocommerce-checkout-review-order-table th { font-size: 15px; color: var(--ms-main); text-transform: none; letter-spacing: 0; }
.woocommerce-checkout-review-order-table .order-total .amount { font-size: 22px; color: var(--ms-price); }
.woocommerce-checkout .wc_payment_methods { margin-top: 10px; }
.woocommerce-checkout .wc_payment_method { margin-bottom: 10px; padding: 10px 15px; background: #fff; border: 1px solid #ebebeb; border-radius: 10px; }
.woocommerce-checkout .wc_payment_method > label { font-size: 15px; font-weight: 700; color: #000; }
.woocommerce-checkout .payment_box { margin: 5px 0 0; padding: 0 0 0 22px; font-size: 14px; background: none; }
.woocommerce-checkout #place_order { width: 100%; min-height: 50px; font-size: 18px; font-weight: 700; text-transform: uppercase; color: #fff; background: var(--ms-main); border-radius: 10px; }
.woocommerce-checkout #place_order:hover { background: var(--ms-hover); }
.woocommerce-checkout .woocommerce-form-coupon-toggle .message-container { padding-left: 0; }
.woocommerce-checkout .checkout_coupon { border-radius: 10px; }
.woocommerce-checkout .checkout_coupon .button { border-radius: 10px; }

/* Account (login / register card) */
.ms-auth { display: flex; justify-content: center; padding: 0 0 40px; }
.ms-auth__card { width: 100%; max-width: 480px; padding: 40px 40px 30px; text-align: center; background: #fff; border: 1px solid #ebebeb; border-radius: 20px; box-shadow: 0 2px 6px rgba(0, 0, 0, .04); }
.ms-auth__brand { margin-bottom: 6px; font-family: Montserrat, sans-serif; font-size: 20px; font-weight: 700; color: var(--ms-main); }
.ms-auth__title { margin: 0 0 25px; font-size: 16px; font-weight: 500; color: #555; }
.ms-auth__form { margin: 0; text-align: left; }
.ms-auth__form .form-row { margin: 0 0 15px; padding: 0; }
.ms-auth__form input.input-text { width: 100%; height: 50px; min-height: 50px; padding: 0 12px; font-size: 15px; border: 1px solid #d9d9d9; border-radius: 8px; box-shadow: none; }
.ms-auth__form input.input-text:focus { border-color: var(--ms-main); }
.ms-auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 15px; margin-bottom: 15px; font-size: 14px; }
.ms-auth__row label { margin: 0; font-size: 14px; font-weight: 400; }
.ms-auth__row input[type="checkbox"] { margin: 0 5px 0 0; }
.ms-auth__lost { color: var(--ms-main); }
.ms-auth__hint { font-size: 14px; color: #555; }
.ms-auth .ms-auth__submit { display: block; width: 100%; height: 48px; min-height: 48px; margin: 0; font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; color: #fff; background: var(--ms-main); border-radius: 8px; }
.ms-auth .ms-auth__submit:hover { background: var(--ms-hover); }
.ms-auth__or { display: flex; align-items: center; gap: 15px; margin: 20px 0; font-size: 13px; color: #222; }
.ms-auth__or::before, .ms-auth__or::after { content: ""; flex: 1; height: 1px; background: #e5e5e5; }
.ms-auth__alt { display: block; height: 48px; font-size: 15px; font-weight: 700; line-height: 48px; color: #000; background: #ebebeb; border-radius: 8px; }
.ms-auth__alt:hover { color: #fff; background: var(--ms-main); }
.ms-auth__back { display: inline-block; margin-top: 20px; font-size: 15px; color: #808080; text-decoration: underline; }
.ms-auth__back:hover { color: var(--ms-main); }
.ms-auth .woocommerce-privacy-policy-text { font-size: 13px; color: #666; }

/* Logged-in account */
.woocommerce-account:not(.ms-auth-page) .page-wrapper .woocommerce { padding: 20px; background: #fff; border-radius: 10px; }

/* Wishlist */
.ms-wishlist { min-height: 310px; }
.ms-wishlist.is-loading { opacity: .5; }
.ms-wishlist__empty { padding: 12px 20px; font-size: 14px; color: #856404; background: #fff3cd; border: 1px solid #ffeeba; border-radius: 4px; }
.ms-wishlist__empty[hidden] { display: none; }
.ms-wishlist .row { width: auto; max-width: none; margin: 0 -10px; }
.ms-wishlist .row > .col { padding: 0 10px 20px; }
/* reference Bootstrap .container is 720 px at 768–991 (690 px content): the notice was full width at 820 */
@media (min-width: 768px) and (max-width: 991px) { .ms-wishlist { max-width: 690px; margin-left: auto; margin-right: auto; } }

@media (max-width: 849px) {
	.woocommerce-cart .large-7, .woocommerce-cart .cart-collaterals.large-5 { flex-basis: 100%; max-width: 100%; }
	.woocommerce-cart .cart-collaterals { margin-top: 20px; }
	.woocommerce-checkout .woocommerce { padding: 15px 5px; }
}
@media (max-width: 549px) {
	.ms-store-page .page-wrapper { padding-bottom: 30px; }
	.woocommerce-cart .woocommerce.row { padding: 10px 0; }
	.ms-auth { padding: 0 0 30px; }
	.ms-auth__card { padding: 30px 20px 25px; }
	.ms-wishlist .row { margin: 0 -5px; }
	.ms-wishlist .row > .col { padding: 0 5px 10px; }
}
.ms-pd__related .related, .ms-pd__related .related-products-wrapper { padding-top: 0; border-top: 0; }
.ms-store-page .message-wrapper { margin: 0 0 20px; padding: 12px 20px; background: #fff; border: 0; border-left: 4px solid var(--ms-hover); border-radius: 10px; box-shadow: none; outline: 0; }
.ms-store-page .message-wrapper .message-container { padding: 0; font-size: 15px; color: #000; border: 0; }
.ms-store-page .woocommerce-error.message-wrapper, .ms-store-page .message-wrapper:has(.woocommerce-error) { border-left-color: var(--ms-price); }
.woocommerce-cart .message-wrapper .wc-forward { display: none; }
.woocommerce-cart .continue-shopping .button, .woocommerce-cart td.actions .button { min-height: 40px; font-size: 15px; line-height: 38px; text-transform: none; letter-spacing: 0; border-radius: 10px; }
.woocommerce-cart .ux-cart-coupon input.input-text { min-height: 42px; border-radius: 10px; box-shadow: none; }
.woocommerce-checkout .woocommerce-billing-fields h3, .woocommerce-checkout .woocommerce-additional-fields h3, .woocommerce-checkout #ship-to-different-address { font-size: 22px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ms-main); }
.woocommerce-checkout .woocommerce-form-coupon-toggle .message-wrapper { margin-bottom: 15px; }

/* Wishlist: the reference's section.page is 300px tall, no gap below. */
.ms-wishlist { min-height: 300px; }
.ms-store-page .page-wrapper:has(.ms-wishlist) { padding-bottom: 0; }

/* §33 Blog: index pages /du-an/ /news/ /doi-ngu/ and the single post templates (reference /blogs/...) ------------ */
.ms-single.page-wrapper { padding-top: 0; padding-bottom: 0; }
.ms-title__head a { color: inherit; }
.ms-title__head a:hover { color: var(--ms-hover); }

/* Team cards: round share button on the photo (reference .doingu-social .icon-share) */
.ms-team-posts .box-text { position: relative; }
.ms-team__share {
	position: absolute;
	top: -45px;
	right: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	color: #fff;
	background: var(--ms-main);
	border: 5px solid #fff;
	border-radius: 50%;
	transition: background .3s;
}
.ms-team__share:hover { color: #fff; background: var(--ms-hover); }
.ms-team-posts .box-text a.ms-team__share { display: flex; margin: 0; line-height: 1; }
.ms-team__share svg { flex: 0 0 26px; width: 26px; height: 26px; }
.ms-team-posts .post-title { padding-right: 60px; }

/* Index grids: all posts, no slider */
.row.ms-bl-team > .col, .row.ms-bl-duan > .col { margin-bottom: 20px; }
/* /doi-ngu/ grid like the reference .col-xl-3 .col-md-4 .col-12: 4 ≥1200, 3 at 768–1199, 1 below 768 */
@media (max-width: 1199px) { .row.ms-bl-team > .col { flex-basis: 33.333%; max-width: 33.333%; } }
@media (max-width: 767px) { .row.ms-bl-team > .col { flex-basis: 100%; max-width: 100%; } }
@media (max-width: 767px) { .row.ms-bl-duan > .col { flex-basis: 100%; max-width: 100%; } }
/* the reference's Bootstrap container is 720 px at 768–991 */
@media (min-width: 768px) and (max-width: 991px) { .ms-bl-page--team > .section-content > .row, .ms-bl-page--duan > .section-content > .row { max-width: 720px; } }
/* reference .row-fix .col-fix: 10 px between the cards at ≤500 px */
@media (max-width: 500px) { .ms-bl-page .row.ms-bl-team > .col, .ms-bl-page .row.ms-bl-duan > .col { margin-bottom: 10px; } }
.ms-bl-team .post-title { padding-right: 0; } /* the reference name runs under the share button, it does not wrap early */
/* reference .item-doingu: h3 20 px with an 8 px gap, role (.cv) 16 px without top margin, at every width */
.ms-bl-team .post-title, .ms-bl-team .post-title a { font-size: 20px; }
.ms-bl-team .post-title { margin-bottom: 8px; }
.ms-bl-team .ms-team__role { margin-top: 0; font-size: 16px; }

/* News index: white box, list of cards | sidebar */
.row.ms-bl-news { width: calc(100% - 30px); max-width: 1380px; padding: 10px 0; background: #fff; border-radius: var(--ms-radius); }
.row.ms-bl-news > .col { padding: 0 10px; }
.ms-news-list .box-blog-post { align-items: center; gap: 20px; overflow: hidden; background: var(--ms-bg); border-radius: var(--ms-radius); }
.ms-news-list .box-image { flex-basis: calc(50% - 10px); width: calc(50% - 10px) !important; align-self: stretch; }
.ms-news-list .box-text { position: static; padding: 10px 10px 10px 0; }
.ms-news-list .ms-news__info { right: calc(50% + 10px); }
@media (max-width: 991px) { .row.ms-bl-news > .col { flex-basis: 100%; max-width: 100%; } }
@media (max-width: 767px) {
	.ms-news-list .box-blog-post { gap: 0; }
	.ms-news-list .box-image { width: 100% !important; }
	.ms-news-list .box-text { padding: 10px; }
	.ms-news-list .ms-news__info { right: 0; top: calc((100vw - 70px) * .67 - 31px); }
}

/* Sidebar widgets (area "ms-blog"): pale boxes, menu tree, compact post list */
.ms-bl-aside.ms-aside { margin-bottom: 30px; padding: 10px; background: var(--ms-bg); box-shadow: 0 1px 8px rgba(0, 0, 0, .03); }
.ms-bl-aside .ms-aside__title { margin-bottom: 5px; padding: 0; }
.ms-bl-aside.widget_nav_menu .ms-aside__title { text-transform: uppercase; }
.ms-bl-aside .ms-navcat .sub-menu { margin: 0; }
.ms-bl-aside .ms-navcat li, .ms-bl-aside .ms-plist__item { border: 0; }
.ms-bl-aside .ms-navcat .toggle { display: none; }
.ul-reset .ms-bl-aside li, .ms-bl-aside li { margin-left: 0; list-style: none; }
.ms-plist { margin: 0; padding: 0; list-style: none; }
.ms-plist__item.ms-plist__item { display: flex; gap: 10px; margin: 0 0 15px; }
.ms-plist__item:last-child { margin-bottom: 0; }
.ms-plist__item .ms-plist__thumb { position: relative; display: block; flex: 0 0 150px; width: 150px; min-width: 150px; height: 100px; padding: 0; overflow: hidden; background: #eee; border-radius: 5px; }
.ms-plist__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ms-plist__body { min-width: 0; }
.ms-plist__title { display: -webkit-box; margin: 0; overflow: hidden; font-size: 16px; font-weight: 700; line-height: 1.4; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ms-plist__title a { color: #000; }
.ms-plist__title a:hover { color: var(--ms-hover); }
.ms-plist__date { font-size: 14px; font-weight: 500; color: var(--ms-main); }

/* Post content (reference .rte) */
.ms-rte { font-size: 16px; line-height: 1.5; }
.ms-rte h2 { margin: 0 0 10px; font-size: 24px; font-weight: 700; line-height: 1.4; color: #000; }
.ms-rte h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.4; color: #000; }
.ms-rte p, .ms-rte ul, .ms-rte ol { margin-bottom: 15px; }
.ms-rte > :last-child { margin-bottom: 0; }
.ms-rte img { height: auto; border-radius: 5px; }
.ms-rte a { color: var(--ms-main); }
.ms-rte a:hover { color: var(--ms-hover); }
@media (max-width: 767px) { .ms-rte h2 { font-size: 20px; } .ms-rte h3 { font-size: 18px; } }

/* Team member (reference .layout-article-doingu) */
.ms-st__top { display: flex; align-items: flex-start; gap: 30px; }
.ms-st__img { flex: 0 0 calc(50% - 15px); overflow: hidden; border-radius: 20px; }
.ms-st__img img { display: block; width: 100%; }
.ms-st__info { flex: 1; min-width: 0; }
.ms-st__name { margin: 0; font-size: 40px; font-weight: 700; line-height: 40px; color: #000; }
.ms-st__job { display: block; margin-bottom: 20px; font-size: 16px; color: var(--ms-main); }
.ms-st__summary { margin-bottom: 20px; font-size: 16px; }
.ms-st__summary p { margin: 0; }
.ms-st__box { position: relative; padding: 50px; font-size: 16px; background: #fff; border-radius: 20px; box-shadow: rgba(0, 0, 0, .03) 0 1px 24px; }
.ms-st__box-title { margin: 0 0 10px; font-size: 30px; font-weight: 700; line-height: 1.4; color: var(--ms-main); }
.ms-st__more, .ms-sp__more { margin: 50px 0; }
@media (min-width: 992px) { .ms-st__box { left: -20%; width: 120%; } }
@media (max-width: 991px) {
	.ms-st__top { display: block; }
	.ms-st__name { margin-top: 20px; }
}
@media (max-width: 767px) {
	.ms-st__name { font-size: 30px; line-height: 1.3; }
	.ms-st__box { padding: 20px; }
	.ms-st__box-title { font-size: 24px; }
}

/* Slider of the team cards: square arrows over the photos */
.ms-bl-slider .slider .flickity-prev-next-button { top: 50%; bottom: auto; width: 30px; height: 30px; min-height: 0; margin: 0; padding: 4px; color: var(--ms-main); background: #fff; border: 1px solid var(--ms-main); border-radius: 3px; opacity: 1; transform: translateY(-50%); }
.ms-bl-slider .slider .flickity-prev-next-button svg { position: static; top: auto; left: auto; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; fill: currentColor; transform: none; }
.ms-bl-slider .slider .flickity-prev-next-button.previous { left: 10px; }
.ms-bl-slider .slider .flickity-prev-next-button.next { right: 10px; }
.ms-rte h3 { font-weight: 400; }
.ms-rte ul { margin-left: 0; padding-left: 0; list-style: none; }
.ms-rte ul li { margin: 0; }
.ms-rte img.aligncenter { margin-left: 0; }
@media (min-width: 768px) and (max-width: 991px) { .container.ms-st { max-width: 720px; } }
@media (max-width: 549px) {
	.ms-bl-slider .slider .flickity-prev-next-button.previous { left: 20px; }
	.ms-bl-slider .slider .flickity-prev-next-button.next { right: 20px; }
	.ms-bl-slider .slider .flickity-prev-next-button, .ms-bl-slider .slider .flickity-prev-next-button:disabled { opacity: 1; }
}
.ms-bl-slider .row.ms-team-posts .flickity-slider > .col { max-width: 25%; flex-basis: 25%; }
@media (max-width: 1199px) { .ms-bl-slider .row.ms-team-posts .flickity-slider > .col { max-width: 33.333%; flex-basis: 33.333%; } }
@media (max-width: 849px) { .ms-bl-slider .row.ms-team-posts .flickity-slider > .col { max-width: 50%; flex-basis: 50%; } }
@media (max-width: 549px) { .ms-bl-slider .row.ms-team-posts .flickity-slider > .col { max-width: 100%; flex-basis: 100%; } }

/* Project (reference .layout-article-duan) */
.ms-sp__top { display: flex; align-items: flex-start; gap: 30px; }
.ms-sp__side { flex: 0 0 calc(33.333% - 20px); min-width: 0; }
.ms-sp__img { margin-bottom: 20px; overflow: hidden; border-radius: 20px; box-shadow: 0 1px 18px rgba(0, 0, 0, .05); }
.ms-sp__img img { display: block; width: 100%; }
.ms-sp__specs { margin-bottom: 20px; padding: 10px; background: #fff; border-radius: var(--ms-radius); }
.ms-sp__spec { margin-bottom: 20px; font-size: 16px; }
.ms-sp__spec:last-child { margin-bottom: 0; }
.ms-sp__label { margin-bottom: 5px; font-size: 15px; line-height: 1.5; color: #000; }
.ms-sp__value { font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--ms-main); }
.ms-sp__main { flex: 1; min-width: 0; }
.ms-sp__content { padding: 10px; background: #fff; border-radius: var(--ms-radius); }
.row.ms-duan-posts > .col { margin-bottom: 20px; }
@media (max-width: 991px) {
	.ms-sp__top { display: block; }
}
@media (max-width: 767px) { .ms-sp__more .row.ms-duan-posts > .col { flex-basis: 100%; max-width: 100%; } }

/* News post (reference .article-main) */
.ms-sn__top { display: flex; align-items: flex-start; gap: 65px; margin-bottom: 30px; padding: 10px; background: #fff; border-radius: var(--ms-radius); }
.ms-sn__img { flex: 0 0 37.5%; overflow: hidden; border-radius: 20px; }
.ms-sn__img img { display: block; width: 100%; }
.ms-sn__head { flex: 1; min-width: 0; }
.ms-sn__title { margin: 0 0 10px; font-size: 30px; font-weight: 700; line-height: 1.4; color: #000; }
.ms-sn__summary { margin-bottom: 10px; font-size: 16px; line-height: 1.5; }
.ms-sn__date { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; }
.ms-sn__date svg { width: 16px; height: 16px; color: var(--ms-main); }
.ms-sn__body { display: grid; grid-template-columns: 24% minmax(0, 1fr) 24%; gap: 20px; align-items: start; margin-bottom: 50px; padding: 10px; background: #fff; border-radius: var(--ms-radius); }
.ms-sn__toc-col { align-self: stretch; }
.ms-sn__toc { position: sticky; top: 30px; margin-bottom: 30px; padding: 10px; background: var(--ms-bg); border-radius: var(--ms-radius); }
.ms-sn__toc-title { margin-bottom: 15px; font-size: 24px; font-weight: 700; line-height: 1.4; color: var(--ms-main); }
.ms-sn__toc ul { margin: 0; padding-left: 20px; list-style: disc; }
.ms-sn__toc li { margin: 0 0 10px; font-size: 16px; line-height: 1.5; }
.ms-sn__toc a { color: #000; }
.ms-sn__toc a:hover { color: var(--ms-hover); }
.ms-sn__content { min-width: 0; }
.ms-sn__aside .sidebar-wrapper { margin: 0; }
@media (max-width: 991px) {
	.ms-sn__top { display: block; }
	.ms-sn__img { margin-bottom: 20px; }
	.ms-sn__body { display: block; }
	.ms-sn__toc { position: static; }
}
@media (max-width: 767px) {
	.ms-sn__title { font-size: 22px; }
}

/* §34 Pages: Giới thiệu (reference .page-about), Liên hệ (.layout-contact), FAQs (.page-faq) ---------------- */
/* Giới thiệu: timeline — vertical line (row::before), item underline (col-inner::before), navy dot (::after) */
.ms-about-page.section { margin-bottom: 100px; }
.ms-tl.row { position: relative; }
.ms-tl.row::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 3px;
	height: calc(100% + 50px);
	background: var(--ms-hover);
	transform: translate(-50%, 0);
}
.ms-tl .ms-tl__item > .col-inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	padding-bottom: 20px;
}
.ms-tl .ms-tl__item > .col-inner::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: calc(100% + 15px);
	height: 2px;
	background: var(--ms-hover);
}
.ms-tl .ms-tl__item > .col-inner::after {
	content: "";
	position: absolute;
	right: -23px;
	bottom: -6px;
	width: 15px;
	height: 15px;
	background: var(--ms-main);
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(13, 43, 107, .4);
	animation: ms-pulse-dot 1.25s linear infinite;
}
@keyframes ms-pulse-dot {
	0% { box-shadow: 0 0 0 0 rgba(13, 43, 107, .4); }
	100% { box-shadow: 0 0 0 10px rgba(13, 43, 107, 0); }
}
.ms-tl .ms-tl__item--left > .col-inner { padding-right: 30px; }
.ms-tl .ms-tl__item--left .ms-tl__img { order: 2; }
.ms-tl .ms-tl__item--right > .col-inner { padding-left: 30px; }
.ms-tl .ms-tl__item--right > .col-inner::before { left: -15px; }
.ms-tl .ms-tl__item--right > .col-inner::after { left: -23px; right: auto; }
.ms-tl .img.ms-tl__img { flex: 0 0 40%; width: 40% !important; }
.ms-tl .img.ms-tl__img, .ms-tl .ms-tl__img .img-inner { margin: 0 !important; line-height: 0; }
.ms-tl .ms-tl__img img { display: block; width: 100%; border-radius: 5px; }
.ms-tl .ms-tl__text { flex: 1 1 auto; min-width: 0; }
.ms-tl .ms-tl__text h2 { margin: 0 0 8px; font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--ms-main); }
.ms-tl .ms-tl__text p { margin: 0; font-size: 14px; line-height: 1.5; text-align: justify; }
@media (max-width: 991px) {
	.ms-tl .ms-tl__item > .col-inner { display: block; padding-top: 20px; }
	.ms-tl .img.ms-tl__img { width: auto !important; }
	.ms-tl .ms-tl__text { margin-top: 20px; }
}
@media (min-width: 768px) and (max-width: 991px) {
	.ms-tl.row { max-width: 720px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 767px) {
	.ms-tl.row::before { left: 10px; }
	.ms-tl .ms-tl__item > .col-inner::before { width: 100%; }
	.ms-tl .ms-tl__item > .col-inner::after { left: -11px !important; right: auto !important; }
	.ms-tl .ms-tl__item--left > .col-inner { padding-left: 30px; }
	.ms-tl .ms-tl__gap { display: none; }
}

/* Liên hệ: intro (name + text), navy box = form (col 8) | photo with the green corner (col 4) */
.ms-contact-page.section { margin-bottom: 40px; }
.ms-contact__about { margin-bottom: 20px; font-size: 16px; }
.ms-contact__about .ms-contact__name { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--ms-hover); }
.ms-contact__about p { margin: 0; }
.row.ms-contact__box {
	width: calc(100% - 30px);
	max-width: var(--ms-container);
	margin-left: auto;
	margin-right: auto;
	background: var(--ms-main);
	border-radius: var(--ms-radius);
	overflow: hidden;
}
.ms-contact__box > .ms-contact__form { padding: 20px 10px 20px 20px; }
.ms-contact__box > .ms-contact__img { padding: 0 0 0 20px; }
.ms-contact__head { margin-bottom: 30px; font-size: 16px; color: #fff; }
.ms-contact__head .ms-contact__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; color: #fff; }
.ms-contact__head p { margin: 0; color: #fff; }
.ms-contact__img > .col-inner { position: relative; z-index: 1; display: flex; align-items: flex-end; height: 100%; }
.ms-contact__img > .col-inner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--ms-hover);
	clip-path: polygon(100% 0, 100% 0, 100% 100%, 21% 100%);
}
.ms-contact__img .img { width: 100%; }
.ms-contact__img img { display: block; width: 100%; }
.ms-cf--contact .ms-cf__field { margin: 0; }
.ms-cf--contact input[type="text"], .ms-cf--contact input[type="email"], .ms-cf--contact input[type="tel"], .ms-cf--contact textarea {
	display: block;
	width: 100%;
	height: 50px;
	margin: 0 0 10px;
	padding: 5px 20px;
	font-size: 16px;
	color: #000;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 25px;
	outline: none;
}
.ms-cf--contact textarea { height: auto; min-height: 0; padding: 10px 20px; }
.ms-cf--contact input:hover, .ms-cf--contact input:focus, .ms-cf--contact textarea:hover, .ms-cf--contact textarea:focus { border-color: var(--ms-main); box-shadow: none; }
.ms-cf--contact .ms-cf__submit { padding-top: 5px; }
.ms-cf--contact .wpcf7-submit.btn-lienhe {
	min-height: 0;
	margin: 0;
	padding: 0 20px;
	font-family: var(--ms-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 40px;
	letter-spacing: 0;
	text-transform: none;
	color: #000;
	background: var(--ms-hover);
	border: 0;
	border-radius: 25px;
}
.ms-cf--contact .wpcf7-submit.btn-lienhe:hover { color: #000; opacity: .8; }
.ms-contact__form .wpcf7-response-output { color: #fff; }
.ms-contact__form .wpcf7-spinner { display: none; }
@media (max-width: 991px) {
	.ms-contact__box > .ms-contact__form { padding: 10px; }
	.ms-contact__box > .ms-contact__img { padding: 0; }
}
@media (min-width: 768px) and (max-width: 991px) {
	.row.ms-contact__intro { max-width: 720px; margin-left: auto; margin-right: auto; }
	.row.ms-contact__box { max-width: 690px; }
}
@media (max-width: 767px) {
	.ms-contact__about { font-size: 16px; }
}

/* FAQs: white box, group title 30px, grey question bars, navy when open */
.ms-faqs-page.section { margin-bottom: 20px; }
.ms-faqp > .col-inner { padding: 10px 10px 0; background: #fff; border-radius: var(--ms-radius); }
.ms-faqp__title h2 { margin: 0 0 10px; font-size: 30px; font-weight: 700; line-height: 1.2; color: #000; }
.ms-faqp .accordion.ms-faqp__acc { margin-bottom: 25px; }
.ms-faqp__acc .accordion-item { margin-bottom: 7px; border: 0; }
.ms-faqp__acc .accordion-title {
	display: block;
	padding: 12px 20px;
	font-family: var(--ms-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	color: #000;
	background: #e3e3e3;
	border: 0;
	border-radius: 5px;
}
.ms-faqp__acc .accordion-title.active { color: #fff; background: var(--ms-main); border-radius: 5px 5px 0 0; }
.ms-faqp__acc .accordion-title .toggle { display: none; }
.ms-faqp__acc .accordion-inner { padding: 15px 20px; font-size: 16px; line-height: 1.5; border: 1px solid #acacac; border-top: 0; border-radius: 0 0 5px 5px; }
.ms-faqp__acc .accordion-inner p { margin: 0; }
.ms-faqp__acc .accordion-inner ul, .ms-faqp__acc .accordion-inner ol { margin: 0 0 0 0; padding-left: 0; font-size: 14px; }
.ms-faqp__acc .accordion-inner ul { list-style: none; }
.ms-faqp__acc .accordion-inner ul li { margin: 0; }
.ms-faqp__acc .accordion-inner ol { padding-left: 25px; }
.ms-faqp__acc .accordion-inner ol li { margin: 0; }
/* reference payment answer at ≥1200: list margin + a trailing empty paragraph below the list */
@media (min-width: 1200px) { .ms-faqp__acc .accordion-inner > ol:last-child { margin-bottom: 48px; } }
@media (min-width: 768px) and (max-width: 991px) {
	.ms-faqs-page .row { max-width: 720px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 767px) {
	/* the brief's fonts run wider than the reference's Exo 2: one step down keeps the same wraps */
	.ms-faqp__title h2 { font-size: 27px; }
	.ms-faqp__acc .accordion-title { font-size: 17px; line-height: 1.5; }
	.ms-faqp__acc .accordion-inner { font-size: 15px; line-height: 1.6; }
}

/* §35 Pages: Hệ thống cửa hàng (reference .page-he-thong), Đặt lịch (.page-datlich) ---------------------------- */
/* Hệ thống cửa hàng: 4 navy stat boxes (row-fix: 20 px gaps, no bottom margin) */
.ms-stores-page.section { margin-bottom: 0; }
.ms-stores-finder { margin-bottom: 30px; }
.row.ms-ht__stats { max-width: 1400px; margin-bottom: 20px; }
.ms-ht__stats > .ms-ht__stat { padding: 0 10px; }
.ms-ht__stat > .col-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	padding: 10px;
	background: var(--ms-main);
	border-radius: 20px;
}
.ms-ht__stat .img.ms-ht__icon { width: auto !important; margin: 0 !important; line-height: 0; }
.ms-ht__stat .ms-ht__icon .img-inner { margin: 0 !important; }
.ms-ht__stat .ms-ht__icon img { display: block; width: auto; max-height: 80px; }
.ms-ht__txt p { margin: 0; font-size: 16px; line-height: 1.5; color: #fff; text-align: right; }
.ms-ht__txt b { display: block; font-family: var(--ms-font-head); font-size: 50px; font-weight: 700; line-height: 1.5; }
/* finder (col 4) | map (col 8), both 807 px high on desktop — printed by inc/stores.php below the content */
.ms-ht__main > .col { padding-bottom: 0; }
.ms-ht__right > .col-inner, .ms-stores__mapbox { height: 100%; }
.ms-stores__mapbox { min-height: 300px; overflow: hidden; border-radius: 20px; }
.ms-stores__mapbox iframe { display: block; width: 100%; height: 100%; min-height: 300px; margin: 0; border: 0; }
.ms-stores { color: #000; }
.ms-stores__filter {
	display: flex;
	flex-wrap: wrap;
	padding: 10px 5px;
	background: #fff;
	border: 1px solid var(--ms-main);
	border-radius: 20px;
}
.ms-stores__group { flex: 0 0 50%; max-width: 50%; margin: 0 0 10px; padding: 0 5px; font-size: 14px; font-weight: 400; }
.ms-stores__label { display: block; margin-bottom: 10px; line-height: 1.5; color: #000; }
.ms-stores select.ms-stores__city, .ms-stores input.ms-stores__name {
	width: 100%;
	height: 35px;
	margin: 0;
	font-family: var(--ms-font);
	font-size: 14px;
	border: 1px solid var(--ms-main);
	border-radius: 5px;
	box-shadow: none;
}
.ms-stores select.ms-stores__city {
	padding: 5px 28px 5px 12px;
	font-weight: 500;
	color: #fff;
	background: var(--ms-main) url(../img/ico-select.png) no-repeat right 10px center;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.ms-stores select.ms-stores__city option { color: #000; background: #fff; }
.ms-stores input.ms-stores__name { padding: 0 10px; color: #000; background: #fff; }
.ms-stores__list { height: 700px; margin-top: 10px; padding-right: 10px; overflow: hidden auto; }
.ms-stores__list::-webkit-scrollbar { width: 5px; background-color: var(--ms-main); }
.ms-stores__list::-webkit-scrollbar-thumb { background-color: var(--ms-main); border-radius: 5px; }
.ms-stores__list::-webkit-scrollbar-track { background-color: #f5f5f5; border-radius: 5px; }
.ms-store {
	margin-bottom: 10px;
	padding: 5px 10px;
	font-size: 14px;
	line-height: 24px;
	background: #fff;
	border: 1px solid var(--ms-main);
	border-radius: 20px;
}
.ms-store[hidden] { display: none; }
.ms-store__name { display: block; margin-bottom: 20px; font-weight: 700; color: var(--ms-main); }
.ms-store--empty .ms-store__name { margin-bottom: 5px; }
.ms-store p { margin: 0 0 10px; }
.ms-store__row { display: flex; align-items: center; margin-bottom: 10px; }
.ms-store__row b, .ms-store__map b { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; margin-right: 10px; padding: 5px; color: var(--ms-main); border: 1px solid var(--ms-main); border-radius: 50%; }
.ms-store__map b { flex-basis: auto; width: auto; height: auto; padding: 0; border: 0; }
.ms-store__row svg, .ms-store__map svg { width: 16px; height: 16px; }
.ms-store__row a { color: var(--ms-main); }
.ms-store .ms-store__map {
	display: inline-flex;
	align-items: center;
	min-height: 0;
	margin: 0 0 5px;
	padding: 5px 20px;
	font-family: var(--ms-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0;
	text-transform: none;
	color: #000;
	background: #e4ecff;
	border: 0;
	border-radius: 5px;
}
.ms-store .ms-store__map:hover { color: #fff; background: var(--ms-main); }
.ms-store .ms-store__map:hover b { color: #fff; }
@media (max-width: 1199px) {
	.ms-ht__stat .ms-ht__icon img { max-height: 60px; }
	.ms-ht__txt p { font-size: 14px; }
	.ms-ht__txt b { font-size: 40px; }
	.ms-stores__group { flex-basis: 100%; max-width: 100%; }
}
@media (max-width: 991px) {
	.ms-ht__main > .ms-ht__left { flex-basis: 100%; max-width: 100%; margin-bottom: 30px; }
	.ms-ht__main > .ms-ht__right { flex-basis: 100%; max-width: 100%; }
	.ms-stores__list { height: 220px; }
	.ms-stores__mapbox { height: 155px; min-height: 0; border-radius: 0; } /* reference: inline iframe 150 + its baseline gap */
	.ms-stores__mapbox iframe { height: 150px; min-height: 0; }
}
@media (min-width: 768px) and (max-width: 991px) {
	.ms-ht__stats > .ms-ht__stat { flex-basis: 50%; max-width: 50%; }
	.row.ms-ht__stats { max-width: 710px; }
	.row.ms-ht__main, .row.ms-dl { max-width: 720px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 767px) {
	.ms-ht__stats > .ms-ht__stat { flex-basis: 100%; max-width: 100%; padding: 0 15px; }
}

/* Đặt lịch: photo (radius 10) | white box with the booking form (labels bold, navy inputs radius 10) */
.ms-datlich-page.section { margin-bottom: 10px; }
.ms-dl > .col { padding-bottom: 0; }
.ms-dl__img .img { margin: 0 !important; line-height: 0; }
.ms-dl__img img { display: block; width: 100%; margin-bottom: 20px; border-radius: 10px; }
.ms-dl__form > .col-inner { padding: 10px; background: #fff; border-radius: 10px; }
.ms-dl__head { margin-bottom: 10px; font-size: 14px; line-height: 1.5; }
.ms-dl__head .ms-dl__title { margin: 0 0 8px; font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--ms-main); }
.ms-dl__head p { margin: 0; font-size: 14px; line-height: 1.5; }
.ms-dl__form .wpcf7 .ms-cf--icon .wpcf7-submit { margin-top: 0; font-size: 16px; }
.ms-dl__form .ms-cf--booking .ms-cf__group { margin-bottom: 10px; }
.ms-dl__form .ms-cf--booking label { margin-bottom: 8px; font-size: 16px; font-weight: 700; line-height: 1.5; }
.ms-dl__form .ms-cf--booking input[type="text"], .ms-dl__form .ms-cf--booking input[type="email"], .ms-dl__form .ms-cf--booking input[type="tel"], .ms-dl__form .ms-cf--booking input[type="date"] {
	height: 43px;
	padding: 10px;
	font-size: 14px;
	border: 1px solid var(--ms-main);
	border-radius: 10px;
}
.ms-dl__form .wpcf7-spinner { display: none; }
@media (min-width: 768px) and (max-width: 849px) {
	.ms-dl > .col { flex-basis: 50%; max-width: 50%; }
}

/* ===== §36 Policy pages (reference section.page > .pg_page: white box, h1 in the content) ===== */
.ms-pol-page.section { margin-bottom: 30px; min-height: 300px; } /* reference .page { min-height: 300px } */
.ms-pol > .col-inner { padding: 10px; background: #fff; border-radius: var(--ms-radius); }
.ms-pol, .ms-pol.col { padding-bottom: 0; }
.ms-pol__rte { color: #000; font-size: 14px; line-height: 1.5; }
.ms-pol__rte .ms-pol__title { margin: 0 0 8px; font-size: 40px; font-weight: 400; line-height: 1.2; color: #000; }
.ms-pol__rte p { margin: 0 0 1rem; font-size: 14px; line-height: 1.5; }
.ms-pol__rte p:last-child { margin-bottom: 0; }
.ms-pol__rte ul { margin: 0; padding: 0; list-style: none; }
.ms-pol__rte ul li { margin: 0; padding: 0; list-style: none; }
.ms-pol__rte strong { font-weight: 700; }
@media (min-width: 768px) and (max-width: 991px) {
	.ms-pol-page .row { max-width: 720px; margin-left: auto; margin-right: auto; }
}