/* Sudes Craft — reference look on Flatsome elements.
 * Sections: 0 base · 1 header · 2 services + footer · 3 shared section parts · 4 product card · 5 home · 6 inner pages · 7 shop. */

/* ---------- 0. Base ---------- */
:root {
	--mainColor: #c88948;
	--subColor: #ffab19;
	--textColor: #333333;
	--hover: #f57b23;
	--price: #d31100;
	--sd-w: 1259px;
}
html { background: #fff; }
body {
	font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--textColor);
	word-break: break-word;
}
h1, h2, h3, h4, h5, h6 { font-family: inherit; color: var(--textColor); line-height: 1.4; font-weight: 600; text-rendering: auto; }
a { color: var(--textColor); }
a:hover { color: var(--hover); }
.pacifico-regular, .sd-title h2, .sd-title .h2 { font-family: "Pacifico", cursive; font-weight: 400; line-height: 1.4; }
#wrapper, #main { background: #fff; }

/* Flatsome grid → the reference's Bootstrap grid (container 1259 + 20 px gutters). */
.container, .container-width { max-width: calc(var(--sd-w) + 30px); }
@media (max-width: 1199px) {
	.container { padding-left: 14px; padding-right: 14px; }
}
.sd.section { padding: 0; }
.sd .row { max-width: calc(var(--sd-w) + 20px); }
.sd .row:not(.row-collapse) > .col, .sd .row > .col { padding: 0 10px; }
.sd .row .row { margin-left: -10px; margin-right: -10px; }
.sd .col-inner { height: 100%; }
.sd p { margin-bottom: 15px; }
@media (max-width: 1199px) {
	.sd > .section-content > .row { padding-left: 4px; padding-right: 4px; }
}
@media (max-width: 767px) {
	.sd > .section-content > .row { padding-left: 7px; padding-right: 7px; }
	.sd .row > .col { padding: 0 7px; }
	.sd .row .row { margin-left: -7px; margin-right: -7px; }
}
.sd-hidden-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* Buttons of the reference (.btn-common). */
.button.sd-btn, .sd-btn.button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 40px; height: 40px; margin: 0; padding: 0 20px;
	background: var(--mainColor); border: 0; border-radius: 40px; color: #fff;
	font-size: 16px; font-weight: 600; line-height: 40px; letter-spacing: 0; text-transform: none;
	box-shadow: none;
}
.button.sd-btn:hover { background: var(--hover); color: #fff; box-shadow: none; }
.button.sd-btn span { line-height: inherit; }
.button.sd-btn::after {
	content: ""; width: 16px; height: 16px; flex: none;
	background: currentColor;
	-webkit-mask: url("../img/arrow-right.svg") center / 16px no-repeat; mask: url("../img/arrow-right.svg") center / 16px no-repeat;
}

/* ---------- 1. Header ---------- */
.header-wrapper { background: #f9f7f3; }
#top-bar.header-top { background: #f9e9d0; min-height: 32px; }
#top-bar .flex-row { height: 32px; }
#top-bar .nav > li { margin: 0; }
#top-bar .html.custom { font-size: 14px; color: var(--textColor); }
.sudes-promo { display: flex; align-items: center; }
.sudes-bell { display: flex; width: 20px; height: 20px; margin-right: 8px; }
.sudes-bell svg { width: 20px; height: 20px; fill: var(--mainColor); }
.sudes-bell .bell-body { animation: sudes-bell 2.2s linear infinite; transform-origin: 50% 0; }
@keyframes sudes-bell { 0%, 50%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-12deg); } 20%, 40% { transform: rotate(12deg); } }
.sudes-promo .promo-list { list-style: none; margin: 0; padding: 0; }
.sudes-promo .promo-item { display: none; margin: 0; }
.sudes-promo .promo-item.is-active { display: flex; align-items: center; animation: sudes-fade 1s; }
@keyframes sudes-fade { from { opacity: 0; } to { opacity: 1; } }
.sudes-promo .promo-item a { font-size: 14px; color: var(--textColor); line-height: 20px; padding: 0; }
.sudes-promo .promo-item a span { color: var(--mainColor); font-weight: 600; }
.sudes-top-right { display: flex; justify-content: flex-end; column-gap: 8px; }
.sudes-top-right a { display: flex; align-items: center; font-size: 14px; font-weight: 500; color: var(--textColor); padding: 0; }
.sudes-top-right a + a { border-left: 1px solid #ddd; padding-left: 8px; }
.sudes-top-right a svg { width: 18px; height: 18px; fill: var(--mainColor); margin-right: 8px; }
.sudes-top-right a:hover { color: var(--hover); }

#masthead.header-main { background: #f9f7f3; }
#masthead .header-inner { padding-top: 0; padding-bottom: 0; }
#masthead #logo { width: 324px !important; margin: 0; }
#masthead #logo img { max-height: 58px; width: 240px; height: auto; object-fit: contain; }
#masthead .flex-left.flex-grow { flex: 0 0 630px; margin: 0 0 0 0; }
#masthead .flex-left .header-nav { width: 100%; }
#masthead .header-search-form { width: 100%; margin: 0; }
#masthead .flex-right { margin-left: auto; }
.header-search-form .searchform { position: relative; }
.header-search-form .search-field {
	height: 40px; border: 1px solid #ddd; border-radius: 100px; background: #fff;
	padding: 0 55px 0 15px; box-shadow: none; font-size: 16px; color: var(--textColor);
}
.header-search-form .search-field::placeholder { color: #6c757d; opacity: 1; }
.header-search-form .ux-search-submit {
	position: absolute; right: 2px; top: 2px; width: 36px; height: 36px; min-height: 36px; margin: 0; padding: 0;
	border-radius: 50%; background: transparent !important; color: #777 !important; box-shadow: none;
}
.header-search-form .ux-search-submit:hover { background: var(--mainColor) !important; color: #fff !important; }
.header-search-form .ux-search-submit i { font-size: 18px; }
.header-search-form .searchform .flex-col:last-child { position: static; }

.header-main .nav-right { gap: 14px; }
.header-main .nav-right > li { margin: 0; }
.sudes-header-icons { display: flex; align-items: center; gap: 14px; }
.sudes-header-icons a {
	position: relative; display: flex; align-items: center; justify-content: center; column-gap: 6px;
	height: 40px; min-width: 40px; border-radius: 40px; background: #f9e9d0; color: #333; padding: 0;
}
.sudes-header-icons a svg { width: 20px; height: 20px; fill: #333; flex: none; }
.sudes-header-icons .sudes-iwish svg { position: relative; top: 2px; }
.sudes-header-icons .sudes-account { padding: 0 8px; }
.sudes-header-icons .item-title { font-size: 12px; }
.sudes-header-icons .count {
	position: absolute; top: -1px; right: -1px; min-width: 16px; height: 16px; border: 1px solid #ddd; border-radius: 50%;
	background: #fff; text-align: center; line-height: 14px; font-size: 10px; color: var(--mainColor); font-weight: 500;
}
.sudes-header-icons a:hover { opacity: .8; color: #333; }
.header-main .cart-item > a.header-cart-link,
.header-main .cart-item .header-cart-link {
	display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; column-gap: 6px;
	height: 40px; min-width: 40px; padding: 0 8px; border-radius: 40px; background: var(--mainColor); color: #fff;
}
.header-main .cart-item .header-cart-title { font-size: 12px; font-weight: 400; color: #fff; text-transform: none; letter-spacing: 0; }
.header-main .cart-item .header-cart-link i,
.header-main .cart-item .header-cart-link .cart-icon {
	position: static; font-size: 0; width: 20px; height: 20px; top: 0;
	background: url("../img/cart-white.svg") center / 20px no-repeat;
}
.header-main .cart-item .header-cart-link i::after,
.header-main .cart-item .header-cart-link [data-icon-label]::after {
	content: attr(data-icon-label); display: block !important;
	position: absolute; top: -1px; right: -1px; left: auto; width: 16px; height: 16px; min-width: 16px; padding: 0;
	border: 1px solid #ddd; border-radius: 50%; background: #fff; color: var(--mainColor);
	font: 500 10px/14px 'Plus Jakarta Sans', sans-serif; text-align: center; box-shadow: none; opacity: 1; transform: none;
}
.header-main .cart-item .header-cart-link { position: relative; }
.header-main .cart-item .header-cart-link i { position: static; }

/* Bottom bar: Danh mục · menu · promo. */
#wide-nav.header-bottom { background: #f9e9d0 !important; min-height: 45px; }
#wide-nav .flex-row { min-height: 45px; }
#wide-nav .flex-left { flex: none; }
#wide-nav .flex-right { flex: none; }
#wide-nav .flex-center { flex: 1; }
.header-vertical-menu__opener {
	width: auto !important; height: 33px !important; padding: 4px 8px; gap: 0;
	border: 2px solid var(--mainColor); border-radius: 8px; background: #fff !important; color: var(--textColor) !important;
	font-size: 14px; font-weight: 600; justify-content: center;
}
.header-vertical-menu__opener .header-vertical-menu__icon { width: 16px; height: 16px; margin-right: 4px; font-size: 0; background: url("../img/cate-dots.svg") center / 16px no-repeat; }
.header-vertical-menu__opener .header-vertical-menu__icon i { display: none; }
.header-vertical-menu__opener .header-vertical-menu__title { font-size: 14px; font-weight: 600; line-height: 21px; text-transform: none; padding: 0; flex: none; }
.header-vertical-menu__opener > .icon-angle-down { font-size: 0; width: 12px; height: 12px; margin: 2px 0 0 4px; background: url("../img/caret-down.svg") center / 12px no-repeat; }
.header-vertical-menu__fly-out {
	width: 315px !important; top: calc(100% + 6px) !important; border: 1px solid #ddd; border-radius: 4px; background: #fff;
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}
.header-vertical-menu__fly-out .ux-nav-vertical-menu > li > a {
	padding: 8px 15px 7px 28px; margin: 0 10px; color: #444; font-size: 16px; font-weight: 400; text-transform: none; position: relative; min-height: 0;
}
.header-vertical-menu__fly-out .ux-nav-vertical-menu > li > a .ux-menu-icon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; margin: 0; }
.header-vertical-menu__fly-out .ux-nav-vertical-menu > li + li { border-top: 1px solid rgba(0, 0, 0, .04); }
.header-vertical-menu__fly-out .ux-nav-vertical-menu > li > a:hover { color: var(--hover); font-weight: 500; background: none; }
.header-vertical-menu__fly-out .nav-dropdown { border: 1px solid #ddd; border-radius: 4px; box-shadow: 2px 3px 7px 0 rgba(0, 0, 0, .2); padding: 10px; min-width: 630px; }
.header-vertical-menu__fly-out .nav-dropdown .nav-dropdown-col > a { font-weight: 600; color: #333; text-transform: none; font-size: 16px; padding-left: 16px; position: relative; border: 0; }
.header-vertical-menu__fly-out .nav-dropdown .nav-dropdown-col > a::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; border-radius: 10px; background: var(--mainColor); transform: translateY(-50%); }
.header-vertical-menu__fly-out .nav-column li a { font-size: 14px; color: #6e6e6e; padding: 2px 0 2px 16px; position: relative; text-transform: none; }
.header-vertical-menu__fly-out .nav-column li a::before { content: "»"; position: absolute; left: 0; }
.header-vertical-menu__fly-out .nav-column li a:hover { color: var(--hover); }

.header-bottom-nav.nav-center { column-gap: 32px; flex-wrap: nowrap; }
.header-bottom-nav.nav-center > li { margin: 0; position: relative; }
.header-bottom-nav.nav-center > li > a {
	padding: 10px 0; font-size: 16px; font-weight: 600; color: #333; text-transform: none; letter-spacing: 0; line-height: 25px;
}
.header-bottom-nav.nav-center > li > a::before {
	content: ""; position: absolute; top: 50%; right: -19px; width: 6px; height: 6px; border-radius: 10px; background: var(--mainColor); transform: translateY(-50%);
}
.header-bottom-nav.nav-center > li:last-child > a::before { display: none; }
.header-bottom-nav.nav-center > li.active > a, .header-bottom-nav.nav-center > li:hover > a { color: var(--hover); }
.header-bottom-nav.nav-center > li > a .icon-angle-down { font-size: 0; width: 12px; height: 12px; margin-left: 2px; background: url("../img/chevron-down.svg") center / 12px no-repeat; opacity: 1; }
.header-bottom-nav .nav-dropdown {
	width: 250px; min-width: 250px; padding: 0; border: 1px solid #ddd; border-radius: 4px; background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .15); text-align: left;
}
.header-bottom-nav .nav-dropdown > li { display: block !important; width: auto !important; min-width: 0 !important; padding: 0 10px; border-bottom: 1px solid #ebebeb; position: relative; }
.header-bottom-nav .nav-dropdown li a {
	display: block; padding: 7px 20px 7px 10px; margin: 0; line-height: 25px; font-size: 16px; font-weight: 400; color: #222;
	text-transform: none; border: 0; white-space: normal;
}
.header-bottom-nav .nav-dropdown > li.nav-dropdown-col > a { font-weight: 400; text-transform: none; border: 0; }
.header-bottom-nav .nav-dropdown li:hover > a { color: var(--hover); background: none; }
.header-bottom-nav .nav-dropdown > li.nav-dropdown-col > a::after {
	content: ""; position: absolute; right: 6px; top: 20px; width: 8px; height: 9px;
	background: url("../img/chevron-right.svg") center / 8px no-repeat;
}
.header-bottom-nav .nav-dropdown .nav-column {
	display: none; position: absolute; left: 100%; top: -1px; width: 250px; padding: 0; margin: 0;
	border: 1px solid #ddd; border-radius: 4px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.header-bottom-nav .nav-dropdown li:hover > .nav-column { display: block; }
.header-bottom-nav .nav-dropdown .nav-column > li { padding: 0 10px; border-bottom: 1px solid #ebebeb; margin: 0; }
#wide-nav .html_nav_position_text_top { font-size: 16px; }
#wide-nav .sudes-promo-btn, .sudes-promo-btn {
	position: relative; display: inline-block !important; height: 34px; line-height: 30px !important; padding: 0 12px 0 40px !important;
	border: 2px solid var(--mainColor); border-radius: 8px; background: #fff; font-size: 16px !important; font-weight: 600; color: var(--textColor);
	white-space: nowrap; text-transform: none; letter-spacing: 0;
}
.sudes-promo-btn img { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; }
.sudes-promo-btn span { color: var(--subColor); }
#wide-nav .html_nav_position_text_top { margin: 0; }

@media (max-width: 849px) {
	#masthead.header-main { background: #f9f7f3; }
	#masthead #logo { width: auto !important; }
	#masthead #logo img { width: auto; max-height: 52px; }
	.mobile-nav .nav-icon > a { width: 40px; height: 40px; border-radius: 40px; background: #f9e9d0; justify-content: center; color: #333; padding: 0; }
	.mobile-nav .nav-icon i { font-size: 20px; }
	.header-main .mobile-nav .cart-item .header-cart-link { padding: 0; width: 40px; }
	.header-main .mobile-nav .cart-item .header-cart-title { display: none; }
	#wide-nav.header-bottom { background: #f9f7f3 !important; min-height: 52px; }
	#wide-nav .header-search-form { width: 100%; }
	#top-bar .html_topbar_left { margin: 0 auto; }
}

/* ---------- 2. Services strip + footer ---------- */
.section_services.sd { padding: 0; margin: 20px 0 -16px; position: relative; z-index: 2; }
.section_services .promo-box {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 8px; padding: 14px;
	background: #f7f4ef; box-shadow: rgba(0, 0, 0, .2) 0 1px 2px 0;
}
.section_services .promo-box > .col { flex: none; max-width: none; width: auto; padding: 0 7px !important; border-right: 1px solid #e6e6e6; }
.section_services .promo-box > .col:last-child { border-right: 0; }
.section_services .icon-box { display: flex; align-items: flex-start; }
.section_services .icon-box-img { width: 40px !important; height: 40px; margin: 0 16px 0 0; flex: none; }
.section_services .icon-box-img img { width: 40px; height: 40px; object-fit: contain; }
.section_services .icon-box-text h5 { color: var(--mainColor); font-size: 16px; font-weight: 700; margin: 0; line-height: normal; text-transform: none; letter-spacing: 0; }
.section_services .icon-box-text p { font-size: 14px; line-height: normal; margin: 6px 0 0; }
@media (max-width: 991px) {
	.section_services .promo-box { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 20px 0; row-gap: 20px; }
	.section_services .promo-box > .col { padding: 0 14px !important; border: 0; }
}
@media (max-width: 767px) {
	.section_services.sd { margin: 0; }
	.section_services .promo-box { grid-template-columns: 1fr; margin: 0 -14px; box-shadow: none; border-radius: 0; border: 1px solid #ddd; }
}

.footer-sudes.section { padding: 0; background: #2c322c center / cover no-repeat; color: #fff; }
.footer-sudes .section-bg { background-size: cover; }
.footer-sudes .row.footer-grid { max-width: calc(var(--sd-w) + 20px); display: grid; grid-template-columns: repeat(3, minmax(100px, max-content)); }
.footer-sudes .footer-grid > .col { flex: none; max-width: none; width: auto; padding: 60px 20px !important; }
.footer-sudes .footer-grid > .col + .col { border-left: 1px solid rgba(202, 202, 202, .2); }
.footer-sudes .footer-grid > .col:first-child { padding-left: 10px !important; }
.footer-sudes .logo-footer { margin-bottom: 15px; width: 220px; }
.footer-sudes .logo-footer img { width: 220px; height: auto; }
.footer-sudes .des_foo { color: rgba(255, 255, 255, .8); margin-bottom: 16px; font-weight: 400; }
.footer-sudes .content-contact { margin-bottom: 8px; font-weight: 500; padding-left: 24px; position: relative; color: #fff; }
.footer-sudes .content-contact::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; background: center / 18px no-repeat; }
.footer-sudes .ic-addr::before { background-image: url("../img/geo-fill.svg"); }
.footer-sudes .ic-phone::before { background-image: url("../img/phone-fill.svg"); }
.footer-sudes .ic-mail::before { background-image: url("../img/envelope-fill.svg"); }
.footer-sudes .logo-footer.img { width: 220px !important; }
.footer-sudes .content-contact a { color: var(--subColor); }
.footer-sudes .content-contact a:hover { color: var(--hover); }
.footer-sudes .social-footer { margin-top: 20px; display: flex; gap: 10px; }
.footer-sudes .social-footer a { display: inline-block; width: 35px; height: 35px; margin-right: 5px; }
.footer-sudes .social-footer img { width: 35px; height: 35px; }
.footer-sudes .title-menu { font-size: 18px; letter-spacing: .5px; margin: 0 0 20px; color: #fff; text-transform: uppercase; font-weight: 700; line-height: normal; }
.footer-sudes .ux-menu.list-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 16px; }
.footer-sudes .list-menu .ux-menu-link { margin: 0; }
.footer-sudes .list-menu .ux-menu-link__link { padding: 0; min-height: 0; color: #f1f1f1; line-height: normal; font-size: 16px; border: 0; }
.footer-sudes .list-menu .ux-menu-link__link:hover { color: var(--hover); }
.footer-sudes .list-menu .ux-menu-link__text { line-height: normal; }
.footer-sudes .block-col4 { display: grid; row-gap: 32px; }
.footer-sudes .desc { color: rgba(255, 255, 255, .8); margin-bottom: 16px; }
.footer-sudes .newsletter-form { position: relative; max-width: 550px; }
.footer-sudes .newsletter-form .wpcf7-form-control-wrap { display: block; }
.footer-sudes .newsletter-form input[type=email] {
	height: 52px; width: 100%; margin: 0; padding: 0 64px 0 20px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 60px;
	font-size: 16px; background: #fff; color: #333; box-shadow: none;
}
.footer-sudes .newsletter-form .sd-submit, .footer-sudes .newsletter-form input[type=submit] {
	position: absolute; right: 0; top: 0; width: 52px; height: 52px; min-height: 52px; margin: 0; padding: 0; border-radius: 50%;
	background: var(--mainColor) url("../img/arrow-right-white.svg") center / 20px no-repeat; color: transparent; font-size: 0; border: 0;
}
.footer-sudes .newsletter-form .wpcf7-spinner { position: absolute; right: 60px; top: 14px; margin: 0; }
.footer-sudes .newsletter-form p { margin: 0; }
.footer-sudes .wpcf7-response-output { color: #fff; font-size: 14px; margin: 8px 0 0 !important; }
.footer-sudes .payment-footer { display: flex; flex-wrap: wrap; gap: 8px 9px; max-width: 330px; }
.footer-sudes .payment-footer img { width: 74px; height: 34px; border-radius: 4px; }
.footer-sudes .zalo-app { display: flex; align-items: center; gap: 10px; }
.footer-sudes .zalo-app img { width: 72px; height: 72px; border-radius: 4px; }
.footer-sudes .zalo-app strong { display: block; color: var(--subColor); font-size: 18px; font-weight: 600; }
.footer-sudes .zalo-app span { color: #fff; }
.footer-sudes .copyright { border-top: 1px solid rgba(202, 202, 202, .2); font-size: 14px; }
.footer-sudes .copyright-row { display: grid; grid-template-columns: repeat(3, auto); column-gap: 20px; row-gap: 12px; align-items: center; padding: 24px 10px; max-width: calc(var(--sd-w) + 20px); margin: 0 auto; }
.footer-sudes .copyright-row b { font-weight: 700; }
.footer-sudes .menu-bottom-footer { display: flex; justify-content: center; flex-wrap: wrap; column-gap: 16px; row-gap: 8px; }
.footer-sudes .menu-bottom-footer a { color: #fff; }
.footer-sudes .menu-bottom-footer a:hover { color: var(--hover); }
.footer-sudes .certifi-footer { display: flex; justify-content: flex-end; gap: 5px; }
.footer-sudes .certifi-footer img { height: 50px; width: auto; }
.absolute-footer { display: none; }
@media (max-width: 991px) {
	.footer-sudes .row.footer-grid { grid-template-columns: 1fr; padding: 24px 4px; }
	.footer-sudes .footer-grid > .col { padding: 24px 10px !important; border: 0 !important; }
	.footer-sudes .copyright-row { grid-template-columns: repeat(2, auto); padding: 16px 14px; }
	.footer-sudes .copyright-row .wsp { order: 3; grid-column: span 2; text-align: center; }
}
@media (max-width: 767px) {
	.footer-sudes .row.footer-grid { padding: 24px 7px; }
	.footer-sudes .footer-grid > .col { padding: 24px 7px !important; }
	.footer-sudes .ux-menu.list-menu { row-gap: 12px; }
	.footer-sudes .copyright-row { grid-template-columns: 1fr; }
	.footer-sudes .copyright-row .wsp { grid-column: span 1; }
}

/* ---------- 3. Shared section parts ---------- */
.sd-title { text-align: center; margin-bottom: 24px; display: flex; flex-direction: column; justify-content: center; }
.sd-title .sub-title {
	display: block; width: auto; max-width: 280px; margin: 0 auto 4px; padding-left: 14px; position: relative;
	font-size: 16px; font-weight: 600; text-transform: uppercase; color: var(--mainColor);
}
.sd-title .sub-title::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; border-radius: 20px; background: var(--mainColor); transform: translateY(-50%); }
.sd-title h2 { display: inline-block; font-size: 43px; margin: 0; color: var(--textColor); }
.sd-title h2 a { color: inherit; }
.sd-title .desc { font-size: 16px; margin: 16px auto 0; max-width: 760px; color: #555; }
.sd-title.a-left { text-align: left; }
.sd-title.a-left .sub-title { margin: 0 0 4px; }
.sd-title.a-left .desc { margin: 16px 0 0; }
@media (max-width: 767px) {
	.sd-title .sub-title { font-size: 14px; }
	.sd-title h2 { font-size: 28px; }
	.sd-title .desc { font-size: 14px; }
}
.sd-more { text-align: center; }
.sd-more .button { margin: 0; }

/* Page title band of inner pages (.breadcrumb_background). */
.breadcrumb_background.sd { position: relative; }
.breadcrumb_background .section-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 60%); }
.breadcrumb_background .sd-crumb { padding: 172px 0 32px; }
.breadcrumb_background .title_full { font-size: 40px; font-weight: 700; color: #fff; margin: 0 0 4px; line-height: 1.4; }
.breadcrumb_background .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; font-size: 16px; color: #ddd; }
.breadcrumb_background .breadcrumb a { color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb_background .breadcrumb a svg { width: 16px; height: 16px; fill: #fff; }
.breadcrumb_background .breadcrumb .mr_lr { color: #fff; }
@media (max-width: 767px) {
	.breadcrumb_background .sd-crumb { padding: 120px 0 24px; }
	.breadcrumb_background .title_full { font-size: 28px; }
}

/* ---------- 4. Product card (Flatsome .product-small → .item_product_main) ---------- */
.sd-products .product-small.col { padding-bottom: 20px !important; }
.sd-products .product-small.col > .col-inner, .products .product-small.col > .col-inner { height: 100%; }
.product-small.box {
	display: flex; flex-direction: column; height: 100%; padding: 6px; border-radius: 12px; background: #f7f4ef;
	box-shadow: rgba(0, 0, 0, .2) 0 1px 2px 0; overflow: hidden;
}
.product-small .box-image { width: 100%; aspect-ratio: 1; border-radius: 8px; background: #fff; overflow: hidden; position: relative; }
.product-small .box-image > div, .product-small .box-image a { display: block; height: 100%; }
.product-small .box-image img { position: absolute; inset: 0; width: auto !important; height: auto !important; max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; transition: transform .3s; }
.product-small.box:hover .box-image img { transform: scale(1.03); }
.product-small .box-text { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px 0; text-align: center; background: #f7f4ef; }
.product-small .box-text .title-wrapper { flex: 1; }
.product-small .name.product-title { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--textColor); }
.product-small .name.product-title a { color: inherit; }
.product-small .name.product-title a:hover { color: var(--hover); }
.product-small .price-wrapper { margin-top: 8px; }
.product-small .price-wrapper .price { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 0; line-height: normal; }
.product-small .price del { color: #9aa5b3; font-size: 14px; opacity: 1; order: 1; }
.product-small .price del .amount { color: #9aa5b3; font-weight: 400; }
.product-small .price ins { order: 2; text-decoration: none; }
.product-small .price .amount, .product-small .price ins .amount { color: var(--price); font-weight: 700; font-size: 18px; }
.product-small .price del .amount { font-size: 14px; }
.badge-container { margin: 8px 0 0 8px; }
.badge-container .callout.badge { height: auto; width: auto; }
.badge-container .badge-inner.on-sale {
	width: 63px; height: 24px; padding: 0 8px 0 0; border-radius: 0; background: url("../img/tag-sale.png") center / contain no-repeat !important;
	display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; line-height: 24px;
}
.badge-container .badge-inner.on-sale .onsale { font-size: 12px; font-weight: 700; }
@media (min-width: 1200px) {
	.product-small .name.product-title { font-size: 16px; }
}
.sd-products.row { margin-left: -10px; margin-right: -10px; }
.sd-products .col { padding: 0 10px 20px !important; }
@media (max-width: 767px) {
	.sd-products.row { margin-left: -7px; margin-right: -7px; }
	.sd-products .col { padding: 0 7px 14px !important; }
}

/* Flickity chrome (arrows/dots) like the reference swiper. */
.sd .flickity-page-dots { position: static; margin-top: 16px; display: flex; justify-content: center; gap: 4px; }
.sd .flickity-page-dots .dot { width: 8px; height: 8px; margin: 0; border: 1px solid var(--mainColor); border-radius: 10px; background: transparent; opacity: 1; transition: all .3s; }
.sd .flickity-page-dots .dot.is-selected { width: 28px; background: var(--mainColor); }
.sd .flickity-prev-next-button { width: 40px; height: 40px; border-radius: 50%; background: var(--mainColor); color: #fff; opacity: 1; }
.sd .flickity-prev-next-button svg { padding: 10px; }
.sd .flickity-prev-next-button:disabled { opacity: .35; }

/* ---------- 5. Home ---------- */
.section-index.sd { padding: 45px 0 !important; margin: 0; }
@media (max-width: 767px) { .section-index.sd { padding: 30px 0 !important; } }
.section_slider.sd { margin: 14px 0 0; overflow: hidden; }
.sd-hero { max-width: var(--sd-w); margin: 0 auto; }
.sd-hero .flickity-viewport { overflow: visible; }
.sd-hero .flickity-slider > .banner { width: 100%; margin-right: 24px; border-radius: 12px; overflow: hidden; }
.sd-hero.slider-wrapper, .sd-hero .slider { overflow: visible; }
.sd-hero .banner .bg { border-radius: 12px; }
.sd-hero .container-effect.text-box { left: 50% !important; top: auto !important; bottom: 100px; width: 720px !important; max-width: calc(100% - 28px); transform: translateX(-50%) !important; padding: 14px; }
.sd-hero .container-effect .text-box-content, .sd-hero .container-effect .text-inner { text-align: center; }
.sd-hero .box-text { display: grid; row-gap: 16px; margin-bottom: 20px; }
.sd-hero .title-1 { font-size: 50px; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .25); line-height: 1.4; }
.sd-hero .title-2 { font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, .9); line-height: 1.5; }
.sd-hero .sd-btn { box-shadow: #333 0 15px 20px -15px; }
.sd-hero .flickity-page-dots { position: absolute; bottom: 20px; margin: 0; }
.sd-hero .flickity-page-dots .dot { border-color: #fff; }
.sd-hero .flickity-page-dots .dot.is-selected { background: #fff; }
.sd-hero .flickity-prev-next-button { opacity: 0; background: transparent; color: #fff; }
.sd-hero:hover .flickity-prev-next-button { opacity: 1; }
@media (max-width: 991px) {
	.sd-hero .container-effect.text-box { bottom: 65px; width: 660px !important; }
	.sd-hero .title-1 { font-size: 36px; }
	.sd-hero .title-2 { font-size: 16px; }
}
@media (max-width: 767px) {
	.section_slider.sd { margin: 0 0 30px; }
	.sd-hero { padding: 0 14px; }
	.sd-hero .banner { padding-top: 106.35% !important; }
	.sd-hero .container-effect.text-box { bottom: 50px; }
	.sd-hero .title-1 { font-size: 28px; }
}

/* Category tiles (round photos, short labels). */
.sd-cats .product-category .col-inner { padding: 0; }
.sd-cats .box-category { text-align: center; }
.sd-cats .box-image { background: #f7f4ef; padding: 20px; border: 1px solid #eee; border-radius: 100px !important; overflow: hidden; }
.sd-cats .box-image > div { padding-top: 100% !important; position: relative; border-radius: 0; }
.sd-cats .box-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.sd-cats .box-category:hover .box-image { border-color: var(--subColor); }
.sd-cats .box-category:hover .box-image img { transform: scale(1.05); }
.sd-cats .box-text { padding: 8px 0 0; background: none !important; }
.sd-cats .box-text .header-title { font-size: 18px; font-weight: 600; color: var(--textColor); text-transform: none; letter-spacing: 0; margin: 0 0 4px; line-height: normal; }
.sd-cats .sd-count { font-size: 14px; color: #616161; margin: 0; line-height: 27px; height: 27px; }
.sd-cats .box-category.hover-dark:hover .box-text, .sd-cats .box-category.hover-dark:hover .box-text * { color: var(--textColor); }
.sd-cats .row { margin-left: -10px; margin-right: -10px; }
.sd-cats .product-category.col { padding: 0 10px !important; }
@media (max-width: 767px) {
	.sd-cats .box-image { padding: 10px; }
	.sd-cats .box-text .header-title { font-size: 14px; }
}

/* Flash sale box. */
.section_flash_sale .bg-flash-sale > .col-inner { padding: 0 20px 32px; border-radius: 12px; background: linear-gradient(0deg, #f7c875 0%, #fff 100%); }
.section_flash_sale .sd-title { padding-top: 0; }
.sudes-flash-tabs { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; }
.sudes-flash-tabs .flash-tabs { display: inline-flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sudes-flash-tabs .flash-tab { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 4px 16px; font-weight: 500; background: #fafafa; border: 2px solid #ddd; border-radius: 8px; color: #333; line-height: 1.5; }
.sudes-flash-tabs .flash-tab b { font-weight: 700; }
.sudes-flash-tabs .flash-tab span { font-size: 14px; color: #666; margin-top: 4px; }
.sudes-flash-tabs .flash-tab.current { border-color: var(--mainColor); }
.sudes-flash-tabs .flash-tab.current b { color: var(--mainColor); }
.sudes-flash-tabs .count-down { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 40px; background: #ffd07f; }
.sudes-flash-tabs .count-icon { width: 20px; height: 20px; margin-right: 6px; background: url("../img/clock.svg") center / 20px no-repeat; }
.sudes-flash-tabs .title-count-down { font-weight: 600; margin-right: 8px; color: #333; }
.sudes-flash-tabs .block-timer { display: inline-block; min-width: 32px; padding: 2px; margin-right: 8px; border-radius: 4px; background: #fff; text-align: center; font-weight: 600; }
.sudes-flash-tabs .block-timer:last-child { margin-right: 0; }
.section_flash_sale .sd-more-btn { display: flex; width: max-content; margin: 12px auto 0; }
@media (max-width: 991px) {
	.sudes-flash-tabs { flex-direction: column; align-items: center; gap: 12px; }
}
@media (max-width: 767px) {
	.section_flash_sale .bg-flash-sale > .col-inner { padding: 0 14px 24px; }
	.sudes-flash-tabs .flash-tabs { gap: 8px; }
	.sudes-flash-tabs .flash-tab { padding: 4px 6px; font-size: 13px; white-space: nowrap; }
	.sudes-flash-tabs .flash-tab span { font-size: 12px; margin-top: 0; }
}
.sudes-flash-tabs .flash-tab { cursor: pointer; }
.sidebar-menu-tabs__tab-link { cursor: pointer; }

/* Coupons. */
.section_coupons .coupon-row > .col { padding: 0 14px 0 4px !important; }
.section_coupons .coupon-col > .col-inner { position: relative; display: flex; align-items: center; padding: 8px; aspect-ratio: 300 / 108; }
.section_coupons .coupon-col > .col-inner::before {
	content: ""; position: absolute; inset: 0; background: #f7f4ef; border-radius: 12px;
	-webkit-mask: url("../img/ticket5.svg") no-repeat 0 0 / cover; mask: url("../img/ticket5.svg") no-repeat 0 0 / cover;
}
.section_coupons .coupon-img { width: 33.333% !important; height: 70px; flex: none; position: relative; margin: 0 !important; }
.section_coupons .coupon-img .img-inner, .section_coupons .coupon-img img { height: 70px; object-fit: contain; }
.section_coupons .coupon-info { position: relative; flex: 1; align-self: stretch; padding-left: 12px; display: flex; flex-direction: column; justify-content: space-between; }
.section_coupons .content-top { font-size: 16px; font-weight: 700; margin-bottom: 6px; line-height: 1.5; padding-right: 22px; }
.section_coupons .content-top span { display: block; font-size: 12px; color: #444; font-weight: 500; }
.section_coupons .content-top::after { content: ""; position: absolute; right: 0; top: 0; width: 20px; height: 20px; background: url("../img/info.svg") center / 20px no-repeat; }
.section_coupons .content-bottom span { font-size: 10px; font-weight: 500; color: #666; }
.section_coupons .copy-coupon.button {
	position: absolute; right: 8px; bottom: 8px; margin: 0; min-height: 0; height: 20px; line-height: 20px; padding: 0 16px;
	font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; background: var(--mainColor); color: #fff; border-radius: 4px;
}
.section_coupons .copy-coupon.button.copied { background: var(--hover); }

/* Product tabs (pills with icons). */
.product-tabs .nav.nav-pills { justify-content: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.product-tabs .nav-pills > li { margin: 0; }
.product-tabs .nav-pills > li > a {
	display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: 4px; background: #f1f1f1;
	font-size: 16px; font-weight: 500; color: #333; text-transform: none; letter-spacing: 0;
}
.product-tabs .nav-pills > li > a::before { content: ""; width: 28px; height: 28px; background: center / contain no-repeat; }
.product-tabs .nav-pills > li.active > a { background: var(--hover); color: #fff; }
.product-tabs .nav-pills > li.active > a::before { filter: brightness(0) invert(1); }
.product-tabs .tab-panels { padding: 0; border: 0; }

/* Collection bento grid. */
.gallery-grid .gallery-col > .col-inner { padding-bottom: 20px; }
.gallery-grid .gallery-item { border-radius: 8px; overflow: hidden; }
.gallery-grid .gallery-text.text-box { left: 0 !important; bottom: 0 !important; top: auto !important; transform: none !important; width: 100% !important; padding: 20px; }
.gallery-grid .gallery-caption h3 { font-size: 20px; font-weight: 700; color: #fff; margin: 0; }
.gallery-grid .gallery-caption .price { font-size: 14px; color: rgba(255, 255, 255, .8); }
.gallery-grid .banner-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 40%); }
@media (min-width: 850px) {
	.gallery-grid { display: grid !important; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; }
	.gallery-grid > .col { max-width: none !important; flex: none !important; width: auto !important; }
	.gallery-grid .gallery-col-1 { grid-column: 1 / 3; }
	.gallery-grid .gallery-col-6 { grid-column: 3 / 5; }
	.gallery-grid .gallery-item.banner { padding-top: 0 !important; height: 389px; }
	.gallery-grid { column-gap: 0; }
}
.sd-more-row .col-inner { text-align: center; }
.sd-more-btn.button { margin: 0 auto; }

/* Product sliders beside a photo. */
.section_product .col-banner .img, .section_product .col-banner .img-inner { height: 100%; }
.section_product .col-banner img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.section_product .sd-title { margin-bottom: 24px; padding-right: 120px; }
.section_product .sd-products .flickity-prev-next-button { top: -64px; transform: none; }
.section_product .sd-products .flickity-prev-next-button.previous { left: auto; right: 50px; }
.section_product .sd-products .flickity-prev-next-button.next { right: 0; }
.section_product .sd-more-row { margin-top: 12px; }
@media (max-width: 767px) {
	.section_product .sd-title { padding-right: 0; text-align: center; }
	.section_product .sd-title .sub-title { margin: 0 auto 4px; }
	.section_product .col-banner { display: none; }
}

/* About. */
.section_about.sd { padding: 80px 0 !important; overflow: hidden; }
.about-row { align-items: flex-start; }
.about-row > .about-images { flex: 0 0 609px; max-width: 609px; }
.about-row > .about-content { flex: 1; max-width: none; padding-left: 30px !important; }
.about-big img { width: 600px; height: 600px; object-fit: cover; border-radius: 8px; display: block; }
.about-content .about-text p { color: #555; margin-bottom: 24px; }
.about-smalls { margin: 44px 0 0 -167px !important; position: relative; z-index: 1; }
.about-smalls > .col { padding: 0 10px !important; }
.about-smalls > .col:first-child .img { outline: 8px solid #fff; border-radius: 8px; }
.about-smalls img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
@media (max-width: 991px) {
	.section_about.sd { padding: 45px 0 !important; }
	.about-row > .about-images, .about-row > .about-content { flex: 0 0 100%; max-width: 100%; padding-left: 10px !important; }
	.about-big img { width: 100%; height: auto; aspect-ratio: 1; }
	.about-smalls { margin: 24px 0 0 !important; }
}

/* Feedback + brands. */
.feedback-banner img { width: 100%; height: 474px; border-radius: 8px; object-fit: cover; display: block; }
.section_feedback .feedback-content > .col-inner { background: #fff; border-radius: 16px 0 0 16px; margin-left: -60px; padding: 30px 0 30px 30px; }
.feedback-slider .testimonial-box { text-align: left; }
.feedback-slider .testimonial-text { font-size: 16px; font-style: normal; color: #555; }
.feedback-slider .testimonial-name { font-weight: 700; text-transform: none; font-size: 18px; color: var(--textColor); }
.feedback-slider .testimonial-company { color: var(--mainColor); }
.brand-row { margin-top: 32px; }
.brand-slider .flickity-slider > .img { width: calc((100% - 120px) / 7) !important; margin-right: 20px; }
.brand-slider .img-inner { padding: 0 16px; background: #fff; }
.brand-slider .flickity-prev-next-button { display: none; }
@media (max-width: 767px) {
	.brand-slider .flickity-slider > .img { width: calc((100% - 28px) / 3) !important; margin-right: 14px; }
}

/* TikTok. */
.section_tiktok_embed.sd { padding: 60px 0 !important; overflow: hidden; }
.section_tiktok_embed .section-bg { background: radial-gradient(circle at 0 0, rgba(0, 128, 128, .55), rgba(23, 23, 23, 0) 45%), radial-gradient(circle at 100% 100%, rgba(160, 40, 60, .65), rgba(23, 23, 23, 0) 45%), #171717 !important; }
@media (max-width: 991px) { .section_tiktok_embed.sd { padding: 45px 0 !important; } }
.section_tiktok_embed .tiktok-title h2 { color: #fff; }
.section_tiktok_embed .heading-desc { margin-top: 16px; color: rgba(255, 255, 255, .8); text-align: justify; }
.section_tiktok_embed .sd-btn { margin-top: 20px; }
.section_tiktok_embed .tiktok-card { background: #808080; border-radius: 0; padding: 24px; min-height: 150px; color: #fff; }
.section_tiktok_embed .tiktok-card p { color: #fff; margin: 0; }
.section_tiktok_embed .tiktok-tag { font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 8px; }

/* Blog cards. */
.sd-blog .post-item .box { background: #fff; }
.sd-blog .box-image { border-radius: 8px; overflow: hidden; }
.sd-blog .post-title { font-size: 18px; font-weight: 600; line-height: 1.4; }
.product-tabs .nav-pills > li:nth-child(1) > a::before { background-image: url("/wp-content/uploads/2026/10/section_product_tab_icon_1.png"); }
.product-tabs .nav-pills > li:nth-child(2) > a::before { background-image: url("/wp-content/uploads/2026/10/section_product_tab_icon_2.png"); }
.product-tabs .nav-pills > li:nth-child(3) > a::before { background-image: url("/wp-content/uploads/2026/10/section_product_tab_icon_3.png"); }
.product-tabs .nav-pills > li:nth-child(4) > a::before { background-image: url("/wp-content/uploads/2026/10/section_product_tab_icon_4.png"); }
.product-tabs .nav-pills > li:nth-child(5) > a::before { background-image: url("/wp-content/uploads/2026/10/section_product_tab_icon_5.png"); }

/* ---------- 6. Inner pages ---------- */
.breadcrumb_background.sd { margin-bottom: 0; }
.breadcrumb_background .breadcrumb { list-style: none; }
.breadcrumb_background .breadcrumb li { margin: 0; list-style: none; }
.breadcrumb_background .breadcrumb .home a::before { content: ""; width: 16px; height: 16px; background: url("../img/home.svg") center / 16px no-repeat; }

/* Về chúng tôi */
.section-top.sd { background: #f7f4ef; padding: 60px 0 !important; }
.section-top .about-short-banner img { width: 100%; max-width: 580px; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.section-top .about-heading .sub-title { padding-left: 0; font-weight: 500; font-size: 18px; text-transform: none; }
.section-top .about-heading .sub-title::before { display: none; }
.section-top .about-heading h2 { font-family: "Pacifico", cursive; font-weight: 400; font-size: 32px; margin-bottom: 12px; }
.section-top .about-heading { margin-bottom: 0; }
.section-top .about-follow { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid #ddd; }
.section-top .follow-title { font-style: italic; color: #5a5a5a; }
.section-top .social, .footer-sudes .social-footer { display: flex; align-items: center; gap: 10px; }
.section-top .social img { width: 35px; height: 35px; }
.section-statistical.sd { padding: 80px 0 !important; color: #fff; }
.section-statistical .stat-heading .sub-title { color: var(--subColor); padding-left: 0; font-weight: 500; font-size: 18px; text-transform: none; text-shadow: rgba(0, 0, 0, .25) 0 2px 4px; }
.section-statistical .stat-heading .sub-title::before { display: none; }
.section-statistical .stat-heading h2 { color: #fff; font-family: "Pacifico", cursive; font-weight: 400; font-size: 32px; margin-bottom: 12px; text-shadow: rgba(0, 0, 0, .25) 0 2px 4px; }
.section-statistical .stat-heading .desc { color: rgba(255, 255, 255, .8); margin: 0; }
.section-statistical .col-heading { padding-right: 90px !important; }
.section-statistical .stat-grid > .col { border-bottom: 1px solid rgba(255, 255, 255, .6); padding: 24px 10px !important; }
.section-statistical .stat-grid > .col:nth-child(n+3) { border-bottom: 0; }
.section-statistical .stat-item .number { font-size: 48px; font-weight: 700; color: var(--subColor); line-height: 1.2; }
.section-statistical .stat-item .label { color: #fff; font-size: 16px; }
.section-content-about.sd { padding: 60px 0 !important; }
.section-content-about .about-video { border-radius: 10px; overflow: hidden; margin-bottom: 30px; }
.section-content-about .video-text.text-box { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; text-align: center; }
.section-content-about .video-title .sub-title { color: var(--subColor); }
.section-content-about .video-title h2 { color: #fff; font-size: 32px; }
.section-content-about .play-button.button { width: 80px; height: 80px; min-height: 80px; margin: 0 auto; padding: 0; font-size: 0; border: 0; background: url("../img/play-button.png") center / contain no-repeat; }
.about-rich h2 { font-size: 24px; font-weight: 700; margin: 24px 0 12px; }
.about-rich blockquote { margin: 0 0 15px; padding: 12px 20px; border-left: 4px solid var(--mainColor); background: #f7f4ef; font-style: italic; }
.about-rich ul { margin: 0 0 15px 20px; }
.about-rich li { margin-bottom: 6px; }
@media (max-width: 991px) {
	.section-statistical .col-heading { padding-right: 10px !important; }
	.section-top .about-heading h2, .section-statistical .stat-heading h2 { font-size: 28px; }
}

/* Sản phẩm */
.section-list-cate.sd { padding: 30px 0 20px !important; }
.list-cate .box-image { padding: 10px; background: #f7f4ef; border-radius: 12px; border: 1px solid #eee; }
.list-cate .box-image > div { padding-top: 100% !important; position: relative; }
.list-cate .box-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.list-cate .box-text .header-title { font-size: 16px; }
.list-cate .sd-count { line-height: 1.5; height: auto; }
.list-cate .sd-view-more { font-size: 14px; color: var(--mainColor); text-decoration: underline; }
.block-collection.sd { padding: 0 0 45px !important; }
.sort-cate { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 20px; padding: 10px 14px; background: #f7f4ef; border-radius: 8px; }
.sort-cate .sort-title { font-weight: 600; }
.sort-cate .sort-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sort-cate .sort-list li { margin: 0; list-style: none; }
.sort-cate .sort-list a { display: inline-block; padding: 4px 12px; border: 1px solid #ddd; border-radius: 40px; background: #fff; font-size: 14px; }
.sort-cate .sort-list li.active a, .sort-cate .sort-list a:hover { border-color: var(--mainColor); color: var(--mainColor); }
.block-collection .sd-more-btn { display: flex; width: max-content; margin: 10px auto 0; }

/* Tin tức */
.blog_wrapper.sd { padding: 45px 0 !important; min-height: 200px; }
.sd-blog .post-item .col-inner { border-radius: 8px; }
.sd-blog .box-text { padding: 12px 0; text-align: left; }
.sd-blog .post-meta { font-size: 14px; color: #888; }
.sd-blog .is-divider { display: none; }
.sd-blog .button { background: none; color: var(--mainColor); border: 0; padding: 0; text-transform: none; }

/* Hỏi đáp */
.section-faq.sd { padding: 45px 0 !important; }
.faq-intro p { margin-bottom: 16px; }
.faq-group-title h3 { display: flex; align-items: center; gap: 20px; font-size: 18px; font-weight: 700; text-transform: uppercase; margin: 8px 0 16px; }
.faq-group-title h3::after { content: ""; flex: 1; height: 1px; background: var(--mainColor); }
.faq-list .accordion-item { border-bottom: 1px solid #eee; }
.faq-list .accordion-title {
	position: relative; display: block; padding: 16px 40px 16px 16px; border: 0; font-size: 16px; font-weight: 600; color: var(--textColor); text-transform: none;
}
.faq-list .accordion-title::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; border: 1px solid var(--mainColor); border-radius: 50%; transform: translateY(-50%); }
.faq-list .accordion-title .toggle { left: auto; right: 0; top: 14px; }
.faq-list .accordion-title.active { color: var(--textColor); background: none; }
.faq-list .accordion-inner { padding: 0 16px 20px; }
.faq-list .accordion-inner p { margin: 0; }

/* Liên hệ */
.layout-contact.sd { padding: 45px 0 40px !important; }
.layout-contact .col-form { border-right: 1px solid #ddd; padding-right: 30px !important; }
.layout-contact .col-info { padding-left: 30px !important; }
.layout-contact .title-head h2 { display: flex; align-items: center; gap: 20px; font-size: 20px; font-weight: 700; text-transform: uppercase; margin: 0 0 20px; }
.layout-contact .title-head h2::after { content: ""; flex: 1; height: 1px; background: var(--mainColor); }
.sd-contact-form .form-group { margin-bottom: 15px; }
.sd-contact-form input, .sd-contact-form textarea {
	width: 100%; height: 40px; margin: 0; padding: 0 20px; border: 1px solid #ddd; border-radius: 8px; box-shadow: none; font-size: 16px; background: #fff;
}
.sd-contact-form textarea { height: 190px; padding: 12px 20px; }
.sd-contact-form .sd-send, .sd-contact-form input[type=submit] {
	width: auto; height: 40px; padding: 0 20px; border: 0; border-radius: 40px; background: var(--mainColor); color: #fff; font-weight: 600; text-transform: none;
}
.wpcf7 label { width: auto; }
.contact-list .contact-item { position: relative; padding-left: 52px; margin-bottom: 18px; min-height: 40px; }
.contact-list .contact-item span { display: block; color: #666; font-size: 15px; }
.contact-list .contact-item a, .contact-list .contact-item { font-weight: 600; color: var(--textColor); }
.contact-list .contact-item::before { content: ""; position: absolute; left: 0; top: 2px; width: 36px; height: 36px; background: center / 32px no-repeat; }
.contact-list .ic-addr::before { background-image: url("../img/geo-fill.svg"); }
.contact-list .ic-phone::before { background-image: url("../img/phone-fill.svg"); }
.contact-list .ic-mail::before { background-image: url("../img/envelope-fill.svg"); }
.contact-list .ic-help::before { background-image: url("../img/info.svg"); }
.row-map { margin-top: 30px; }
.contact-map iframe { display: block; width: 100%; height: 450px; border: 0; }
@media (max-width: 849px) {
	.layout-contact .col-form { border-right: 0; padding-right: 7px !important; order: 2; }
	.layout-contact .col-info { padding-left: 7px !important; }
}

/* ---------- 5b. Home on tablets / phones (reference: horizontal scroll rows) ---------- */
.feedback-slider .star-rating, .feedback-slider .testimonial-meta .star-rating { display: none; }
.feedback-slider .testimonial-text { font-style: normal; }
@media (max-width: 991px) {
	.about-row > .about-images { order: 2; margin-top: 24px; }
	.section_feedback .feedback-banner { order: 2; }
	.section_feedback .feedback-content > .col-inner { margin-left: 0; padding: 0; border-radius: 0; }
}
@media (max-width: 767px) {
	.sd-hero { padding: 0; }
	.sd-hero .flickity-slider > .banner { width: calc(100vw - 28px); margin-right: 14px; }
	.sd-products.row:not(.slider), .section_coupons .coupon-row, .sd-cats .row:not(.slider) {
		flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	}
	.sd-products.row:not(.slider) > .col { flex: 0 0 47% !important; max-width: 47% !important; scroll-snap-align: start; }
	.section_coupons .coupon-row > .col { flex: 0 0 88% !important; max-width: 88% !important; scroll-snap-align: start; }
	.gallery-grid .gallery-item.banner { padding-top: 0 !important; height: 190px; }
	.gallery-grid .gallery-col > .col-inner { padding-bottom: 20px; }
	.section_product .col-banner { display: block; margin-bottom: 20px; }
	.section_product .col-banner img { height: auto; aspect-ratio: 406 / 514; }
	.product-tabs .nav.nav-pills { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 8px; }
	.product-tabs .nav-pills > li > a { white-space: nowrap; padding: 0 12px; font-size: 14px; }
	.feedback-banner img { height: 300px; }
}

/* ---------- 6b. About page fixes after compare ---------- */
.about-rich { font-size: 14px; line-height: 1.6; }
.about-rich h2 { font-size: 20px; font-weight: 600; margin: 20px 0 6px; }
.about-rich blockquote { margin: 0 0 15px; padding: 0; border: 0; background: none; font-style: normal; font-size: 14px; }
.about-rich ul { list-style: none; margin: 0 0 15px 12px; padding: 0; }
.about-rich li { margin: 0; list-style: none; }
.about-rich p { margin-bottom: 15px; }
.section-statistical .stat-grid > .col { text-align: center; border-bottom: 0; }
.section-statistical .stat-grid > .col:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .6); }
.section-statistical .stat-grid > .col:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .6); }
.section-statistical .stat-item .number { font-size: 36px; color: #fff; }
.section-statistical .stat-item .label { font-size: 14px; color: rgba(255, 255, 255, .8); }
@media (max-width: 991px) {
	.section-top .col-image { order: 2; margin-top: 30px; }
	.section-statistical.sd { padding: 45px 0 !important; }
	.section-statistical .stat-item .number { font-size: 28px; }
	.section-content-about.sd { padding: 30px 0 !important; }
}

/* ---------- 6c. Sản phẩm / shared fixes after compare ---------- */
.breadcrumb_background .sd-crumb { padding-top: 162px; }
.breadcrumb_background .title_full { font-size: 36px; }
.sd-products .product-small.col { padding-bottom: 48px !important; }
@media (max-width: 767px) { .sd-products .product-small.col { padding-bottom: 14px !important; } }
.sort-cate { justify-content: flex-end; background: none; padding: 0; border-radius: 0; font-size: 12px; }
.sort-cate .sort-title { font-size: 12px; }
.sort-cate .sort-list { gap: 12px; }
.sort-cate .sort-list a { padding: 0 0 0 14px; border: 0; background: none; font-size: 12px; position: relative; border-radius: 0; }
.sort-cate .sort-list a::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; border: 1px solid #999; border-radius: 50%; transform: translateY(-50%); }
.sort-cate .sort-list li.active a { color: var(--hover); }
.sort-cate .sort-list li.active a::before { background: var(--hover); border-color: var(--hover); }
.list-cate .box-image { padding: 0; border-radius: 50% !important; background: #f7f4ef; border: 0; }
.list-cate .box-image img { object-fit: contain; }
.list-cate .box-text { padding-top: 10px; }
.list-cate .box-text .header-title { font-size: 16px; font-weight: 500; line-height: 1.4; }
.list-cate .sd-count { font-size: 14px; color: #666; }
.list-cate .flickity-page-dots { display: none; }

/* ---------- 6d. Liên hệ fixes after compare ---------- */
@media (max-width: 767px) {
	.breadcrumb_background .sd-crumb { padding-top: 120px; padding-bottom: 24px; }
	.breadcrumb_background .title_full { font-size: 28px; }
}
.layout-contact.sd { padding: 30px 0 40px !important; }
.layout-contact .title-head h2 { font-size: 18px; margin-bottom: 16px; }
.layout-contact .contact-intro p { font-size: 14px; margin-bottom: 24px; }
.sd-contact-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.sd-contact-form .form-group:nth-of-type(n+3), .sd-contact-form .form-submit { grid-column: 1 / -1; }
.sd-contact-form input, .sd-contact-form textarea { font-size: 14px; height: 38px; border-radius: 4px; }
.sd-contact-form textarea { height: 215px; }
.contact-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px dashed #bbb; }
.contact-list .contact-item { padding-left: 52px; margin-bottom: 18px; font-size: 14px; }
.contact-list .contact-item span { font-size: 13px; font-weight: 400; }
.contact-list .contact-item::before { width: 32px; height: 32px; background-size: 28px; }
.row-map { margin-top: 20px; }
@media (max-width: 767px) {
	.sd-contact-form, .contact-list { grid-template-columns: 1fr; }
	.layout-contact .title-head h2 { font-size: 18px; }
}

/* ---------- 6e. Hỏi đáp fixes after compare ---------- */
.section-faq.sd { padding: 10px 0 30px !important; }
.faq-intro p { font-size: 15px; margin-bottom: 10px; }
.faq-group-title h3 { font-size: 16px; margin: 4px 0 6px; }
.faq-list .accordion-title { padding: 12px 40px 12px 16px; font-size: 15px; }
.faq-list .accordion-inner { padding: 0 16px 14px; font-size: 15px; }
.faq-list .accordion-title .toggle i { font-size: 14px; }
.faq-list .accordion-title:not(.active) .toggle { transform: rotate(180deg); }

/* ---------- 2b. Footer headings + mobile top bar ---------- */
.footer-sudes .title-menu h4 { color: #fff; font-size: 18px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; line-height: normal; margin: 0 0 20px; }
.footer-sudes .title-menu { margin: 0; }
.footer-sudes .title-pay h4 { margin-top: 32px; }
.footer-sudes .zalo-app { margin-top: 32px; }
.footer-sudes .zalo-box { display: flex; align-items: center; gap: 10px; }
.footer-sudes .zalo-box strong { display: block; color: var(--subColor); font-size: 18px; font-weight: 600; }
.footer-sudes .zalo-box span { color: #fff; }
.footer-sudes .zalo-box img { width: 72px; height: 72px; border-radius: 4px; }
.footer-sudes .payment-list { display: flex; flex-wrap: wrap; gap: 8px 9px; max-width: 330px; }
.footer-sudes .payment-list img { width: 74px; height: 34px; border-radius: 4px; }
.footer-sudes .desc p { color: rgba(255, 255, 255, .8); margin-bottom: 16px; }
@media (max-width: 849px) {
	#top-bar .sudes-promo .promo-item a { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: calc(100vw - 60px); }
}

/* ---------- 0b. Container width over Flatsome's Customizer CSS (printed after this file) ---------- */
html body .container, html body .container-width { max-width: calc(var(--sd-w) + 30px); }
html body .row:not(.row .row) { max-width: calc(var(--sd-w) + 20px); }
#masthead .flex-left.flex-grow { flex: 0 1 620px; min-width: 0; }
#masthead #logo { flex: none; }
.header-main .nav-right { flex-wrap: nowrap; }
.header-main .nav-right > li { flex: none; }

/* ---------- 5c. Tablet (≤991, reference Bootstrap lg breakpoint): scroll rows, stacked feedback ---------- */
@media (max-width: 991px) {
	.sd-products.row:not(.slider), .section_coupons .coupon-row {
		flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	}
	.sd-products.row:not(.slider) > .col { flex: 0 0 32% !important; max-width: 32% !important; scroll-snap-align: start; }
	.section_coupons .coupon-row > .col { flex: 0 0 46% !important; max-width: 46% !important; scroll-snap-align: start; }
	.gallery-grid > .col { flex: 0 0 50% !important; max-width: 50% !important; }
	.gallery-grid .gallery-item.banner { padding-top: 0 !important; height: 240px; }
	.section_feedback .row > .col { flex: 0 0 100% !important; max-width: 100% !important; }
	.feedback-banner img { height: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 767px) {
	.sd-products.row:not(.slider) > .col { flex: 0 0 47% !important; max-width: 47% !important; }
	.section_coupons .coupon-row > .col { flex: 0 0 88% !important; max-width: 88% !important; }
	.gallery-grid > .col { flex: 0 0 100% !important; max-width: 100% !important; }
	.gallery-grid .gallery-item.banner { height: 190px; }
}
@media (max-width: 767px) {
	.section_product .col-banner { order: 2; }
}

/* ---------- 7. Shop / product page ---------- */
.product-info .price { display: flex; align-items: center; gap: 12px; }
.product-info .price del, .product-info .price del .amount { color: #9aa5b3; font-size: 18px; font-weight: 400; order: 1; }
.product-info .price ins { order: 2; text-decoration: none; }
.product-info .price ins .amount, .product-info .price > .amount { color: var(--price); font-size: 26px; font-weight: 700; }
.single_add_to_cart_button.button, .woocommerce .checkout-button.button, #place_order {
	background: var(--mainColor); border-radius: 40px; text-transform: none; letter-spacing: 0; font-weight: 600;
}
.single_add_to_cart_button.button:hover { background: var(--hover); }
.woocommerce-breadcrumb, .breadcrumbs { text-transform: none; }

/* ---------- 0c. Below 1200 the reference's .container is the full width with 14 px sides (main.css), not Bootstrap's steps ---------- */
@media (min-width: 768px) and (max-width: 991px) {
	html body .container { max-width: 100%; }
	html body .sd .row:not(.row .row), html body .footer-sudes .row.footer-grid { max-width: 100%; }
	.gallery-grid { display: grid !important; grid-template-columns: repeat(4, 1fr); }
	.gallery-grid > .col { max-width: none !important; flex: none !important; width: auto !important; }
	.gallery-grid .gallery-col-1 { grid-column: 1 / 3; }
	.gallery-grid .gallery-col-6 { grid-column: 3 / 5; }
	.gallery-grid .gallery-item.banner { height: 240px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
	html body .container { max-width: 100%; }
	html body .sd .row:not(.row .row), html body .footer-sudes .row.footer-grid { max-width: 100%; }
}
@media (max-width: 991px) {
	.section_tiktok_embed .row > .col { flex: 0 0 100% !important; max-width: 100% !important; }
	.section_tiktok_embed .col-embed { margin-top: 40px; }
}

/* ---------- 8. Fix r1: card actions, sliders, category hover, floating widgets, popup, mobile menu ---------- */
/* Card: "Thêm vào giỏ" / "Tùy chọn" + heart slide up on hover (reference .product-action). */
.product-small.box { overflow: hidden; }
.product-small .box-text { position: relative; transition: transform .3s ease; }
.sd-actions { position: absolute; left: 12px; right: 12px; top: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 4px; opacity: 0; transition: opacity .3s ease; }
.sd-actions .sd-cart-btn { flex: 0 1 160px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 99px; background: var(--mainColor); color: #fff; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; }
.sd-actions .sd-cart-btn svg { width: 16px; height: 16px; fill: #fff; }
.sd-actions .sd-cart-btn:hover { background: var(--hover); color: #fff; }
.sd-actions .sd-cart-btn.loading { opacity: .6; }
.sd-actions .sd-cart-btn.added::after { display: none; }
.sd-actions .added_to_cart { display: none !important; }
.sd-actions .sd-wish { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--subColor); }
.sd-actions .sd-wish svg { width: 18px; height: 18px; fill: #333; }
@media (min-width: 850px) {
	.product-small.box:hover .box-text { transform: translateY(-48px); }
	.product-small.box:hover .sd-actions { opacity: 1; }
}
@media (max-width: 849px) { .sd-actions { display: none; } }

/* Product sliders (flash sale, tabs): arrows at the sides on hover, like the reference swiper. */
.section_flash_sale .sd-products .flickity-prev-next-button,
.section_product_tab .sd-products .flickity-prev-next-button { top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .25s ease; }
.section_flash_sale .sd-products .flickity-prev-next-button.previous,
.section_product_tab .sd-products .flickity-prev-next-button.previous { left: 4px; }
.section_flash_sale .sd-products .flickity-prev-next-button.next,
.section_product_tab .sd-products .flickity-prev-next-button.next { right: 4px; }
.section_flash_sale:hover .sd-products .flickity-prev-next-button,
.section_product_tab:hover .sd-products .flickity-prev-next-button { opacity: 1; }
.section_flash_sale .sd-products.slider, .section_product_tab .sd-products.slider { margin-left: -10px; margin-right: -10px; }
/* Blog slider: arrows at the right of the title (reference .control-top), as the product sliders. */
.section_blog .sd-title { padding-right: 120px; }
.section_blog .sd-blog .flickity-prev-next-button { top: -64px; transform: none; }
.section_blog .sd-blog .flickity-prev-next-button.previous { left: auto; right: 50px; }
.section_blog .sd-blog .flickity-prev-next-button.next { right: 0; }
@media (max-width: 767px) {
	.section_blog .sd-title { padding-right: 0; }
	.section_blog .sd-blog .flickity-prev-next-button, .section_category .sd-cats .flickity-page-dots { display: none; }
}

/* Hero: arrows also on phones (the reference shows them), dots stay. */
@media (max-width: 849px) {
	.sd-hero .flickity-prev-next-button { display: block !important; opacity: 1; width: 32px; height: 32px; background: rgba(255, 255, 255, .85); color: var(--mainColor); }
	.sd-hero .flickity-prev-next-button svg { padding: 8px; }
	.sd-hero .flickity-prev-next-button.previous { left: 18px; }
	.sd-hero .flickity-prev-next-button.next { right: 18px; }
}

/* Home category slider: 8 tiles of 140 px with 20 px gaps over the 1259 px container, no arrows, count → "Xem chi tiết" on hover. */
.section_category .sd-cats.row { margin-left: -10.5px; margin-right: -10.5px; max-width: none; }
.section_category .sd-cats .flickity-prev-next-button { display: none !important; }
.section_category .sd-cats .flickity-page-dots { margin-top: 20px; }
.sd-cats .sd-status { position: relative; height: 27px; overflow: hidden; }
.sd-cats .sd-status .sd-count, .sd-cats .sd-status .sd-view-more { position: absolute; left: 0; top: 0; width: 100%; display: block; transition: all .3s; font-size: 14px; line-height: 27px; }
.sd-cats .sd-status .sd-view-more { opacity: 0; visibility: hidden; transform: translateY(-100%); text-decoration: underline; color: var(--hover); }
.sd-cats .box-category:hover .sd-status .sd-view-more { opacity: 1; visibility: visible; transform: translateY(0); }
.sd-cats .box-category:hover .sd-status .sd-count { opacity: 0; visibility: hidden; transform: translateY(100%); }
.sd-cats .box-image::before, .sd-cats .box-image::after, .sd-cats .box-image .overlay, .sd-cats .box-image .shade { display: none !important; }
@media (max-width: 767px) {
	.section_category .sd-cats.row { margin-left: -7px; margin-right: -7px; }
}

/* Floating widgets. */
.sd-float-bell { position: fixed; left: 18px; bottom: 32px; z-index: 98; }
.sd-bell-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 1px solid #fff; border-radius: 50%; background: var(--mainColor); box-shadow: 0 4px 8px rgba(0, 0, 0, .15); cursor: pointer; min-height: 0; }
.sd-bell-icon svg { width: 20px; height: 20px; fill: #fff; animation: sd-bell 2s infinite; transform-origin: 50% 0; }
.sd-bell-panel { position: absolute; left: 0; bottom: 58px; width: 300px; padding: 14px; border-radius: 8px; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .15); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s; }
.sd-float-bell.active .sd-bell-panel { opacity: 1; visibility: visible; transform: none; }
.sd-bell-title { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 8px; }
.sd-bell-close, .sd-contact-close { margin: 0; padding: 0; min-height: 0; width: 24px; height: 24px; border: 0; background: none; line-height: 1; cursor: pointer; color: inherit; }
.sd-bell-close svg, .sd-contact-close svg { width: 20px; height: 20px; }
.sd-bell-panel ul { margin: 0; padding: 0; list-style: none; }
.sd-bell-panel li { margin: 0; padding: 6px 0; border-top: 1px dashed #eee; font-size: 14px; }
@keyframes sd-bell { 0%, 50%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-14deg); } }

.sd-contact-widget { position: fixed; right: 14px; bottom: 20px; z-index: 99; }
.sd-contact-btn { position: relative; display: block; width: 60px; height: 60px; margin: 0; padding: 0; min-height: 0; border: 3px solid #fff; border-radius: 50%; background: var(--mainColor); box-shadow: 0 0 0 2px var(--mainColor); color: #fff; cursor: pointer; text-transform: none; }
.sd-contact-btn .pregan { position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--mainColor); animation: sd-pregan 1.6s infinite; pointer-events: none; }
.sd-contact-btn .pregan + .pregan { animation-delay: .8s; }
@keyframes sd-pregan { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
.sd-contact-btn .main-icon, .sd-contact-btn .ser-icon { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .4s, transform .4s; }
.sd-contact-btn .main-icon svg { width: 20px; height: 20px; }
.sd-contact-btn .main-icon span { font-size: 10px; line-height: 1.2; margin-top: 2px; }
.sd-contact-btn .unsee { opacity: 0; transform: scale(.4); }
.sd-contact-btn .ser-icon .item { position: absolute; display: none; }
.sd-contact-btn .ser-icon .item.is-active { display: block; animation: sd-zoom .4s; }
.sd-contact-btn .ser-icon svg { width: 25px; height: 25px; fill: #fff; }
.sd-contact-btn .ser-icon svg path[fill="currentColor"] { fill: #fff; }
.sd-contact-btn .ser-icon .item:nth-child(2) svg text { fill: var(--mainColor); }
@keyframes sd-zoom { from { transform: scale(0); } to { transform: scale(1); } }
.sd-contact-panel { position: absolute; right: 0; bottom: 74px; width: 290px; border-radius: 8px; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .15); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s; }
.sd-contact-widget.active .sd-contact-panel { opacity: 1; visibility: visible; transform: none; }
.sd-contact-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--mainColor); color: #fff; font-weight: 700; }
.sd-contact-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #f1f1f1; color: var(--textColor); }
.sd-contact-item .sd-ico svg { width: 25px; height: 25px; fill: var(--mainColor); color: var(--mainColor); display: block; }
.sd-contact-item .detail { display: flex; flex-direction: column; font-size: 13px; line-height: 1.4; }
.sd-contact-item .detail span { color: #666; }

.sd-lang { position: fixed; right: 0; top: 25%; z-index: 99; }
.sd-lang-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #dd0115; border-radius: 5px 0 0 5px; cursor: pointer; }
.sd-lang-icon svg { width: 16px; height: 16px; fill: #fff; }
.sd-lang-list { position: absolute; right: 0; top: 44px; margin: 0; padding: 8px 12px; list-style: none; white-space: nowrap; background: #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); opacity: 0; visibility: hidden; transform: translateY(20px); transition: all .2s ease-out; }
.sd-lang:hover .sd-lang-list { opacity: 1; visibility: visible; transform: none; }
.sd-lang-list li { margin: 0; font-size: 14px; }

/* Back to top (Flatsome #top-link) where the reference has .backtop: above the contact button, on phones too. */
#top-link { right: 15px !important; bottom: 100px !important; width: 40px; height: 40px; border: 0 !important; border-radius: 50%; background: #fff !important; box-shadow: 0 0 5px rgba(0, 0, 0, .17); color: #333 !important; }
@media (max-width: 849px) { #top-link.hide-for-medium { display: inline-block !important; } }

/* Home popup ([lightbox id="sd-popup"]). */
#sd-popup.lightbox-content { background: transparent; box-shadow: none; max-width: 480px !important; padding: 5px !important; margin: 0 auto; }
#sd-popup .img, #sd-popup .img-inner { display: block; }
#sd-popup img { width: 100%; border: 1px solid var(--mainColor); display: block; }
#sd-popup .check-close { display: flex; align-items: center; justify-content: center; margin-top: 12px; color: #fff; }
#sd-popup .check-close label { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #fff; font-weight: 400; font-size: 15px; text-shadow: 0 2px 4px rgba(0, 0, 0, .25); cursor: pointer; }
#sd-popup .check-close input { width: 20px; height: 20px; margin: 0; }
.mfp-wrap .mfp-content #sd-popup ~ .mfp-close, #sd-popup .mfp-close { top: 0; right: 0; width: 30px; height: 30px; line-height: 28px; border-radius: 40px; background: var(--mainColor); color: #fff; opacity: 1; font-size: 22px; }
.mfp-bg.mfp-ready { opacity: .8; }

/* Mobile menu: 280 px panel, plain case, arrows on the item's line, link block at the end. */
.off-canvas-left.mfp-ready .mfp-content, .off-canvas .mfp-content.off-canvas-cart { width: 280px; }
.off-canvas-left .mfp-content { width: 280px; }
.nav-sidebar.nav-vertical > li > a, .nav-sidebar .nav > li > a, .off-canvas .nav-vertical li a { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500; }
.off-canvas .nav-vertical li li > a { font-size: 14px; }
.off-canvas .nav-vertical > li { display: flex; flex-wrap: wrap; align-items: center; }
.off-canvas .nav-vertical > li > a { flex: 1; }
.off-canvas .nav-vertical > li > .toggle { position: static; order: 2; margin: 0 4px 0 0; width: 32px; height: 32px; transform: rotate(-90deg); opacity: .7; }
.off-canvas .nav-vertical > li.active > .toggle { transform: rotate(0); }
.off-canvas .nav-vertical > li > .sub-menu, .off-canvas .nav-vertical > li > .children { order: 3; flex: 0 0 100%; }
.off-canvas .header-vertical-menu__fly-out, .off-canvas .nav-sidebar { width: 100%; }
.sd-mobile-links { margin: 10px 0 0; padding: 10px 20px; list-style: none; border-top: 1px solid #eee; }
.sd-mobile-links li { margin: 0; padding: 7px 0; }
.sd-mobile-links a { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--textColor); }
.sd-mobile-links a span, .sd-mobile-links a b { color: var(--hover); }
.sd-mobile-links svg { width: 18px; height: 18px; fill: var(--mainColor); }
.off-canvas .html.header-html-5, .off-canvas li.html { width: 100%; }

/* Footer on phones: the reference's 14 px text (links, description, newsletter line). */
@media (max-width: 767px) {
	.footer-sudes .list-menu .ux-menu-link__link, .footer-sudes .desc, .footer-sudes .zalo-app span { font-size: 14px; }
	.footer-sudes .ux-menu.list-menu { column-gap: 10px; }
}
.sd-cats .sd-status .sd-count, .sd-cats .sd-status .sd-view-more { line-height: 21px; }
/* Category tile sliders are set without arrows (slider_arrows="false"): no stray arrow buttons at the tile corners. */
.sd-cats .flickity-prev-next-button { display: none !important; }

/* ---------- 9. Fix r2: product sections' height, coupon carousel, brand arrows ---------- */
/* Product slider beside a photo: the row is as tall as the photo, cards end at its bottom (reference), no column padding below. */
@media (min-width: 768px) {
	.section_product .row.align-middle { align-items: flex-end !important; }
	.section_product .row.align-middle > .col { padding-bottom: 0 !important; }
	.section_product .sd-products .product-small.col { padding-bottom: 4px !important; }
	.section_product .sd-more-row { margin-top: 16px; }
}
/* Coupons: Flickity on the row (sudes.js); cards keep their columns, arrows show on hover like the reference swiper. */
.section_coupons .coupon-col { padding: 0 14px 0 4px !important; }
.section_coupons .coupon-row.flickity-enabled { display: block; overflow: visible !important; }
.section_coupons .coupon-row .flickity-slider > .col { width: 25%; max-width: 25% !important; flex: none !important; }
.section_coupons .coupon-row .flickity-prev-next-button { top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .25s ease; }
.section_coupons .coupon-row .flickity-prev-next-button.previous { left: 4px; }
.section_coupons .coupon-row .flickity-prev-next-button.next { right: 4px; }
.section_coupons .coupon-row:hover .flickity-prev-next-button { opacity: 1; }
.section_coupons .coupon-row:hover .flickity-prev-next-button:disabled { opacity: .35; }
@media (max-width: 991px) { .section_coupons .coupon-row .flickity-slider > .col { width: 46%; max-width: 46% !important; } }
@media (max-width: 767px) {
	.section_coupons .coupon-row .flickity-slider > .col { width: 88%; max-width: 88% !important; }
	.section_coupons .coupon-row .flickity-prev-next-button { display: none; }
}
/* Brands: the reference's swiper has no arrows (drag / swipe only). */
.brand-slider .flickity-prev-next-button { display: none !important; }
/* Flash sale: arrows shown at rest on the card edges (reference), the first one faded until the slider moves. */
.section_flash_sale .sd-products .flickity-prev-next-button { opacity: 1; }
.section_flash_sale .sd-products .flickity-prev-next-button:disabled { opacity: .35; }
/* Blog: Flatsome's "push" nav adds margin-top -10% — the arrows sat in the TikTok band; keep them on the title row. */
.section_blog .sd-blog .flickity-prev-next-button { margin-top: 0 !important; }
/* Tablet (768–991): the services strip sits in the container (15 px from the edges, reference), the payment logos stay on one row. */
@media (min-width: 768px) and (max-width: 991px) {
	.section_services .promo-box { margin: 0 15px; width: auto; }
}
@media (max-width: 991px) {
	.footer-sudes .payment-footer, .footer-sudes .payment-list { max-width: none; }
}

/* Copy mã is a button without a link. */
.copy-coupon { cursor: pointer; }

/* ===== Change C1: blog cards, TikTok block and footer heights as the reference ===== */
/* Blog cards (reference .item-blog): cream card with border, date pill on the photo, category tag, "Đọc thêm →". */
.sd-blog .post-item { padding-bottom: 16px; }
.sd-blog .post-item .col-inner { height: 100%; border-radius: 12px; }
.sd-blog .post-item .box.box-blog-post { background: #f7f4ef; border: 1px solid #e6e6e6; border-radius: 12px; overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.sd-blog .box-blog-post .box-image { width: 100%; border-radius: 0; }
.sd-blog .box-blog-post .box-text { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; padding: 24px 20px; text-align: left; }
.sd-blog .box-blog-post .blog-post-inner { display: flex; flex-direction: column; flex: 1 1 auto; }
.sd-blog .box-blog-post .cat-label { position: absolute; top: -12px; left: 12px; z-index: 2; max-width: calc(100% - 24px); height: 28px; line-height: 28px; padding: 0 15px; margin: 0; border-radius: 4px; background: var(--mainColor); color: #fff; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-blog .box-blog-post .post-title { flex: 1 1 0%; margin: 0 0 10px; font-size: 18px; font-weight: 600; line-height: 1.4; text-transform: capitalize; }
.sd-blog .box-blog-post .post-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sd-blog .box-blog-post .from_the_blog_excerpt { margin: 0; font-size: 14px; line-height: 1.5; text-align: justify; color: #4f4f4f; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sd-blog .box-blog-post .button { align-self: flex-end; display: inline-flex; align-items: center; gap: 4px; margin: 10px 0 0 !important; padding: 0; min-height: 0; line-height: 1.5; border: 0; border-bottom: 2px solid var(--mainColor); border-radius: 0; background: none; color: #333; font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; box-shadow: none; }
.sd-blog .box-blog-post .button::after { content: ""; width: 20px; height: 20px; background: url("../img/arrow-right.svg") center / 20px no-repeat; }
.sd-blog .box-blog-post .button:hover { color: var(--hover); background: none; }
.sd-blog .badge.post-date { top: 12px; left: 12px; width: auto; height: auto; margin: 0; opacity: 1; }
.sd-blog .badge.post-date .badge-inner { display: flex; align-items: center; height: auto; padding: 4px 12px; border: 2px solid var(--subColor); border-radius: 40px; background: #fff; color: #222; line-height: normal; }
.sd-blog .badge.post-date br { display: none; }
.sd-blog .badge.post-date .post-date-day { font-size: 18px; font-weight: 700; }
.sd-blog .badge.post-date .post-date-month { margin-left: 4px; font-size: 12px; text-transform: none; white-space: nowrap; opacity: 1; }
@media (max-width: 767px) {
	.sd-blog .box-blog-post .post-title { font-size: 16px; }
}

/* TikTok block: the embed sits at the top of its column; the text column keeps the place of the reference's
   "Theo dõi ngay" button (no TikTok account given yet). */
.section_tiktok_embed .row { align-items: flex-start; }
@media (min-width: 992px) {
	.section_tiktok_embed .row { padding-top: 45px; }
	.section_tiktok_embed .col-text > .col-inner { padding-bottom: 19px; }
}
@media (max-width: 991px) {
	.section_tiktok_embed .col-text { padding-bottom: 0 !important; }
	.section_tiktok_embed .col-text > .col-inner { padding-bottom: 64px; }
	.section_tiktok_embed .col-embed { margin-top: 26px; padding-bottom: 8px !important; }
}

/* Footer: the middle part keeps the reference's height while the customer's address, phone, email,
   social links and app QR are still missing (their slots stay empty). */
@media (min-width: 992px) {
	.footer-sudes .row.footer-grid { min-height: 542px; }
}
@media (max-width: 991px) {
	.footer-sudes .footer-info > .col-inner { padding-bottom: 167px; }
	.footer-sudes .footer-news > .col-inner { padding-bottom: 104px; }
}
/* Services: the text starts 16 px after the icon (Flatsome adds 1em more). */
.section_services .icon-box-left .icon-box-img + .icon-box-text { padding-left: 0; }
/* Services strip on phones: the box spans the screen, the border is the section's (reference). */
@media (max-width: 767px) {
	.section_services.sd { border: 1px solid #ddd; }
	.section_services .promo-box { margin: 0; width: auto; border: 0; padding: 20px 0 !important; }
}
@media (max-width: 767px) {
	.section_tiktok_embed .heading-desc { font-size: 14px; line-height: 21px; }
}
/* The row's clearfix pseudo-elements are not grid items (they added a row gap). */
.section_services .promo-box::before, .section_services .promo-box::after,
.footer-sudes .row.footer-grid::before, .footer-sudes .row.footer-grid::after { display: none; }
/* Blog slider on phones: 85 % cards with the next one peeking (reference). */
@media (max-width: 549px) {
	.section_blog .row.sd-blog { margin-left: -8px !important; margin-right: -8px !important; width: auto !important; }
	.section_blog .sd-blog .post-item { width: 85% !important; max-width: 85% !important; flex-basis: 85% !important; padding: 0 7px 20px !important; }
}
@media (max-width: 767px) {
	.footer-sudes .des_foo { font-size: 14px; line-height: 21px; }
}

/* ===== Change C2: home carousels and the phone gallery as the reference ===== */
/* Feedback (reference .swiper_feedback): one testimonial per slide (Flickity cells were their natural width,
   so two showed cut), 80 px round avatar, quote mark, justified text, name and job on the right. */
.feedback-slider .flickity-slider > .testimonial-box { width: 100%; }
.feedback-slider .testimonial-box.icon-box-left { display: flex; flex-wrap: nowrap; align-items: flex-start; padding: 10px 0; }
.feedback-slider .testimonial-image { width: 80px !important; flex: none; margin: 0 !important; }
.feedback-slider .testimonial-image img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; display: block; }
.feedback-slider .testimonial-box .icon-box-text { flex: 1 1 0px; min-width: 0; padding-left: 20px; }
.feedback-slider .testimonial-text.is-italic { font-style: normal !important; }
.feedback-slider .testimonial-box .icon-box-text::before {
	content: ""; display: block; width: 28px; height: 28px; margin-bottom: 4px; background: var(--mainColor);
	-webkit-mask: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.feedback-slider .testimonial-text { font-size: 14px; line-height: 1.5; color: #333; text-align: justify; }
.feedback-slider .testimonial-meta { margin-top: 4px; padding-top: 0; text-align: right; }
.feedback-slider .testimonial-name { display: block; font-size: 14px; color: #333; }
.feedback-slider .testimonial-company { display: block; font-size: 12px; color: #757575; }
.feedback-slider .testimonial-name-divider { display: none; }
@media (min-width: 992px) {
	.section_feedback .row > .feedback-banner, .section_feedback .row > .feedback-content { flex: 0 0 50% !important; max-width: 50% !important; }
	.feedback-banner img { height: auto; aspect-ratio: 800 / 610; }
	/* Flatsome's .col-inner is width 100 %: widen it by the 60 px it moves over the photo (reference bg-content). */
	.section_feedback .feedback-content > .col-inner { width: calc(100% + 60px); padding: 20px 0 20px 30px; border-radius: 20px 0 0 20px; }
}
@media (max-width: 991px) {
	.feedback-slider .testimonial-box.icon-box-left { flex-direction: column; align-items: center; padding: 10px 20px; }
	.feedback-slider .testimonial-image { margin: 0 0 -8px !important; }
	.feedback-slider .testimonial-box .icon-box-text { padding-left: 0; width: 100%; }
	.section_feedback .feedback-content { position: relative; z-index: 1; }
	.section_feedback .feedback-content > .col-inner { margin-bottom: -60px; padding-bottom: 12px; background: #fff; border-radius: 0 0 20px 20px; }
	.section_feedback .feedback-banner { padding: 0 !important; }
	.feedback-banner img { height: auto; aspect-ratio: 800 / 610; border-radius: 0; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
	.section_feedback.sd { overflow-x: clip; }
}
/* Product sections beside a photo: both arrows side by side on the description line at the right of the cards
   (reference); Flatsome's outside nav moved them up by 10 % of the slider and pushed "next" over the photo. */
@media (min-width: 768px) {
	.section_product .sd-products .flickity-prev-next-button { top: -67px !important; margin-top: 0 !important; width: 40px; height: 40px; }
	.section_product .sd-products .flickity-prev-next-button.previous { left: auto !important; right: 50px !important; }
	.section_product .sd-products .flickity-prev-next-button.next { left: auto !important; right: 0 !important; }
}
/* Brands (reference .brand-item): square cells with the logo contained, so the strip never cuts a logo. */
.brand-slider .img-inner { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 0; background: none; }
.brand-slider .img-inner img { width: auto; height: auto; max-width: 80%; max-height: 80%; object-fit: contain; }
@media (max-width: 767px) {
	/* Two and a half logos on a phone (reference: 40 % slides). */
	.brand-slider .flickity-slider > .img { width: calc((100% + 14px) * .4 - 14px) !important; }
	.brand-slider .img-inner img { max-width: 100%; max-height: 100%; }
	.about-row > .about-images, .about-row > .about-content { padding-left: 14px !important; padding-right: 14px !important; }
	.about-smalls { margin: 14px -7px 0 !important; }
	.about-smalls > .col { padding: 0 7px !important; }
	.about-smalls > .col:first-child .img { outline: 0; }
	.about-row > .about-images { margin-top: 14px; }
}
/* Hero on phones: the slide is 100vw − 28 px wide, so its height is taken from that width (the % was the slider's). */
@media (max-width: 767px) {
	.sd-hero .banner { padding-top: calc((100vw - 28px) * 1.0635) !important; }
	.about-content .about-text p { font-size: 14px; line-height: 24px; }
}
/* Phone gallery (reference): the first and last cards full width, the four others two by two,
   at the reference's ratios (62.5 % wide cards, 130 % small ones). */
@media (max-width: 767px) {
	.gallery-grid { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 0; }
	.gallery-grid > .col { max-width: none !important; flex: none !important; width: auto !important; }
	.gallery-grid .gallery-col-1, .gallery-grid .gallery-col-6 { grid-column: 1 / 3; }
	.gallery-grid .gallery-item.banner { height: auto; aspect-ratio: 1 / 1.3; }
	.gallery-grid .gallery-col-1 .gallery-item.banner, .gallery-grid .gallery-col-6 .gallery-item.banner { aspect-ratio: 1 / .625; }
	.gallery-grid { margin: 0 !important; width: 100% !important; max-width: none !important; padding: 0 7px; }
	.gallery-grid > .col { padding: 0 7px 20px !important; }
	.gallery-grid .gallery-col > .col-inner { padding-bottom: 0; }
	.gallery-grid .gallery-text.text-box { padding: 14px 14px 18px; }
	.gallery-grid .gallery-caption h3 { font-size: 16px; font-weight: 600; line-height: 1.4; margin-bottom: 6px; }
}