/* ==========================================================================
   THEME REFRESH — làm mới màu sắc / font chữ / spacing cho toàn site.
   File này chỉ ĐÈ lên các biến CSS (--color-*, --font-*) mà theme gốc đã
   khai báo sẵn trong css/style.css, không sửa trực tiếp file gốc — an toàn,
   dễ chỉnh sửa lại sau này, và không phá layout hiện tại.
   ========================================================================== */

:root {
	/* ---- Màu chủ đạo: xanh dương hiện đại + đỏ cam làm điểm nhấn ---- */
	--color-content-primary: #2563eb;
	--color-content-primary-grad: linear-gradient(135deg, #2563eb, #f43f5e);
	--color-content-secondary: #f43f5e;
	--color-content-secondary-grad: linear-gradient(135deg, #f43f5e, #2563eb);
	--color-content-primary-faded: rgba(37, 99, 235, 0.12);

	--color-content-link: #2563eb;
	--color-content-link-hover: #f43f5e;
	--color-alt-content-link: #2563eb;
	--color-alt-content-link-hover: #f43f5e;
	--color-alt-content-primary: #2563eb;
	--color-alt-content-primary-grad: linear-gradient(135deg, #2563eb, #f43f5e);
	--color-alt-content-secondary: #f43f5e;
	--color-alt-content-secondary-grad: linear-gradient(135deg, #f43f5e, #2563eb);

	/* ---- Chữ: đậm, sắc nét hơn thay cho xám phẳng cũ ---- */
	--color-content-heading: #0f172a;
	--color-content-heading-grad: #0f172a;
	--color-content-text: #334155;
	--color-content-faded: #64748b;
	--color-alt-content-heading: #0f172a;
	--color-alt-content-heading-grad: #0f172a;
	--color-alt-content-text: #334155;
	--color-alt-content-faded: #64748b;

	/* ---- Nền: trắng/xám nhạt tươi hơn ---- */
	--color-content-bg-alt: #f8fafc;
	--color-content-bg-alt-grad: #f8fafc;
	--color-content-border: #e2e8f0;
	--color-alt-content-bg: #f8fafc;
	--color-alt-content-bg-grad: #f8fafc;
	--color-alt-content-border: #e2e8f0;

	/* ---- Footer: giữ tối nhưng đồng bộ tông xanh mới ---- */
	--color-footer-link-hover: #2563eb;
	--color-subfooter-link-hover: #2563eb;

	/* ---- Font chữ: đổi từ Roboto/Arial sang Be Vietnam Pro (tối ưu tiếng Việt, trông hiện đại hơn) ---- */
	--font-body: 'Be Vietnam Pro', 'Roboto', sans-serif;
	--font-h1: 'Be Vietnam Pro', sans-serif;
	--font-h2: 'Be Vietnam Pro', sans-serif;
	--font-h3: 'Be Vietnam Pro', sans-serif;
	--font-h4: 'Be Vietnam Pro', sans-serif;
	--font-h5: 'Be Vietnam Pro', sans-serif;

	/* ---- Input/nút bấm: cao hơn 1 chút, thoáng hơn ---- */
	--inputs-height: 3rem;
	--inputs-padding: 1rem;
}

/* ---- Spacing & bo góc hiện đại cho nút bấm, thẻ, ảnh sản phẩm ---- */
body {
	line-height: 1.65;
}

.button,
.woocommerce-Button,
.checkout-button,
input[type="submit"],
.w-btn,
.dropbtn {
	border-radius: 8px !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease !important;
}

.button:hover,
.woocommerce-Button:hover,
.checkout-button:hover,
input[type="submit"]:hover,
.w-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(37, 99, 235, 0.18);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
	border-radius: 8px !important;
}

/* Ảnh sản phẩm / card bo góc mềm hơn cho hiện đại */
.w-post-elm.post_thumbnail img,
.woocommerce-loop-product__title,
.w-grid-item-h {
	border-radius: 10px;
}

/* Bảng trong admin panel & các trang quản lý cho thoáng, dễ đọc hơn - phần bo
   góc/màu sắc chi tiết đã chuyển xuống khối CSS "Nâng cấp giao diện các bảng
   quản lý" phía dưới, tránh xung đột 2 nơi cùng định nghĩa. */

/* Badge / mã đơn hàng, mã tài khoản trông hiện đại hơn (bo tròn, letter-spacing) */
.table-container td b {
	letter-spacing: 0.5px;
}

/* ---- Sidebar admin panel: icon có khung tròn, khoảng cách thoáng, hover mượt ---- */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.woocommerce-MyAccount-navigation-link {
	margin-bottom: 6px;
}

.woocommerce-MyAccount-navigation-link a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-radius: 8px;
	color: #334155;
	font-weight: 500;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.woocommerce-MyAccount-navigation-link a i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: rgba(37, 99, 235, 0.1);
	color: #2563eb;
	font-size: 14px;
	flex-shrink: 0;
}

.woocommerce-MyAccount-navigation-link a:hover {
	background: rgba(37, 99, 235, 0.06);
	transform: translateX(2px);
}

.woocommerce-MyAccount-navigation-link.is-active a {
	background: #2563eb;
	color: #fff;
}

.woocommerce-MyAccount-navigation-link.is-active a i {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

/* ===== Nâng cấp giao diện các bảng quản lý trong Admin Panel (đơn hàng, thành
   viên, sản phẩm, phân loại) - chỉ chỉnh CSS, không đụng cấu trúc HTML/JS ===== */
.table-container,
table.scrollable-table {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 14px;
	overflow-x: auto;
	box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.table-container table,
table.scrollable-table {
	width: 100%;
	border-collapse: collapse;
}
.table-container table thead th,
table.scrollable-table thead th {
	background: #f8fafc;
	color: #374151;
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	padding: 14px 16px;
	border-bottom: 1px solid #eee;
	white-space: nowrap;
}
.table-container table tbody td,
table.scrollable-table tbody td {
	padding: 12px 16px;
	font-size: 14px;
	border-bottom: 1px solid #f1f5f9;
	vertical-align: middle;
}
.table-container table tbody tr:last-child td,
table.scrollable-table tbody tr:last-child td {
	border-bottom: none;
}
.table-container table tbody tr:hover,
table.scrollable-table tbody tr:hover {
	background: #fafbfc;
}
.table-container table tbody td input:not([type="checkbox"]),
.table-container table tbody td select,
.table-container table tbody td textarea,
table.scrollable-table tbody td input:not([type="checkbox"]),
table.scrollable-table tbody td select,
table.scrollable-table tbody td textarea {
	border: 1px solid #e2e8f0 !important;
	border-radius: 6px !important;
	padding: 7px 10px !important;
	font-size: 13px !important;
	transition: border-color 0.15s ease;
}
.table-container table tbody td input:not([type="checkbox"]):focus,
.table-container table tbody td select:focus,
table.scrollable-table tbody td input:not([type="checkbox"]):focus,
table.scrollable-table tbody td select:focus {
	outline: none;
	border-color: #2563eb !important;
}

/* Nút hành động trong bảng quản lý (Sửa/Xoá/Cập nhật...) */
.table-container .checkout-button,
.table-container .w-btn.us-btn-style_5,
table.scrollable-table .checkout-button,
table.scrollable-table .w-btn.us-btn-style_5 {
	border-radius: 6px !important;
	font-size: 12.5px !important;
	padding: 7px 14px !important;
	border: none !important;
	transition: opacity 0.15s ease, transform 0.1s ease;
}
.table-container .checkout-button:hover,
.table-container .w-btn.us-btn-style_5:hover,
table.scrollable-table .checkout-button:hover,
table.scrollable-table .w-btn.us-btn-style_5:hover {
	opacity: 0.88;
}

/* Ô tìm kiếm / bộ lọc phía trên các bảng quản lý */
.admin-panel-content input[type="text"].search-input,
.admin-panel-content input[type="search"] {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 10px 14px;
}

/* ===== Nâng cấp giao diện trang chủ - tiêu đề từng khu vực (Sản phẩm nổi
   bật, Bài viết, theo danh mục...) hiện đại hơn: đậm hơn, có gạch nhấn màu
   gradient bên trái. CHỈ nhắm vào class us_custom_headling (đã xác nhận
   không bị style gốc nào có !important đè lên, an toàn tuyệt đối). ===== */
h3.us_custom_headling {
	position: relative;
	padding-left: 18px !important;
	font-weight: 800 !important;
	letter-spacing: -0.01em;
}
h3.us_custom_headling:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.15em;
	bottom: 0.15em;
	width: 5px;
	border-radius: 4px;
	background: linear-gradient(180deg, #2563eb, #7c3aed);
}
h3.us_custom_headling a {
	color: inherit !important;
}

/* ===== Nâng cấp giao diện trang xem sản phẩm (san-pham.php) - chỉ chỉnh CSS
   và 1 class trạng thái an toàn, không đụng logic mua hàng/chọn phân loại ===== */

/* Nút chọn phân loại - kiểu pill hiện đại, có trạng thái đang chọn rõ ràng */
.sku_select.w-btn {
	background: #fff !important;
	color: #374151 !important;
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 999px !important;
	padding: 9px 18px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	transition: all 0.15s ease;
	box-shadow: none !important;
}
.sku_select.w-btn:hover {
	border-color: #2563eb !important;
	color: #2563eb !important;
}
.sku_select.w-btn.sku_selected {
	background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 4px 12px rgba(37,99,235,0.25) !important;
}
.sku_select.w-btn.sku_out_of_stock {
	background: #f3f4f6 !important;
	color: #9ca3af !important;
	border-color: #e5e7eb !important;
	cursor: not-allowed !important;
	opacity: 1 !important;
}
.sku_select.w-btn.sku_out_of_stock em {
	font-style: normal;
	font-size: 12px;
}

/* Giá sản phẩm - nổi bật, hiện đại hơn. Luôn có "color" dự phòng trước, để
   nếu trình duyệt không hỗ trợ hiệu ứng gradient chữ thì giá vẫn hiện bình
   thường (màu xanh) thay vì bị ẩn mất hoàn toàn. */
#skuPrice {
	font-size: 26px !important;
	color: #2563eb;
	background: linear-gradient(135deg, #2563eb, #7c3aed);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Bộ chọn số lượng */
.quantity_selector {
	border-radius: 8px !important;
	border-color: #e2e8f0 !important;
}
.quantity_selector button {
	transition: background 0.15s ease;
}
.quantity_selector button:hover {
	background: #eef2ff !important;
}

/* Nút Mua ngay */
.ajax_buy.single_add_to_cart_button {
	border-radius: 8px !important;
	padding: 13px 26px !important;
	font-weight: 700 !important;
	box-shadow: 0 4px 14px rgba(37,99,235,0.28);
	transition: opacity 0.15s ease, transform 0.1s ease;
}
.ajax_buy.single_add_to_cart_button:hover {
	opacity: 0.92;
	transform: translateY(-1px);
}
/* Nút Thêm vào yêu thích - chỉ chỉnh bo góc, KHÔNG đụng màu nền/màu chữ để
   tránh xung đột với style gốc của theme (đã từng gây mất nút do trùng độ
   ưu tiên !important với CSS gốc) */
.ajax_add_to_favorites.single_add_to_cart_button {
	border-radius: 8px !important;
}

/* Từ khóa sản phẩm - kiểu chip hiện đại */
.post_taxonomy.style_simple a {
	display: inline-block;
	background: #f3f4f6;
	color: #4b5563 !important;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12.5px;
	margin: 2px 3px 2px 0;
	transition: background 0.15s ease;
}
.post_taxonomy.style_simple a:hover {
	background: #e5e7eb;
}

/* Badge kho hàng còn lại */
#skuTotal {
	background: #f0fdf4;
	color: #16a34a;
	padding: 2px 10px;
	border-radius: 999px;
	font-weight: 700;
}

/* ===== Nâng cấp trang chi tiết bài viết (blog.php) - chữ dễ đọc hơn, ảnh
   bo góc, và khung từ khóa dạng chip hiện đại. Không đụng tới các class
   usg_* của khối "bài viết liên quan" phía dưới để tránh xung đột. ===== */
.w-post-elm.post_content {
	font-size: 16.5px;
	line-height: 1.85;
	color: #334155;
}
.w-post-elm.post_content p {
	margin-bottom: 1.2em;
}
.w-post-elm.post_content img {
	border-radius: 10px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.w-post-elm.post_content h2,
.w-post-elm.post_content h3 {
	font-weight: 800;
	margin-top: 1.6em;
}
.w-post-elm.post_image.stretched img {
	border-radius: 14px;
}
.blog_tags_wrap {
	margin: 24px 0;
	padding-top: 20px;
	border-top: 1px solid #eee;
	font-size: 14px;
	color: #6b7280;
}
.blog_tags_wrap strong {
	margin-right: 6px;
	color: #374151;
}
.blog_tag_chip {
	display: inline-block;
	background: #f3f4f6;
	color: #4b5563 !important;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12.5px;
	margin: 2px 3px;
	transition: background 0.15s ease;
}
.blog_tag_chip:hover {
	background: #e2e8f0;
}