/*
 * Mạnh An Service — Theme CSS
 * Không framework, không thư viện ngoài. Chỉ CSS native bổ sung cho theme.json.
 */

/* -----------------------------------------------------------------------
   MÀU NỘI BỘ (không hiển thị trong bảng chọn màu Block Editor)
   Bảng màu (settings.color.palette) chỉ để lại "primary"/"secondary" cho
   người dùng chọn. Các màu trung tính/kỹ thuật dưới đây vẫn cần cho giao
   diện mặc định (nền, viền, chữ) nên được khai báo thẳng bằng CSS thay vì
   qua palette. primary-dark/primary-light tự tính từ primary bằng
   color-mix() nên luôn khớp khi đổi Màu chính trong Cài đặt giao diện.
   ----------------------------------------------------------------------- */

:root {
	--wp--preset--color--white: #FFFFFF;
	--wp--preset--color--neutral-dark: #111928;
	--wp--preset--color--neutral-medium: #4B5563;
	--wp--preset--color--neutral-light: #F3F4F6;
	--wp--preset--color--primary-dark: color-mix(in srgb, var(--wp--preset--color--primary) 80%, black);
	--wp--preset--color--primary-light: color-mix(in srgb, var(--wp--preset--color--primary) 15%, white);
}

.has-white-color { color: var(--wp--preset--color--white) !important; }
.has-white-background-color { background-color: var(--wp--preset--color--white) !important; }
.has-white-border-color { border-color: var(--wp--preset--color--white) !important; }
.has-neutral-dark-color { color: var(--wp--preset--color--neutral-dark) !important; }
.has-neutral-dark-background-color { background-color: var(--wp--preset--color--neutral-dark) !important; }
.has-neutral-dark-border-color { border-color: var(--wp--preset--color--neutral-dark) !important; }
.has-neutral-medium-color { color: var(--wp--preset--color--neutral-medium) !important; }
.has-neutral-medium-background-color { background-color: var(--wp--preset--color--neutral-medium) !important; }
.has-neutral-medium-border-color { border-color: var(--wp--preset--color--neutral-medium) !important; }
.has-neutral-light-color { color: var(--wp--preset--color--neutral-light) !important; }
.has-neutral-light-background-color { background-color: var(--wp--preset--color--neutral-light) !important; }
.has-neutral-light-border-color { border-color: var(--wp--preset--color--neutral-light) !important; }
.has-primary-dark-color { color: var(--wp--preset--color--primary-dark) !important; }
.has-primary-dark-background-color { background-color: var(--wp--preset--color--primary-dark) !important; }
.has-primary-light-color { color: var(--wp--preset--color--primary-light) !important; }
.has-primary-light-background-color { background-color: var(--wp--preset--color--primary-light) !important; }

/* -----------------------------------------------------------------------
   RESET & BASE
   ----------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

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

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

/* -----------------------------------------------------------------------
   HEADER
   ----------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--wp--preset--color--neutral-light);
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.04);
}

/* -----------------------------------------------------------------------
   NAVIGATION
   ----------------------------------------------------------------------- */

.wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.25rem;
	transition: color 0.15s ease;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--white);
}

/* -----------------------------------------------------------------------
   CONTEÚDO PRINCIPAL
   ----------------------------------------------------------------------- */

.entry-content {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.8;
}

.entry-content > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: var(--wp--preset--spacing--60);
}

.entry-content a:not(.wp-element-button) {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.entry-content a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

.entry-content ul,
.entry-content ol {
	padding-inline-start: 1.5rem;
}

.entry-content li + li {
	margin-top: 0.375rem;
}

.entry-content blockquote {
	margin-inline: 0;
	padding: 1rem 1.5rem;
	border-left: 4px solid var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary-light);
	border-radius: 0 6px 6px 0;
	font-style: italic;
}

.entry-content code {
	padding: 0.125rem 0.375rem;
	background-color: var(--wp--preset--color--neutral-light);
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--sm);
}

.entry-content pre {
	padding: 1.25rem 1.5rem;
	background-color: var(--wp--preset--color--neutral-dark);
	color: var(--wp--preset--color--neutral-light);
	border-radius: 8px;
	overflow-x: auto;
}

.entry-content pre code {
	background: none;
	padding: 0;
	color: inherit;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--sm);
}

.entry-content th,
.entry-content td {
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--wp--preset--color--neutral-light);
	text-align: left;
}

.entry-content th {
	background-color: var(--wp--preset--color--neutral-light);
	font-weight: 600;
}

.entry-content tr:hover td {
	background-color: var(--wp--preset--color--primary-light);
}

/* -----------------------------------------------------------------------
   BUTTONS — Biến thể outline (đăng ký qua block style API)
   ----------------------------------------------------------------------- */

.is-style-manhan-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
}

.is-style-manhan-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* -----------------------------------------------------------------------
   SEPARATOR — Biến thể thick
   ----------------------------------------------------------------------- */

.is-style-manhan-thick.wp-block-separator {
	border-width: 3px;
}

/* -----------------------------------------------------------------------
   POST LISTING (index.html)
   ----------------------------------------------------------------------- */

.wp-block-post-template article {
	padding-bottom: var(--wp--preset--spacing--60);
	border-bottom: 1px solid var(--wp--preset--color--neutral-light);
}

.wp-block-post-template article:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.wp-block-post-featured-image img {
	border-radius: 8px;
	transition: opacity 0.2s ease;
}

.wp-block-post-featured-image a:hover img {
	opacity: 0.9;
}

/* -----------------------------------------------------------------------
   PAGINATION
   ----------------------------------------------------------------------- */

.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding-inline: 0.5rem;
	border: 1px solid var(--wp--preset--color--neutral-light);
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--preset--color--neutral-dark);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* -----------------------------------------------------------------------
   COMMENTS
   ----------------------------------------------------------------------- */

.wp-block-comments {
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--neutral-light);
}

.wp-block-post-comments-form input,
.wp-block-post-comments-form textarea {
	width: 100%;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--wp--preset--color--neutral-light);
	border-radius: 6px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-post-comments-form input:focus,
.wp-block-post-comments-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent);
}

.wp-block-post-comments-form .submit {
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 1.5rem;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: 6px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.wp-block-post-comments-form .submit:hover {
	background-color: var(--wp--preset--color--primary-dark);
}

/* -----------------------------------------------------------------------
   FOOTER
   ----------------------------------------------------------------------- */

.site-footer a,
.manhan-site-footer a {
	text-decoration: none;
}

.site-footer a:hover,
.manhan-site-footer a:hover {
	text-decoration: none;
}

/* Footer Builder output */
.manhan-site-footer {
	width: 100%;
	display: block;
}

/* -----------------------------------------------------------------------
   ACCESSIBILITY — Focus visible
   ----------------------------------------------------------------------- */

:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 3px;
}

/* -----------------------------------------------------------------------
   SKIP LINK
   ----------------------------------------------------------------------- */

.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 9999;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
}

/* -----------------------------------------------------------------------
   WOOCOMMERCE — Danh mục sản phẩm dạng cây, thu gọn mục con
   Mục cha luôn hiện; bấm mũi tên mới xổ mục con — tái dùng đúng kiểu nút
   .manhan-mobile-submenu-toggle / .toggle-arrow đã có sẵn ở menu di động.
   ----------------------------------------------------------------------- */

.wc-block-product-categories-list {
	list-style: none;
	margin: 0;
	padding-left: 10px;
}

.wc-block-product-categories-list-item {
	position: relative;
}

.wc-block-product-categories-list-item > a {
	display: inline-block;
}

.manhan-cat-toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Mũi tên tam giác to hơn (gấp 2 lần mặc định) — áp dụng chung cho menu di động
   và danh mục sản phẩm vì cả 2 đều dùng chung class .toggle-arrow */
.toggle-arrow {
	font-size: 2rem;
	line-height: 1;
}

/* Mỗi dòng danh mục có gạch ngăn cách trên/dưới — giống hệt kiểu menu di động
   (.manhan-mobile-menu li { border-bottom: 1px solid #f0f0f0; }) */
.wc-block-product-categories-list-item {
	border-bottom: 1px solid #f0f0f0;
}

/* -----------------------------------------------------------------------
   WOOCOMMERCE — Nhãn giảm giá (%) tự lấy màu chính của site
   ----------------------------------------------------------------------- */

/* Huy hiệu giảm giá của WooCommerce Blocks (lưới sản phẩm/shop) — đồng bộ
   hình tròn + vị trí góc trên-trái với huy hiệu trang chi tiết sản phẩm (.onsale) */
.wc-block-components-product-sale-badge {
	top: -10px !important;
	left: -10px !important;
	right: auto !important;
	background-color: var(--wp--preset--color--primary) !important;
	border: none !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px;
	min-height: 56px;
	padding: 0 !important;
}

.wc-block-components-product-sale-badge__text {
	color: var(--wp--preset--color--white) !important;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	/* Ẩn sẵn để tránh nháy chữ "Khuyến mại" gốc trước khi JS đổi thành -%.
	   JS sẽ trả lại visibility:visible ngay sau khi đổi chữ xong. */
	visibility: hidden;
}

.onsale {
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--white) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	min-height: 56px !important;
	padding: 0 !important;
	margin: 0;
	border-radius: 50% !important;
	font-size: 14px !important;
	line-height: 1 !important;
	white-space: nowrap;
}

.wc-block-product-categories-list-item > ul[class*="--depth-"] {
	list-style: none;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease;
	margin: 4px 0 0 10px;
	padding-left: 10px;
	border-left: 2px solid var(--wp--preset--color--neutral-light);
}

/* -----------------------------------------------------------------------
   PRINT — Loại bỏ phần trang không cần khi in
   ----------------------------------------------------------------------- */

@media print {
	.site-header,
	.site-footer,
	.post-navigation,
	.wp-block-comments {
		display: none;
	}

	.entry-content {
		font-size: 12pt;
		line-height: 1.6;
		color: #000;
	}
}