/* =====================================================================
   NexPC – CSS bổ sung ngoài Tailwind utilities
   ===================================================================== */

body { overflow-x: clip; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid #2F6BEA; outline-offset: 2px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.custom-logo-link { display: flex; flex-shrink: 0; }
.custom-logo, .custom-logo-link img.custom-logo { height: 40px; width: auto; }

/* ---------- Dropdown / mega menu ---------- */
.dropdown-panel { opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.has-dropdown:hover > .dropdown-panel,
.has-dropdown:focus-within > .dropdown-panel { opacity: 1; visibility: visible; transform: none; }

/* ---------- Mega menu "Danh mục sản phẩm" ---------- */
.cat-flyout { display: none; }
.cat-item:hover > .cat-flyout,
.cat-item:focus-within > .cat-flyout,
.cat-list:not(:hover):not(:focus-within) > .is-default > .cat-flyout { display: block; }
.cat-item:hover > a,
.cat-item:focus-within > a,
.cat-list:not(:hover):not(:focus-within) > .is-default > a { background: #EEF4FF; color: #1D57D8; }
.cat-item:hover > a > span > i,
.cat-item:focus-within > a > span > i,
.cat-list:not(:hover):not(:focus-within) > .is-default > a > span > i { color: #1D57D8; }

/* ---------- Header khi cuộn ---------- */
#site-header.is-scrolled { box-shadow: 0 6px 20px -12px rgba(15, 23, 42, .25); }

/* ---------- Drawer mobile ---------- */
#mobile-drawer { transform: translateX(-100%); transition: transform .3s ease; }
#mobile-drawer.is-open { transform: none; }
#drawer-overlay { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
#drawer-overlay.is-open { opacity: 1; visibility: visible; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(180deg); }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* ---------- Fade-in khi cuộn (chỉ khi có JS) ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Nút thêm vào giỏ (AJAX WooCommerce) ---------- */
.added_to_cart.wc-forward { display: none !important; }
.nexpc-atc.loading { opacity: .6; pointer-events: none; }
.nexpc-atc.is-added { background: #1D57D8 !important; color: #fff !important; }

/* ---------- Phân trang ---------- */
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 2.5rem; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem;
	padding: 0 .75rem; border: 1px solid #E2E8F0; border-radius: .75rem; background: #fff; font-weight: 600; color: #334155;
}
.pagination .page-numbers.current,
.pagination a.page-numbers:hover { background: #1D57D8; border-color: #1D57D8; color: #fff; }

/* ---------- Nội dung bài viết / trang ---------- */
.entry-content { color: #334155; font-size: 1.0625rem; line-height: 1.8; }
.entry-content > * + * { margin-top: 1.25em; }
.entry-content h2 { margin-top: 2em; font-size: 1.5rem; line-height: 1.3; font-weight: 800; color: #0A1F44; }
.entry-content h3 { margin-top: 1.75em; font-size: 1.25rem; line-height: 1.35; font-weight: 700; color: #0A1F44; }
.entry-content h4 { margin-top: 1.5em; font-weight: 700; color: #0A1F44; }
.entry-content a { color: #1D57D8; text-decoration: underline; text-underline-offset: 3px; }
.entry-content ul { list-style: disc; padding-left: 1.4em; }
.entry-content ol { list-style: decimal; padding-left: 1.4em; }
.entry-content li + li { margin-top: .4em; }
.entry-content img { height: auto; border-radius: 1rem; }
.entry-content figcaption { margin-top: .5rem; font-size: .875rem; color: #64748B; text-align: center; }
.entry-content blockquote { border-left: 4px solid #B9CFFD; padding-left: 1rem; color: #475569; font-style: italic; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.entry-content th, .entry-content td { border: 1px solid #E2E8F0; padding: .6rem .8rem; text-align: left; }
.entry-content th { background: #F8FAFC; font-weight: 600; }
.entry-content code { background: #EEF4FF; padding: .1em .35em; border-radius: .35rem; font-size: .9em; }
.post-tags a, .entry-content + div a[rel="tag"], a[rel="tag"] {
	display: inline-block; padding: .25rem .75rem; border-radius: 9999px; background: #F1F5F9; color: #334155;
}

/* ---------- WooCommerce: đồng bộ màu & chữ với theme ---------- */
.woocommerce-products-header { margin-bottom: 1.5rem; }
.woocommerce .page-title,
.woocommerce-products-header__title,
.woocommerce div.product .product_title {
	font-size: 1.875rem; line-height: 1.2; font-weight: 800; color: #0A1F44; letter-spacing: -.01em;
}
.woocommerce .term-description { margin-top: .5rem; color: #64748B; }
.woocommerce .woocommerce-result-count { color: #64748B; font-size: .9rem; margin-bottom: 1.25rem; }
.woocommerce .woocommerce-ordering { margin-bottom: 1.25rem; }
/* Lưới sản phẩm nằm dưới "kết quả" + "sắp xếp" (2 phần tử float), không bị ép vào giữa. */
.nexpc-products { clear: both; }
@media (max-width: 639px) {
	.woocommerce .woocommerce-ordering { float: none; margin-left: 0; margin-right: 0; }
	.woocommerce .woocommerce-ordering select { width: 100%; }
}
.woocommerce .woocommerce-ordering select {
	height: 2.5rem; padding: 0 2rem 0 .75rem; border: 1px solid #E2E8F0; border-radius: .75rem; background-color: #fff;
}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
	border-radius: .75rem; font-weight: 600;
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #respond input#submit.alt, .woocommerce .single_add_to_cart_button {
	background-color: #1D57D8 !important; color: #fff !important;
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover { background-color: #1746B0 !important; }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: #1D57D8; font-size: 1.5rem; font-weight: 700; }
.woocommerce div.product p.price del { color: #94A3B8; font-size: 1rem; font-weight: 400; }
.woocommerce span.onsale {
	min-width: auto; min-height: auto; padding: .4rem .6rem; border-radius: .5rem; line-height: 1;
	background: #E11D48; font-size: .75rem;
}
.woocommerce .related > h2, .woocommerce .upsells > h2, .woocommerce .cross-sells > h2 {
	margin: 2.5rem 0 1.25rem; font-size: 1.5rem; font-weight: 800; color: #0A1F44;
}
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: .75rem; }
.woocommerce div.product .woocommerce-tabs .panel { color: #334155; line-height: 1.75; }
.woocommerce-message, .woocommerce-info { border-top-color: #1D57D8; }
.woocommerce-message::before, .woocommerce-info::before { color: #1D57D8; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select { border: 1px solid #E2E8F0; border-radius: .6rem; padding: .6rem .75rem; }
.woocommerce nav.woocommerce-pagination ul { border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0 .2rem; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 2.5rem; padding: .6rem .8rem; border: 1px solid #E2E8F0; border-radius: .75rem; background: #fff;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover { background: #1D57D8; border-color: #1D57D8; color: #fff; }

/* ---------- Giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.js .reveal { opacity: 1; transform: none; }
	html { scroll-behavior: auto; }
}