/*
Theme Name: SOFT4U C1
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*
 * SOFT4U C1 — Global Typography
 * Mục tiêu:
 * - Đồng bộ font toàn site
 * - Chữ đậm mịn hơn, tránh cảm giác nét đứt / nét gắt
 * - Không dùng font-weight lẻ như 750 / 800
 * - Ưu tiên dễ đọc tiếng Việt trên desktop và mobile
 */

/* Load font Inter: hiện đại, gọn, hợp web bán phần mềm */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
 * 1. Biến typography chung
 * ============================================================ */

:root {
	--s4u-font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;
	--s4u-font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;

	--s4u-text-strong: #172221;
	--s4u-text-body: #2d3a38;
	--s4u-text-muted: #64716f;
	--s4u-text-soft: #7a8583;

	--s4u-weight-regular: 400;
	--s4u-weight-medium: 500;
	--s4u-weight-semibold: 600;
	--s4u-weight-bold: 700;

	--s4u-letter-tight: -0.015em;
	--s4u-letter-normal: 0;
}

/* ============================================================
 * 2. Nền tảng font toàn site
 * ============================================================ */

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

body {
	font-family: var(--s4u-font-main) !important;
	font-weight: var(--s4u-weight-regular);
	color: var(--s4u-text-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-synthesis-weight: none;
	font-synthesis-style: none;
}

/* Đồng bộ font cho các thành phần thường bị Flatsome/WooCommerce ghi đè */
body,
button,
input,
select,
textarea,
.button,
.nav,
.nav > li > a,
.header,
.footer,
.product,
.product-title,
.product-small,
.woocommerce,
.woocommerce-page,
.shop_table,
.account-item,
.widget,
.off-canvas,
.mobile-sidebar {
	font-family: var(--s4u-font-main) !important;
}

/* ============================================================
 * 3. Heading toàn site
 * ============================================================ */

h1, h2, h3, h4, h5, h6,
.heading-font,
.section-title,
.section-title-main,
.widget-title,
.product-title,
.page-title,
.entry-title,
.shop-page-title,
.woocommerce-products-header__title {
	font-family: var(--s4u-font-heading) !important;
	color: var(--s4u-text-strong);
	letter-spacing: var(--s4u-letter-tight);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-shadow: none !important;
}

h1,
.h1,
.product-title.entry-title {
	font-weight: 700 !important;
	line-height: 1.24;
}

h2,
.h2,
.section-title-main {
	font-weight: 700 !important;
	line-height: 1.28;
}

h3,
.h3 {
	font-weight: 700 !important;
	line-height: 1.34;
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
	font-weight: 600 !important;
	line-height: 1.4;
}

/* ============================================================
 * 4. Văn bản thường
 * ============================================================ */

p,
li,
td,
th,
blockquote,
figcaption,
address,
.product-short-description,
.woocommerce-tabs .panel,
.woocommerce-Tabs-panel,
.entry-content,
.entry-summary,
.term-description,
.shop-container {
	font-family: var(--s4u-font-main) !important;
	font-weight: 400;
	color: var(--s4u-text-body);
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

p,
.entry-content p,
.product-short-description p,
.woocommerce-tabs .panel p,
.woocommerce-Tabs-panel p {
	line-height: 1.7;
}

li,
.entry-content li,
.woocommerce-tabs .panel li,
.woocommerce-Tabs-panel li {
	line-height: 1.65;
}

/* Chữ phụ */
small,
.small,
.is-small,
.product_meta,
.woocommerce-breadcrumb,
.breadcrumbs,
.breadcrumb,
.posted_in,
.tagged_as,
.woocommerce-result-count,
.shop-page-title .woocommerce-result-count,
.s4u-muted {
	font-family: var(--s4u-font-main) !important;
	font-weight: 400;
	color: var(--s4u-text-muted);
	letter-spacing: 0;
}

/* ============================================================
 * 5. Strong / bold
 * ============================================================ */

strong,
b,
.strong {
	font-weight: 700;
	color: inherit;
}

/* Tránh các class tự bồi quá đậm */
.uppercase,
.breadcrumbs,
.nav-uppercase,
.label,
.badge,
.tag-label {
	letter-spacing: 0;
}

/* ============================================================
 * 6. Header, menu, top bar
 * ============================================================ */

.header,
.header-wrapper,
.header-main,
.header-bottom,
.nav,
.nav > li > a,
.nav-dropdown,
.mobile-sidebar,
.off-canvas {
	font-family: var(--s4u-font-main) !important;
}

.nav > li > a,
.header-main .nav > li > a,
.header-bottom .nav > li > a,
.mobile-sidebar .nav > li > a {
	font-weight: 600 !important;
	letter-spacing: 0;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.header-main .nav > li > a {
	font-size: 13.5px;
}

.header-bottom .nav > li > a {
	font-size: 13px;
}

.nav-dropdown > li > a {
	font-weight: 500 !important;
	letter-spacing: 0;
}

/* ============================================================
 * 7. Button, form, input
 * ============================================================ */

button,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.single_add_to_cart_button {
	font-family: var(--s4u-font-main) !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-shadow: none !important;
}

label,
legend,
.form-row label,
.woocommerce form .form-row label {
	font-family: var(--s4u-font-main) !important;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--s4u-text-strong);
}

input,
select,
textarea,
.woocommerce input,
.woocommerce select,
.woocommerce textarea {
	font-family: var(--s4u-font-main) !important;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--s4u-text-body);
}

input::placeholder,
textarea::placeholder {
	color: var(--s4u-text-soft);
	font-weight: 400;
}

/* ============================================================
 * 8. WooCommerce product card / archive
 * ============================================================ */

.product-small .name,
.product-small .name a,
.woocommerce-loop-product__title,
.box-text-products .product-title,
.box-text .product-title {
	font-family: var(--s4u-font-main) !important;
	font-weight: 600 !important;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--s4u-text-strong);
}

.product-small .category,
.product-small .woocommerce-loop-product__link,
.box-text-products .category {
	font-family: var(--s4u-font-main) !important;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--s4u-text-muted);
}

.price,
.amount,
.woocommerce-Price-amount,
.price-wrapper,
.product-small .price {
	font-family: var(--s4u-font-main) !important;
	font-weight: 700 !important;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

del,
del .amount,
.price del,
.price del .amount {
	font-weight: 500 !important;
	color: var(--s4u-text-soft);
}

.badge,
.badge-inner,
.onsale {
	font-family: var(--s4u-font-main) !important;
	font-weight: 600 !important;
	letter-spacing: 0;
	text-shadow: none !important;
}

/* ============================================================
 * 9. Single product typography
 * ============================================================ */

.single-product .product-title,
.single-product .product-title.entry-title {
	font-family: var(--s4u-font-heading) !important;
	font-weight: 700 !important;
	letter-spacing: -0.018em;
	line-height: 1.25;
	color: var(--s4u-text-strong);
}

.single-product .product-short-description,
.single-product .product-short-description p {
	font-family: var(--s4u-font-main) !important;
	font-weight: 400;
	line-height: 1.65;
	color: var(--s4u-text-body);
}

.single-product .product_meta,
.single-product .product_meta a,
.single-product .posted_in,
.single-product .tagged_as {
	font-family: var(--s4u-font-main) !important;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--s4u-text-muted);
}

.single-product table.variations label,
.single-product .s4u-product-config__label,
.single-product .s4u-product-years__label,
.single-product .s4u-product-qty-label {
	font-family: var(--s4u-font-main) !important;
	font-weight: 600 !important;
	letter-spacing: 0;
	color: var(--s4u-text-muted);
}

.single-product .s4u-product-config__btn,
.single-product .s4u-product-years__btn {
	font-family: var(--s4u-font-main) !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
}

.single-product .s4u-product-config__btn.is-active,
.single-product .s4u-product-years__btn.is-active {
	font-weight: 700 !important;
}

/* ============================================================
 * 10. Box "Khi mua tại SOFT4U"
 * ============================================================ */

.single-product .s4u-product-why__title {
	font-family: var(--s4u-font-heading) !important;
	font-size: 15px;
	font-weight: 700 !important;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--s4u-text-strong);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-shadow: none !important;
}

.single-product .s4u-product-why__text {
	font-family: var(--s4u-font-main) !important;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0;
	color: var(--s4u-text-body);
}

.single-product .s4u-product-why__text strong {
	display: block;
	font-family: var(--s4u-font-main) !important;
	font-size: 14.2px;
	font-weight: 700 !important;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--s4u-text-strong);
	margin-bottom: 2px;
}

/* ============================================================
 * 11. Assurance / trust strip
 * ============================================================ */

.single-product .s4u-product-assure__title {
	font-family: var(--s4u-font-main) !important;
	font-weight: 700 !important;
	letter-spacing: 0;
	color: var(--s4u-text-strong);
}

.single-product .s4u-product-assure__desc {
	font-family: var(--s4u-font-main) !important;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--s4u-text-muted);
}

/* ============================================================
 * 12. Box "Sau khi mua" / "Phù hợp với ai"
 * ============================================================ */

.single-product .s4u-product-box__title {
	font-family: var(--s4u-font-heading) !important;
	font-weight: 700 !important;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--s4u-text-strong);
	text-shadow: none !important;
}

.single-product .s4u-product-box__item {
	font-family: var(--s4u-font-main) !important;
	font-weight: 400;
	line-height: 1.58;
	letter-spacing: 0;
	color: var(--s4u-text-body);
}

/* ============================================================
 * 13. Bảng so sánh
 * ============================================================ */

.single-product .s4u-product-compare__title {
	font-family: var(--s4u-font-heading) !important;
	font-weight: 700 !important;
	line-height: 1.32;
	letter-spacing: -0.01em;
	color: var(--s4u-text-strong);
}

.single-product .s4u-product-compare__table,
.single-product .s4u-product-compare__table th,
.single-product .s4u-product-compare__table td {
	font-family: var(--s4u-font-main) !important;
	letter-spacing: 0;
}

.single-product .s4u-cmp-feat,
.single-product .s4u-cmp-name {
	font-weight: 700 !important;
	color: var(--s4u-text-strong);
}

.single-product .s4u-cmp-sub,
.single-product .s4u-cmp-srlabel,
.single-product .s4u-product-compare__note {
	font-weight: 400;
	color: var(--s4u-text-muted);
}

.single-product .s4u-cmp-tag {
	font-weight: 700 !important;
	letter-spacing: 0.02em;
}

/* ============================================================
 * 14. Tab mô tả dài / đánh giá
 * ============================================================ */

.single-product .woocommerce-tabs,
.single-product .woocommerce-tabs .panel,
.single-product .woocommerce-Tabs-panel {
	font-family: var(--s4u-font-main) !important;
	color: var(--s4u-text-body);
}

.single-product .woocommerce-tabs .tabs li a,
.single-product .tabs.wc-tabs li a {
	font-family: var(--s4u-font-main) !important;
	font-weight: 600 !important;
	letter-spacing: 0;
	text-transform: none;
}

.single-product .woocommerce-tabs .panel h2,
.single-product .woocommerce-Tabs-panel h2 {
	font-family: var(--s4u-font-heading) !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em;
	line-height: 1.35;
	color: var(--s4u-text-strong);
}

.single-product .woocommerce-tabs .panel h3,
.single-product .woocommerce-Tabs-panel h3 {
	font-family: var(--s4u-font-heading) !important;
	font-weight: 700 !important;
	letter-spacing: -0.005em;
	line-height: 1.38;
	color: var(--s4u-text-strong);
}

.single-product .woocommerce-tabs .panel h4,
.single-product .woocommerce-Tabs-panel h4 {
	font-family: var(--s4u-font-heading) !important;
	font-weight: 600 !important;
	letter-spacing: 0;
	line-height: 1.42;
	color: var(--s4u-text-strong);
}

.single-product .woocommerce-tabs .panel p,
.single-product .woocommerce-tabs .panel li,
.single-product .woocommerce-Tabs-panel p,
.single-product .woocommerce-Tabs-panel li {
	font-family: var(--s4u-font-main) !important;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--s4u-text-body);
}

.single-product .woocommerce-tabs .panel strong,
.single-product .woocommerce-Tabs-panel strong {
	font-weight: 700;
	color: var(--s4u-text-strong);
}

/* ============================================================
 * 15. FAQ
 * ============================================================ */

.single-product .s4u-product-faq__title {
	font-family: var(--s4u-font-heading) !important;
	font-size: 20px;
	font-weight: 700 !important;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--s4u-text-strong);
	text-shadow: none !important;
}

.single-product .s4u-product-faq__question {
	font-family: var(--s4u-font-main) !important;
	font-size: 15.5px;
	font-weight: 600 !important;
	line-height: 1.42;
	letter-spacing: 0;
	color: var(--s4u-text-strong);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-shadow: none !important;
}

.single-product .s4u-product-faq__answer {
	font-family: var(--s4u-font-main) !important;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: 0;
	color: var(--s4u-text-body);
}

.single-product .s4u-product-faq__answer strong {
	font-weight: 700;
	color: var(--s4u-text-strong);
}

/* ============================================================
 * 16. Footer
 * ============================================================ */

.footer,
.footer-wrapper,
.absolute-footer,
.footer p,
.footer li,
.footer a,
.footer span,
.absolute-footer p,
.absolute-footer a,
.absolute-footer span {
	font-family: var(--s4u-font-main) !important;
	letter-spacing: 0;
}

.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6,
.footer .widget-title {
	font-family: var(--s4u-font-heading) !important;
	font-weight: 700 !important;
	letter-spacing: 0;
}

.footer p,
.footer li,
.footer a {
	font-weight: 400;
	line-height: 1.6;
}

.absolute-footer {
	font-weight: 400;
}

/* ============================================================
 * 17. Account / checkout / cart
 * ============================================================ */

.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account,
.cart_totals,
.checkout,
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields,
.woocommerce-order,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation {
	font-family: var(--s4u-font-main) !important;
}

.woocommerce-cart h1,
.woocommerce-cart h2,
.woocommerce-cart h3,
.woocommerce-checkout h1,
.woocommerce-checkout h2,
.woocommerce-checkout h3,
.woocommerce-account h1,
.woocommerce-account h2,
.woocommerce-account h3 {
	font-family: var(--s4u-font-heading) !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em;
}

.shop_table th,
.shop_table td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	font-family: var(--s4u-font-main) !important;
	letter-spacing: 0;
}

.shop_table th,
.woocommerce-checkout-review-order-table th {
	font-weight: 600 !important;
	color: var(--s4u-text-strong);
}

.shop_table td,
.woocommerce-checkout-review-order-table td {
	font-weight: 400;
	color: var(--s4u-text-body);
}

/* ============================================================
 * 18. Responsive typography
 * ============================================================ */

@media only screen and (max-width: 849px) {
	body {
		font-size: 15px;
	}

	h1,
	.h1,
	.product-title.entry-title {
		line-height: 1.26;
		letter-spacing: -0.015em;
	}

	h2,
	.h2 {
		line-height: 1.3;
	}

	.single-product .product-title,
	.single-product .product-title.entry-title {
		font-size: 21px;
		line-height: 1.28;
	}

	.single-product .s4u-product-faq__question {
		font-size: 14.5px;
		font-weight: 600 !important;
	}

	.single-product .s4u-product-faq__answer {
		font-size: 14px;
		line-height: 1.6;
	}

	.single-product .s4u-product-why__text {
		font-size: 13.8px;
	}

	.single-product .s4u-product-why__text strong {
		font-size: 14px;
	}
}

@media only screen and (max-width: 48em) {
	/*************** ADD MOBILE ONLY CSS HERE  ***************/

	body {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.nav > li > a,
	.mobile-sidebar .nav > li > a {
		font-weight: 600 !important;
		letter-spacing: 0;
	}

	button,
	.button,
	input[type="submit"],
	.single_add_to_cart_button {
		font-weight: 600 !important;
		letter-spacing: 0 !important;
	}
}