/*
Theme Name: HatXop
Theme URI: https://hatxop.net
Author: hatxop.net
Author URI: https://hatxop.net
Description: Theme WordPress cho hatxop.net - Hat Xop Nhu Phuong. Giao dien landing page XANH DA TROI (hero gradient xanh, may tinh khoi luong, bang gia, bang size), block bai viet, MODULE DAT HANG ONLINE (luu don vao admin, quan ly don hang, copy don nhan Zalo nhanh, goi y gui Zalo khi shop phan hoi cham) va KENH THEO DOI FACEBOOK chinh thuc (khoi trang chu, ray lien he, footer, sidebar + sameAs schema).
Version: 1.4.1
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hatxop
Tags: business, e-commerce, custom-menu, custom-logo, featured-images, translation-ready, blog
*/

/* ==========================================================================
   1. Style gốc của bản thiết kế (giữ nguyên để đúng thiết kế)
   ========================================================================== */
.hero-gradient { background: linear-gradient(135deg, #0284c7 0%, #0369a1 50%, #0c4a6e 100%); }
.zalo-btn { background-color: #0068ff; transition: all 0.3s ease; }
.zalo-btn:hover { background-color: #0052cc; transform: translateY(-2px); }

/* ==========================================================================
   2. Bổ sung cho WordPress (menu, dropdown, phân trang, bài viết...)
   ========================================================================== */

/* 2.1 Fix các class WordPress mặc định */
.alignleft { float: left; margin: 0 1.5em .75em 0; }
.alignright { float: right; margin: 0 0 .75em 1.5em; }
.aligncenter { display: block; margin: .75em auto; }
.wp-caption { max-width: 100%; }
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px; overflow: hidden;
}
img { max-width: 100%; height: auto; }

/* 2.2 Menu header: hỗ trợ menu đầy đủ + dropdown nhiều cấp */
.hx-nav ul { list-style: none; margin: 0; padding: 0; }
.hx-nav > ul,
.hx-nav .menu { display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap; }
.hx-nav .menu > li { position: relative; }
.hx-nav .menu > li > a {
	display: block;
	font-weight: 600;
	font-size: .875rem;
	color: #475569;
	padding: .35rem 0;
	text-decoration: none;
	transition: color .2s ease;
}
.hx-nav .menu > li > a:hover,
.hx-nav .menu > li.current-menu-item > a,
.hx-nav .menu > li.current-menu-parent > a,
.hx-nav .menu > li.current_page_item > a { color: #0284c7; }

/* Dropdown */
.hx-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 250px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: .85rem;
	box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .25);
	padding: .5rem;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all .2s ease;
	z-index: 999;
}
.hx-nav .menu > li:hover > .sub-menu,
.hx-nav .menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(4px); }
.hx-nav .sub-menu li { position: relative; }
.hx-nav .sub-menu a {
	display: block;
	padding: .5rem .75rem;
	border-radius: .5rem;
	font-size: .8125rem;
	font-weight: 500;
	color: #334155;
	text-decoration: none;
	white-space: normal;
	line-height: 1.35;
}
.hx-nav .sub-menu a:hover { background: #f0f9ff; color: #0369a1; }
.hx-nav .sub-menu .sub-menu { top: -.5rem; left: 100%; }

/* 2.3 Menu mobile */
.hx-mobile-menu { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.hx-mobile-menu.is-open { max-height: 80vh; overflow-y: auto; }
.hx-mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.hx-mobile-menu .sub-menu { padding-left: 1rem; }
.hx-mobile-menu a {
	display: block;
	padding: .65rem .25rem;
	font-weight: 600;
	color: #334155;
	text-decoration: none;
	border-bottom: 1px solid #f1f5f9;
}

/* 2.4 Thanh liên hệ nhanh (hotline - Zalo - đặt hàng): xem .hx-sc trong assets/css/hatxop.css */

/* 2.5 Nội dung bài viết (single) */
.hx-entry { color: #334155; font-size: 1.05rem; line-height: 1.85; }
.hx-entry h2, .hx-entry h3, .hx-entry h4 { color: #0f172a; font-weight: 800; margin: 1.6em 0 .6em; line-height: 1.35; }
.hx-entry h2 { font-size: 1.55rem; }
.hx-entry h3 { font-size: 1.3rem; }
.hx-entry p { margin: 0 0 1.1em; }
.hx-entry a { color: #0284c7; text-decoration: underline; }
.hx-entry ul, .hx-entry ol { margin: 0 0 1.1em 1.25em; }
.hx-entry ul { list-style: disc; }
.hx-entry ol { list-style: decimal; }
.hx-entry li { margin-bottom: .45em; }
.hx-entry img { border-radius: .75rem; }
.hx-entry blockquote {
	border-left: 4px solid #38bdf8;
	background: #f0f9ff;
	padding: 1rem 1.25rem;
	border-radius: 0 .75rem .75rem 0;
	font-style: italic;
	margin: 1.5em 0;
}
.hx-entry table { width: 100%; border-collapse: collapse; margin: 1.25em 0; font-size: .95rem; }
.hx-entry th, .hx-entry td { border: 1px solid #e2e8f0; padding: .625rem .75rem; text-align: left; }
.hx-entry th { background: #f8fafc; font-weight: 700; }
.hx-entry figure { margin: 1.25em 0; }

/* 2.6 Bảng giá / bảng size responsive */
.hx-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 2.7 Phân trang */
.hx-pagination { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 2.5rem; }
.hx-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 .75rem;
	border-radius: .75rem;
	background: #fff;
	border: 1px solid #e2e8f0;
	color: #475569;
	font-weight: 700;
	text-decoration: none;
}
.hx-pagination .page-numbers.current,
.hx-pagination .page-numbers:hover { background: #0284c7; border-color: #0284c7; color: #fff; }

/* 2.8 Box kết quả đặt hàng */
.hx-order-result { animation: hxFade .35s ease; }
@keyframes hxFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hx-pulse { animation: hxPulse 1.8s ease-in-out infinite; }
@keyframes hxPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .55); } 50% { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0); } }

/* 2.9 Admin: cột đơn hàng + box nội dung Zalo */
.hx-admin-copy { cursor: pointer; }
.hx-zalo-box { width: 100%; min-height: 190px; font-family: monospace; font-size: 12px; line-height: 1.6; }
.hx-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }