/* ==========================================================================
   PremiumKey — theme indigo / cyan, dựng trên nền Bootstrap 5. Biến màu --pk-*
   có bản tối ở [data-theme="dark"] (nút đổi giao diện ở header, xem app.js).
   Component mới của PremiumKey (lưới nhà cung cấp, thẻ gói, trang key...) nằm
   ở premiumkey.css.
   ========================================================================== */

:root {
	--pk-primary: #4f46e5;
	--pk-primary-dark: #312e81;
	--pk-primary-light: #eef2ff;
	--pk-accent: #06b6d4;
	--pk-accent-light: #ecfeff;
	--pk-bg: #f6f7fb;
	--pk-ink: #0f172a;
	--pk-muted: #64748b;
	--pk-surface: #ffffff;
	--pk-surface-2: #f1f5f9;
	--pk-border: #e2e8f0;
	--radius-lg: 18px;
	--radius-md: 12px;
}

* {
	box-sizing: border-box;
}

body {
	font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	color: var(--pk-ink);
	background: var(--pk-bg);
}

/* Be Vietnam Pro không có chữ CJK — chọn font hệ thống theo <html lang> (mã BCP-47
   đã map trong config app.locale.html_lang) để trình duyệt dùng đúng glyph Han. */
:lang(ja) body { font-family: 'Be Vietnam Pro', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', system-ui, sans-serif; }
:lang(ko) body { font-family: 'Be Vietnam Pro', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; }
:lang(zh-CN) body { font-family: 'Be Vietnam Pro', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif; }

a {
	text-decoration: none;
}

.text-pk-primary { color: var(--pk-primary) !important; }
.text-pk-accent { color: var(--pk-accent) !important; }
.text-footer-muted { color: rgba(255, 255, 255, 0.75); }

/* ===== Buttons ===== */
.btn-pk-primary {
	background: linear-gradient(135deg, var(--pk-primary) 0%, var(--pk-primary-dark) 100%);
	border: none;
	color: #fff;
	font-weight: 600;
	border-radius: 999px;
	padding: 0.65rem 1.6rem;
	box-shadow: 0 8px 20px rgba(79, 70, 229, 0.28);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-pk-primary:hover,
.btn-pk-primary:focus {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(79, 70, 229, 0.35);
}

.btn-pk-outline {
	background: var(--pk-surface);
	border: 2px solid var(--pk-primary);
	color: var(--pk-primary);
	font-weight: 600;
	border-radius: 999px;
	padding: 0.6rem 1.5rem;
	transition: background 0.15s ease, color 0.15s ease;
}
.btn-pk-outline:hover {
	background: var(--pk-primary);
	color: #fff;
}

.btn-pk-accent {
	background: linear-gradient(135deg, var(--pk-accent) 0%, #0891b2 100%);
	border: none;
	color: #3a2a02;
	font-weight: 700;
	border-radius: 999px;
	padding: 0.65rem 1.6rem;
	box-shadow: 0 8px 20px rgba(6, 182, 212, 0.35);
}
.btn-pk-accent:hover {
	color: #3a2a02;
	filter: brightness(1.05);
}

/* Nút Đăng nhập/Đăng ký/tên khách trên header — nhỏ gọn hơn nút CTA thường. */
.btn-pk-primary.header-auth-btn,
.btn-pk-outline.header-auth-btn,
.btn-pk-accent.header-auth-btn {
	padding: 0.35rem 1rem;
	font-size: 0.875rem;
	white-space: nowrap;
	box-shadow: none;
}
.btn-pk-primary.header-auth-btn:hover { transform: none; }
.btn-pk-outline.header-auth-btn { border-width: 1.5px; }
.header-account-name { max-width: 9rem; }

/* Số dư VNĐ/USD trên header (khách đã đăng nhập) — xem partials/header.php. */
.header-wallet {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.2rem 0.75rem 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--pk-accent-light);
	color: var(--pk-ink);
	text-decoration: none;
	white-space: nowrap;
}
.header-wallet:hover { color: var(--pk-primary); background: #ffecc0; }
.header-wallet .bi { font-size: 1.1rem; color: var(--pk-primary); }
.header-wallet-amounts {
	display: flex;
	flex-direction: column;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.25;
}

/* ===== Topbar + Header ===== */
.topbar {
	background: var(--pk-primary-dark);
	color: #fff;
	font-size: 0.82rem;
}
.topbar-text i { color: var(--pk-accent); margin-right: 0.25rem; }

.site-header .dropdown-menu {
	border: none;
	border-radius: var(--radius-md);
	box-shadow: 0 12px 30px rgba(43, 35, 32, 0.15);
	padding: 0.5rem;
}
.site-header .dropdown-item {
	border-radius: 8px;
	padding: 0.5rem 0.75rem;
	font-weight: 500;
}
.site-header .dropdown-item:hover,
.site-header .dropdown-item.active,
.site-header .dropdown-item:active { background: var(--pk-primary-light); color: var(--pk-primary); }

/* Mục menu cha có link thật: nhãn (link) + nút caret riêng để xổ submenu —
   xem partials/header.php. flex-wrap để .dropdown-menu xuống dòng khi navbar thu gọn. */
.site-header .nav-item-split {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.site-header .nav-item-split > .dropdown-toggle-split {
	padding-left: 0.35rem !important;
	padding-right: 0.5rem !important;
	margin-left: -0.35rem;
}
.site-header .nav-item-split > .dropdown-menu { flex-basis: 100%; }

/* Desktop có chuột: rê vào mục cha là xổ menu con luôn (không cần click caret).
   Đặt top/left/margin tường minh vì khi mở bằng hover Bootstrap chưa gắn
   data-bs-popper="static" nên không tự định vị; margin-top 0 để không hở khe
   giữa mục cha và menu con (chuột đi qua khe sẽ làm mất :hover). Màn cảm ứng
   (hover: none) vẫn mở bằng click như cũ. */
@media (min-width: 992px) and (hover: hover) {
	.site-header .navbar-nav > .dropdown { position: relative; }
	.site-header .navbar-nav > .dropdown:hover > .dropdown-menu {
		display: block;
		top: 100%;
		left: 0;
		margin-top: 0;
	}
}

/* Submenu cấp 3 (Bootstrap không hỗ trợ dropdown lồng): desktop mở sang phải
   khi hover/focus, mobile mở bằng click (class .is-open, xem app.js). */
.site-header .dropdown-submenu { position: relative; }
.site-header .dropdown-submenu-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	cursor: pointer;
}
.site-header .dropdown-submenu-toggle::after {
	content: "\F285"; /* bi-chevron-right */
	font-family: "bootstrap-icons";
	font-size: 0.7rem;
}
.site-header .dropdown-submenu > .dropdown-menu {
	top: -0.5rem;
	left: 100%;
	margin-left: 0.25rem;
}
@media (min-width: 992px) {
	.site-header .dropdown-submenu:hover > .dropdown-menu,
	.site-header .dropdown-submenu:focus-within > .dropdown-menu { display: block; }
}
@media (max-width: 991.98px) {
	.site-header .dropdown-submenu > .dropdown-menu {
		position: static;
		margin: 0 0 0 0.75rem;
		box-shadow: none;
		padding: 0.25rem 0;
	}
	.site-header .dropdown-submenu.is-open > .dropdown-menu { display: block; }
	.site-header .dropdown-submenu-toggle::after { transition: transform 0.15s; }
	.site-header .dropdown-submenu.is-open > .dropdown-submenu-toggle::after { transform: rotate(90deg); }
}

/* ===== Language switcher ===== */
.lang-switcher-flag {
	display: inline-flex;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.lang-switcher-flag svg {
	width: 100%;
	height: 100%;
	display: block;
}
.lang-switcher-menu {
	min-width: 10rem;
	padding: 0.5rem;
	border-radius: 12px;
}
.lang-switcher-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 8px;
	font-weight: 500;
	padding: 0.5rem 0.75rem;
}
.lang-switcher-item:hover { background: var(--pk-primary-light); color: var(--pk-primary); }
.lang-switcher-item.active {
	background: var(--pk-primary);
	color: #fff;
}
/* ===== Section headings ===== */
/* Tiêu đề kiểu thương mại điện tử: căn trái, link "Xem tất cả" bên phải cùng hàng */
.section-heading-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
}
.section-heading-row h2 { margin-bottom: 0; }
.section-more {
	color: var(--pk-primary);
	font-weight: 600;
	font-size: 0.92rem;
	white-space: nowrap;
}
.section-more i { transition: transform 0.15s ease; display: inline-block; }
.section-more:hover { color: var(--pk-primary-dark); }
.section-more:hover i { transform: translateX(3px); }

.section-heading h2 {
	font-weight: 800;
	font-size: clamp(1.1rem, 0.95rem + 0.45vw, 1.25rem);
	color: var(--pk-ink);
	margin-bottom: 0.35rem;
}

/* ===== Product cards (render server-side qua resources/views/partials/product-card.php) ===== */
.product-card {
	background: var(--pk-surface);
	border: 1px solid rgba(43, 35, 32, 0.08);
	border-radius: var(--radius-md);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(43, 35, 32, 0.12);
}
.product-card-img-wrap {
	position: relative;
	background: var(--pk-accent-light);
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.product-card-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.product-card-badge {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	font-size: 0.72rem;
	font-weight: 700;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	color: #fff;
	text-transform: uppercase;
}
.badge-hot { background: var(--pk-primary); }
.badge-new { background: #2e8b57; }
.badge-sale { background: var(--pk-accent); color: #3a2a02; }

.product-card-body {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.product-card-category {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--pk-primary);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.product-card-name {
	font-weight: 700;
	font-size: 0.98rem;
	margin: 0.25rem 0 0.4rem;
	color: var(--pk-ink);
}
.product-card-name a { color: inherit; }
.product-card-meta {
	font-size: 0.78rem;
	color: var(--pk-muted);
	margin-bottom: 0.6rem;
}
.product-card-price-row {
	margin-top: auto;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.product-card-price {
	font-weight: 800;
	color: var(--pk-primary);
	font-size: 1.05rem;
}
.product-card-price-original {
	font-size: 0.82rem;
	color: var(--pk-muted);
	text-decoration: line-through;
}
/* Biến thể nhỏ gọn (trang chủ — partials/product-card.php với $compact = true). */
.product-card-compact .product-card-img-wrap { aspect-ratio: 1 / 1; }
.product-card-compact .product-card-badge { top: 0.4rem; left: 0.4rem; font-size: 0.62rem; padding: 0.2rem 0.45rem; }
.product-card-compact .product-card-body { padding: 0.65rem 0.75rem 0.75rem; }
.product-card-compact .product-card-category { font-size: 0.65rem; }
.product-card-compact .product-card-name {
	font-size: 0.86rem;
	line-height: 1.3;
	margin: 0.2rem 0 0.3rem;
	/* Tối đa 2 dòng để các thẻ cùng hàng đều nhau */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.product-card-compact .product-card-meta { font-size: 0.7rem; margin-bottom: 0.4rem; }
.product-card-compact .product-card-price-row { gap: 0.1rem 0.4rem; }
.product-card-compact .product-card-price { font-size: 0.92rem; }
.product-card-compact .product-card-price-original { font-size: 0.72rem; }
.product-card-compact:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(43, 35, 32, 0.1); }

.product-grid-loading,
.product-grid-empty,
.product-grid-error {
	color: var(--pk-muted);
}

/* ===== Footer ===== */
.site-footer {
	background: var(--pk-primary-dark);
	color: rgba(255, 255, 255, 0.9);
}
.site-footer .brand-text { color: #fff; font-weight: 800; font-size: 1.3rem; }
.footer-heading {
	color: #fff;
	font-weight: 700;
	margin-bottom: 1rem;
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.55rem; }
.footer-links a {
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.9rem;
}
.footer-links a:hover { color: var(--pk-accent); }
.social-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	transition: background 0.15s ease;
}
.social-btn:hover { background: var(--pk-accent); color: #3a2a02; }
.newsletter-form .form-control {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
}
.newsletter-form .form-control::placeholder { color: rgba(255, 255, 255, 0.6); }
.footer-bottom {
	background: rgba(0, 0, 0, 0.18);
	color: rgba(255, 255, 255, 0.75);
}

/* ===== Back to top ===== */
.btn-back-to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--pk-primary);
	color: #fff;
	border: none;
	box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1040;
}
.btn-back-to-top.show { display: flex; }

/* ===== Page banner (listing/about/contact) ===== */
.page-banner {
	background: linear-gradient(135deg, var(--pk-primary-light) 0%, #fff 100%);
	padding: 2.2rem 0 1.6rem;
	border-bottom: 1px solid rgba(79, 70, 229, 0.08);
}
.page-banner .breadcrumb { --bs-breadcrumb-divider: '›'; font-size: 0.85rem; }
.page-banner-title { font-weight: 800; color: var(--pk-ink); }
.page-banner-subtitle { color: var(--pk-muted); margin-bottom: 0; }

/* ===== Sidebar filter (listing page) ===== */
.filter-box {
	background: var(--pk-surface);
	border: 1px solid rgba(43, 35, 32, 0.08);
	border-radius: var(--radius-md);
	padding: 1.25rem;
}
.filter-box-title { font-weight: 700; margin-bottom: 0.75rem; }
#categoryFilterList .list-group-item {
	border: none;
	border-radius: 8px !important;
	font-weight: 500;
	color: var(--pk-ink);
	cursor: pointer;
}
#categoryFilterList .list-group-item.active {
	background: var(--pk-primary);
	color: #fff;
}
#categoryFilterList .list-group-item:not(.active):hover { background: var(--pk-primary-light); }

/* ===== Product detail ===== */
.product-gallery {
	position: relative;
	background: var(--pk-accent-light);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
	text-align: center;
}
.product-gallery img { max-width: 100%; max-height: 360px; }
.product-badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	color: #fff;
	text-transform: uppercase;
}
.product-title { font-weight: 800; margin: 0.4rem 0 0.6rem; }
.product-short-desc { color: var(--pk-muted); }
.product-price-box {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin: 1rem 0;
}
.product-price { font-size: 1.9rem; font-weight: 800; color: var(--pk-primary); }
.product-price-original { font-size: 1.1rem; color: var(--pk-muted); text-decoration: line-through; }
.denomination-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.6rem; }
.denomination-item {
	display: inline-block;
	border: 2px solid rgba(79, 70, 229, 0.25);
	background: var(--pk-surface);
	color: var(--pk-ink);
	font-weight: 700;
	padding: 0.5rem 1.1rem;
	border-radius: var(--radius-md);
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.denomination-item:hover { border-color: var(--pk-primary); color: var(--pk-ink); }
.denomination-item.active {
	border-color: var(--pk-primary);
	background: var(--pk-primary);
	color: #fff;
}
.denomination-item.is-out-of-stock {
	opacity: 0.6;
	border-color: rgba(0, 0, 0, 0.15);
}
.denomination-item.is-out-of-stock:hover { border-color: rgba(0, 0, 0, 0.15); }
.product-meta-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; color: var(--pk-muted); }
.product-description-box {
	background: var(--pk-surface);
	border: 1px solid rgba(43, 35, 32, 0.08);
	border-radius: var(--radius-md);
	padding: 1.5rem;
	color: var(--pk-ink);
	line-height: 1.7;
}

/* ===== About page ===== */
.stat-card {
	background: var(--pk-surface);
	border: 1px solid rgba(79, 70, 229, 0.12);
	border-radius: var(--radius-md);
	padding: 1.25rem;
	text-align: center;
}
.stat-number { font-weight: 800; font-size: 1.6rem; color: var(--pk-primary); }
.stat-label { color: var(--pk-muted); font-size: 0.85rem; }

/* ===== Contact page ===== */
.contact-info-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.contact-info-list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.contact-info-list i { font-size: 1.4rem; color: var(--pk-primary); margin-top: 0.15rem; }
.contact-form-box {
	background: var(--pk-surface);
	border: 1px solid rgba(43, 35, 32, 0.08);
	border-radius: var(--radius-lg);
	padding: 1.75rem;
}

/* ===== Error page ===== */
.error-page { min-height: 50vh; display: flex; align-items: center; }
.error-emoji { font-size: 3rem; }
.error-status { font-weight: 800; color: var(--pk-primary); font-size: 3rem; }
.error-message { color: var(--pk-muted); }

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
	.site-header .nav-link.active,
	.site-header .nav-link:hover { background: transparent; }
}

/* ===== Trang tĩnh do admin soạn (pages/show.php, App\Models\Page) ===== */
.page-content { max-width: 860px; margin: 0 auto; line-height: 1.75; color: var(--pk-ink); overflow-wrap: anywhere; }
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4 { font-weight: 700; margin: 1.75rem 0 0.75rem; }
.page-content h2 { font-size: 1.5rem; }
.page-content h3 { font-size: 1.25rem; }
.page-content > :first-child { margin-top: 0; }
.page-content p,
.page-content ul,
.page-content ol,
.page-content blockquote,
.page-content table { margin-bottom: 1rem; }
.page-content img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.page-content a { color: var(--pk-primary); }
.page-content blockquote { border-left: 4px solid var(--pk-accent, #f5b83d); padding: 0.25rem 1rem; color: var(--pk-muted); }
.page-content table { width: 100%; border-collapse: collapse; }
.page-content th,
.page-content td { border: 1px solid rgba(43, 35, 32, 0.15); padding: 0.5rem 0.75rem; }
.page-content pre { background: #faf6f2; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; }

/* ===== Trang chủ: dải "Thương hiệu nổi bật" (resources/views/home.php) =====
   1 hàng không xuống dòng, căn trái theo tiêu đề; tràn thì cuộn ngang. */
.brand-strip {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	padding: 0.5rem 0.25rem 1rem;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: rgba(79, 70, 229, 0.35) transparent;
	-webkit-overflow-scrolling: touch;
}
.brand-strip::-webkit-scrollbar { height: 6px; }
.brand-strip::-webkit-scrollbar-thumb { background: rgba(79, 70, 229, 0.35); border-radius: 999px; }
.brand-strip::-webkit-scrollbar-track { background: transparent; }

.brand-tile {
	flex: 0 0 auto;
	width: 9rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding: 1rem 0.75rem;
	background: var(--pk-surface);
	border: 1px solid rgba(79, 70, 229, 0.08);
	border-radius: var(--radius-md);
	color: var(--pk-ink);
	scroll-snap-align: start;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.brand-tile:hover,
.brand-tile:focus-visible {
	color: var(--pk-primary);
	border-color: rgba(79, 70, 229, 0.3);
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(49, 46, 129, 0.1);
}
/* Logo thương hiệu thường là ảnh ngang — contain để không bị cắt chữ. */
.brand-tile-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 4rem;
	padding: 0.4rem;
	border-radius: 10px;
	background: var(--pk-surface);
}
.brand-tile-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-tile-name {
	max-width: 100%;
	font-weight: 600;
	font-size: 0.9rem;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
@media (max-width: 575.98px) {
	.brand-tile { width: 7.5rem; padding: 0.85rem 0.5rem; }
	.brand-tile-logo { height: 3.25rem; }
}

/* Thông báo "Đã lưu" hiện cạnh nút Lưu ở trang /tai-khoan (resources/views/account/profile.php). */
.account-saved-note {
	color: #198754;
	font-weight: 600;
	font-size: 0.92rem;
	animation: account-saved-in 0.3s ease-out;
}
@keyframes account-saved-in {
	from { opacity: 0; transform: translateX(-6px); }
	to { opacity: 1; transform: none; }
}

/* ===== Khu tài khoản khách đã đăng nhập (/tai-khoan/...) =====
   Xem resources/views/account/{_nav,_avatar,profile}.php */
.account-page {
	padding: 1.5rem 0 3rem;
	background:
		radial-gradient(circle at 8% 0%, rgba(6, 182, 212, 0.14), transparent 34%),
		radial-gradient(circle at 95% 60%, rgba(79, 70, 229, 0.06), transparent 38%);
}

.account-avatar {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pk-accent) 0%, #0891b2 100%);
	color: #fff;
	font-weight: 800;
	line-height: 1;
}
img.account-avatar { object-fit: cover; background: #f6f1ec; }
.account-avatar-sm { width: 1.6rem; height: 1.6rem; font-size: 0.75rem; }
.account-avatar-md { width: 2.85rem; height: 2.85rem; font-size: 1.15rem; }
.account-avatar-xl {
	width: 6rem;
	height: 6rem;
	font-size: 2.4rem;
	box-shadow: 0 6px 16px rgba(58, 42, 2, 0.18);
}
.account-avatar-lg {
	width: 3.5rem;
	height: 3.5rem;
	font-size: 1.45rem;
	border: 2px solid rgba(255, 255, 255, 0.85);
	box-shadow: 0 6px 14px rgba(58, 42, 2, 0.22);
}

/* Menu trái */
.account-nav {
	padding: 0.75rem;
	border-radius: var(--radius-lg);
	background: var(--pk-surface);
	box-shadow: 0 1px 2px rgba(43, 35, 32, 0.04), 0 10px 26px rgba(49, 46, 129, 0.06);
}
.account-nav-user {
	align-items: center;
	gap: 0.65rem;
	padding: 0.2rem 0.3rem 0.75rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px dashed #eadfd4;
}
.account-nav-meta { min-width: 0; }
.account-nav-name { font-weight: 700; }
.account-nav-email { font-size: 0.82rem; color: var(--pk-muted); }
.account-nav-list { display: flex; flex-direction: column; gap: 0.25rem; }
.account-nav-logout { margin: 0.5rem 0 0; padding-top: 0.5rem; border-top: 1px dashed #eadfd4; }
.account-nav-link {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	width: 100%;
	padding: 0.5rem 0.8rem;
	border: 0;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--pk-ink);
	font-weight: 500;
	text-align: left;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}
.account-nav-link .bi { font-size: 1.1rem; color: var(--pk-muted); transition: color 0.15s ease; }
.account-nav-link:hover { background: var(--pk-bg); color: var(--pk-primary); }
.account-nav-link:hover .bi { color: var(--pk-primary); }
.account-nav-link.active {
	position: relative;
	background: var(--pk-primary-light);
	color: var(--pk-primary);
	font-weight: 700;
}
.account-nav-link.active .bi { color: var(--pk-primary); }
.account-nav-link.is-logout,
.account-nav-link.is-logout .bi { color: #b4232f; }
.account-nav-link.is-logout:hover { background: #fdf0f0; }
@media (min-width: 992px) {
	.account-nav { position: sticky; top: calc(var(--header-sticky-h) + 1rem); }
	.account-nav-link.active::before {
		content: '';
		position: absolute;
		left: 0;
		top: 22%;
		bottom: 22%;
		width: 3px;
		border-radius: 3px;
		background: var(--pk-primary);
	}
}
/* Dưới lg: hàng chip cuộn ngang thay cho thẻ dọc. */
@media (max-width: 991.98px) {
	.account-nav { padding: 0.4rem; }
	.account-nav-list {
		flex-direction: row;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.account-nav-list::-webkit-scrollbar { display: none; }
	.account-nav-link { width: auto; padding: 0.55rem 0.9rem; font-size: 0.92rem; }
	.account-nav-logout { margin: 0 0 0 auto; padding: 0 0 0 0.4rem; border-top: 0; border-left: 1px dashed #eadfd4; }
}

/* Thẻ đầu trang hồ sơ: avatar + tên/badge bên trái, dải số liệu (đơn hàng, số dư) bên phải
   — xuống dòng thành hàng riêng khi hẹp. */
.account-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1rem;
	padding: 1rem 1.25rem;
	border-radius: var(--radius-lg);
	background:
		radial-gradient(circle at 100% 0%, rgba(6, 182, 212, 0.4) 0, transparent 40%),
		linear-gradient(140deg, var(--pk-primary) 0%, var(--pk-primary-dark) 100%);
	color: #fff;
	box-shadow: 0 10px 24px rgba(49, 46, 129, 0.2);
}
.account-hero-body { flex: 1 1 14rem; min-width: 0; }
.account-hero-name { font-size: 1.15rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.account-hero-email { font-size: 0.85rem; opacity: 0.85; overflow-wrap: anywhere; }
.account-hero-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; }
.account-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	font-size: 0.74rem;
	font-weight: 600;
}
.account-badge.is-ok { background: var(--pk-surface); color: #157347; }
.account-badge.is-warn { background: var(--pk-accent-light); color: #8a5a00; }
.account-hero-stats { display: flex; flex: 1 1 100%; gap: 0.5rem; }
.account-hero-stat {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
	padding: 0.45rem 0.75rem;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	transition: background 0.15s ease;
}
.account-hero-stat:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.account-hero-stat-label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-hero-stat-label .bi { color: var(--pk-accent); }
.account-hero-stat-value { font-size: 1rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1200px) {
	.account-hero-stats { flex: 0 1 auto; }
	.account-hero-stat { flex: 0 1 auto; min-width: 7.5rem; }
}

/* Banner chưa xác thực email */
.account-verify {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	padding: 0.6rem 0.9rem;
	border: 1px solid #f1d9a0;
	border-radius: var(--radius-md);
	background: var(--pk-accent-light);
}
.account-verify-icon { font-size: 1.2rem; color: #a87410; }
.account-verify-text { flex: 1 1 16rem; font-size: 0.88rem; }
.account-verify .btn-pk-outline { padding: 0.25rem 0.9rem; border-width: 1.5px; font-size: 0.85rem; }

/* Thẻ form hồ sơ / mật khẩu — ô nhập thấp hơn trang đăng nhập cho gọn. */
.account-card {
	padding: 1.1rem 1.25rem 1.25rem;
	border-radius: var(--radius-lg);
	background: var(--pk-surface);
	box-shadow: 0 1px 2px rgba(43, 35, 32, 0.04), 0 8px 20px rgba(49, 46, 129, 0.05);
	scroll-margin-top: calc(var(--header-sticky-h) + 1rem);
}
.account-card-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.account-card-head .auth-icon-badge { flex-shrink: 0; width: 2.25rem; height: 2.25rem; margin-bottom: 0; font-size: 1rem; }
.account-card-title { margin: 0; font-size: 1rem; font-weight: 700; }
.account-card-intro { margin: 0; font-size: 0.8rem; color: var(--pk-muted); }
.account-card-note { font-size: 0.8rem; color: var(--pk-muted); }
.account-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.25rem; }
.account-card-actions .btn-pk-primary,
.account-card-actions .btn-pk-outline { padding: 0.45rem 1.35rem; }
/* Thẻ ảnh đại diện — preview tròn bên trái, nút + gợi ý bên phải (mobile xếp dọc, căn giữa). */
.account-avatar-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.account-avatar-form { flex: 1 1 16rem; min-width: 0; margin: 0; }
.account-avatar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.account-avatar-actions .btn-pk-primary,
.account-avatar-actions .btn-pk-outline { padding: 0.45rem 1.2rem; }
.account-avatar-actions .btn-pk-outline { cursor: pointer; }
.account-avatar-remove { padding: 0.45rem 0.5rem; color: var(--pk-muted); font-size: 0.875rem; text-decoration: none; }
.account-avatar-remove:hover { color: var(--pk-primary); }
.account-avatar-filename { margin-top: 0.4rem; font-size: 0.8rem; font-weight: 600; }
.account-avatar-filename:empty { display: none; }
.account-avatar-hint { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--pk-muted); }
.account-avatar-form .account-saved-note { display: inline-block; margin-top: 0.4rem; }
#avatarInput:focus-visible + .account-avatar-actions label { outline: 2px solid var(--pk-accent); outline-offset: 2px; }
@media (max-width: 575.98px) {
	.account-avatar-editor { flex-direction: column; text-align: center; }
	.account-avatar-form { flex-basis: auto; width: 100%; }
	.account-avatar-actions { justify-content: center; }
}

.account-card .auth-field { margin-bottom: 0.75rem !important; }
.account-card .auth-field .form-label { margin-bottom: 0.25rem; font-size: 0.85rem; }
.account-card .auth-field .form-text { margin-top: 0.2rem; font-size: 0.78rem; }
.account-card .auth-input { height: 2.5rem; font-size: 0.95rem; }
.account-card .auth-input:disabled { background-color: #f6f1ec; color: var(--pk-muted); cursor: not-allowed; }
@media (max-width: 575.98px) {
	.account-card { padding: 1rem; }
}

/* Danh sách đơn hàng / lịch sử giao dịch — xem account/{orders,wallet,_pagination}.php */
.account-list { margin: 0 -0.5rem; padding: 0; list-style: none; }
.account-list > li + li { border-top: 1px dashed #eee4da; }
.account-row {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.75rem 0.5rem;
	border-radius: var(--radius-md);
	color: var(--pk-ink);
}
a.account-row { transition: background 0.15s ease; }
a.account-row:hover { background: var(--pk-bg); color: var(--pk-ink); }
.account-row-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	font-size: 1.05rem;
	background: #f3eee9;
	color: var(--pk-muted);
}
.account-row-icon.is-success { background: #e6f4ec; color: #157347; }
.account-row-icon.is-warning { background: var(--pk-accent-light); color: #a87410; }
.account-row-icon.is-danger { background: var(--pk-primary-light); color: var(--pk-primary); }
.account-row-main { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.account-row-title { font-weight: 600; font-size: 0.93rem; line-height: 1.35; overflow-wrap: anywhere; }
.account-row-meta { display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; margin-top: 0.15rem; font-size: 0.78rem; color: var(--pk-muted); }
.account-row-meta > span + span::before { content: '·'; margin-right: 0.6rem; }
.account-row-code { font-weight: 600; color: var(--pk-ink); }
.account-row-end { display: flex; flex-shrink: 0; flex-direction: column; align-items: flex-end; gap: 0.2rem; text-align: right; }
.account-row-amount { font-weight: 800; font-size: 0.98rem; white-space: nowrap; }
.account-row-amount.is-plus { color: #157347; }
.account-row-amount.is-minus { color: var(--pk-primary); }
.account-row-sub { font-size: 0.75rem; color: var(--pk-muted); white-space: nowrap; }
.account-row-arrow { flex-shrink: 0; color: #cbbfb4; transition: color 0.15s ease, transform 0.15s ease; }
a.account-row:hover .account-row-arrow { color: var(--pk-primary); transform: translateX(2px); }
.account-status {
	display: inline-block;
	padding: 0.12rem 0.55rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	white-space: nowrap;
	background: #f1ece7;
	color: var(--pk-muted);
}
.account-status.is-success { background: #e6f4ec; color: #157347; }
.account-status.is-warning { background: var(--pk-accent-light); color: #8a5a00; }
@media (max-width: 575.98px) {
	.account-row { flex-wrap: wrap; gap: 0.6rem 0.75rem; }
	.account-row-icon { width: 2.1rem; height: 2.1rem; font-size: 0.95rem; }
	.account-row-main { flex-basis: calc(100% - 3.5rem); }
	/* Số tiền + trạng thái xuống hàng dưới, thẳng mép chữ. */
	.account-row-end { flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-left: 2.85rem; text-align: left; }
	.account-row-arrow { display: none; }
}

.account-empty { padding: 1.5rem 1rem 1rem; text-align: center; color: var(--pk-muted); }
.account-empty-icon { margin-bottom: 0.5rem; font-size: 2.5rem; line-height: 1; }

.account-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--line);
}
.account-page-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.35rem 0.9rem;
	border: 1.5px solid #e9e1d8;
	border-radius: 999px;
	color: var(--pk-ink);
	font-size: 0.85rem;
	font-weight: 600;
	transition: border-color 0.15s ease, color 0.15s ease;
}
a.account-page-btn:hover { border-color: var(--pk-primary); color: var(--pk-primary); }
.account-page-btn.is-disabled { opacity: 0.4; }
.account-page-info { font-size: 0.82rem; color: var(--pk-muted); }
@media (prefers-reduced-motion: reduce) {
	a.account-row,
	.account-row-arrow { transition: none; }
}

/* ===== Trang tài khoản khách: Đăng nhập / Đăng ký / Quên & đặt lại mật khẩu =====
   Xem resources/views/account/{login,register,forgot_password,reset_password,_input,_auth_aside,_auth_tabs}.php */
.auth-page {
	position: relative;
	padding: 3rem 0 4rem;
	background:
		radial-gradient(circle at 12% 18%, rgba(6, 182, 212, 0.18), transparent 38%),
		radial-gradient(circle at 88% 82%, rgba(79, 70, 229, 0.10), transparent 40%);
}

.auth-card {
	max-width: 980px;
	background: var(--pk-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(49, 46, 129, 0.12), 0 2px 6px rgba(43, 35, 32, 0.05);
}
.auth-card-narrow { max-width: 480px; }

/* Panel trái (desktop) */
.auth-aside {
	position: relative;
	background: linear-gradient(155deg, var(--pk-primary) 0%, var(--pk-primary-dark) 100%);
	color: #fff;
	overflow: hidden;
}
.auth-aside::before {
	/* Hoạ tiết chấm vàng mờ */
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 214, 120, 0.22) 1.5px, transparent 1.5px);
	background-size: 22px 22px;
	mask-image: linear-gradient(160deg, #000 0%, transparent 70%);
	-webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 70%);
}
.auth-aside-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 2.5rem;
}
.auth-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: #fff;
	font-size: 1.35rem;
	font-weight: 800;
}
.auth-brand:hover { color: #fff; }
.auth-aside-title {
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.25;
	margin-bottom: 0.75rem;
}
.auth-aside-subtitle {
	color: rgba(255, 255, 255, 0.82);
	margin-bottom: 1.75rem;
}
.auth-benefits {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.9rem;
}
.auth-benefits li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-weight: 500;
}
.auth-benefit-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: var(--pk-accent);
	font-size: 1.05rem;
}
.auth-aside-deco {
	position: absolute;
	right: -1.5rem;
	bottom: -2rem;
	font-size: 9rem;
	line-height: 1;
	opacity: 0.18;
	transform: rotate(-14deg);
	pointer-events: none;
}

/* Cột form */
.auth-body { padding: 2.5rem 2rem; }
@media (min-width: 992px) {
	.auth-body { padding: 3rem 3.25rem; }
}
@media (max-width: 575.98px) {
	.auth-page { padding: 1.5rem 0 2.5rem; }
	.auth-body { padding: 1.75rem 1.25rem; }
}

.auth-tabs {
	display: flex;
	padding: 0.3rem;
	background: var(--pk-bg);
	border: 1px solid rgba(79, 70, 229, 0.08);
	border-radius: 999px;
}
.auth-tab {
	flex: 1;
	text-align: center;
	padding: 0.55rem 1rem;
	border-radius: 999px;
	color: var(--pk-muted);
	font-weight: 600;
	transition: background 0.15s ease, color 0.15s ease;
}
.auth-tab:hover { color: var(--pk-primary); }
.auth-tab.active {
	background: var(--pk-surface);
	color: var(--pk-primary);
	box-shadow: 0 2px 8px rgba(49, 46, 129, 0.12);
}

.auth-title {
	font-size: 1.6rem;
	font-weight: 800;
	margin-bottom: 0.35rem;
}
.auth-intro {
	color: var(--pk-muted);
	margin-bottom: 1.75rem;
}
.auth-icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: var(--pk-primary-light);
	color: var(--pk-primary);
	font-size: 1.4rem;
}
/* Icon badge + tiêu đề cùng 1 dòng (quên/đặt lại mật khẩu). */
.auth-heading-row {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 0.5rem;
}
.auth-heading-row .auth-icon-badge {
	flex-shrink: 0;
	margin-bottom: 0;
}
.auth-heading-row .auth-title { margin-bottom: 0; }

.auth-field .form-label {
	font-weight: 600;
	font-size: 0.92rem;
	margin-bottom: 0.4rem;
}
.auth-input-wrap { position: relative; }
.auth-input-icon {
	position: absolute;
	top: 50%;
	left: 1rem;
	transform: translateY(-50%);
	color: var(--pk-muted);
	pointer-events: none;
	transition: color 0.15s ease;
}
.auth-input {
	height: 3rem;
	padding-left: 2.75rem;
	border: 1.5px solid #e9e1d8;
	border-radius: var(--radius-md);
	background-color: #fffdfa;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.auth-input::placeholder { color: #b8ada4; }
.auth-input:focus {
	border-color: var(--pk-primary);
	background-color: var(--pk-surface);
	box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}
.auth-input-wrap:focus-within .auth-input-icon { color: var(--pk-primary); }
.auth-input.is-invalid { background-image: none; padding-right: 0.75rem; }
.auth-input-wrap.has-toggle .auth-input { padding-right: 3rem; }
.auth-input.is-invalid:focus { box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.15); }

.auth-password-toggle {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	transform: translateY(-50%);
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--pk-muted);
}
.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
	color: var(--pk-primary);
	background: var(--pk-primary-light);
	outline: none;
}

.auth-submit {
	height: 3.1rem;
	font-size: 1rem;
}
/* Flash lỗi/thành công trong thẻ form — xem account/_auth_alert.php. */
.auth-alert {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: -0.75rem 0 1.25rem;
	padding: 0.8rem 1rem;
	border: 1px solid transparent;
	border-left-width: 4px;
	border-radius: var(--radius-md);
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.45;
	animation: auth-alert-in 0.25s ease-out;
}
.auth-alert .bi {
	flex-shrink: 0;
	font-size: 1.05rem;
	line-height: 1.3;
}
.auth-alert-error {
	background: var(--pk-primary-light);
	border-color: rgba(79, 70, 229, 0.18);
	border-left-color: var(--pk-primary);
	color: var(--pk-primary-dark);
}
.auth-alert-error .bi { color: var(--pk-primary); }
.auth-alert-success {
	background: #ecf8f0;
	border-color: rgba(25, 135, 84, 0.2);
	border-left-color: #198754;
	color: #0f5132;
}
.auth-alert-success .bi { color: #198754; }
@keyframes auth-alert-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.auth-alert { animation: none; }
}
/* Widget reCAPTCHA rộng cố định 304px (iframe) — màn hẹp thì thu nhỏ cho khỏi tràn ngang. */
.auth-captcha {
	min-height: 78px;
}
.auth-captcha-notice {
	color: var(--pk-muted);
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
}
@media (max-width: 380px) {
	.auth-captcha .g-recaptcha {
		transform: scale(0.88);
		transform-origin: 0 0;
	}
}
/* Nút "Tiếp tục với Google" + vạch "hoặc" — xem account/_google_button.php. */
.auth-google-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	height: 3.1rem;
	border: 1px solid #dadce0;
	border-radius: var(--radius-md);
	background: var(--pk-surface);
	color: var(--pk-ink);
	font-weight: 600;
}
.auth-google-btn:hover,
.auth-google-btn:focus-visible {
	border-color: #c4c7cc;
	background: #f8f9fa;
	color: var(--pk-ink);
	box-shadow: 0 1px 3px rgba(60, 64, 67, 0.15);
}
.auth-google-logo { flex-shrink: 0; }
.auth-divider {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 1.25rem 0;
	color: var(--pk-muted);
	font-size: 0.85rem;
}
.auth-divider::before,
.auth-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: rgba(43, 35, 32, 0.12);
}
.auth-link {
	color: var(--pk-primary);
	font-weight: 600;
}
.auth-link:hover { color: var(--pk-primary-dark); text-decoration: underline; }
.auth-switch {
	margin: 1.5rem 0 0;
	text-align: center;
	color: var(--pk-muted);
	font-size: 0.92rem;
}

/* ===== Trang chủ — lớp hoàn thiện (hero thẻ quà, hoa mai, danh mục màu, hiện dần khi cuộn...) ===== */

/* Danh mục: tông pastel riêng cho từng ô */
.category-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--cat-bg, var(--pk-primary-light));
	transition: transform 0.2s ease;
}
.category-icon i { font-size: 1.1rem; color: var(--cat-fg, var(--pk-primary)); }
.category-tone-0 { --cat-bg: #eef2ff; --cat-fg: #4f46e5; }
.category-tone-1 { --cat-bg: #ecfeff; --cat-fg: #b7791f; }
.category-tone-2 { --cat-bg: #e6f6ef; --cat-fg: #1f8a5b; }
.category-tone-3 { --cat-bg: #e9f1fd; --cat-fg: #2f6fd1; }
.category-tone-4 { --cat-bg: #f3ebfd; --cat-fg: #7b4bc9; }
.category-tone-5 { --cat-bg: #ffeee3; --cat-fg: #d9621c; }

/* Thương hiệu: logo giữ màu gốc, rê chuột thì phóng nhẹ */
.brand-tile-logo img { transition: transform 0.2s ease; }
.brand-tile:hover .brand-tile-logo img,
.brand-tile:focus-visible .brand-tile-logo img { transform: scale(1.08); }

/* Hiện dần khi cuộn tới (JS gắn html.reveal-ready + .is-visible — public/assets/js/app.js).
   Không có JS thì .reveal-ready không có nên nội dung vẫn hiện bình thường. */
.reveal-ready .reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.reveal-ready .reveal { opacity: 1; transform: none; transition: none; }
	.category-icon,
	.brand-tile-logo img { transition: none; }
}

/* Khung "đã nạp thẻ thành công" ở trang số dư — xem account/wallet.php ($topupSuccess). */
.topup-success .card-body { padding: 2.5rem 1.5rem; }
.topup-success-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: var(--pk-primary-light);
	color: var(--pk-primary-dark);
	font-size: 1.75rem;
}
.topup-success-check {
	position: absolute;
	right: -4px;
	bottom: -4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #198754;
	color: #fff;
	font-size: 0.9rem;
}
.topup-success-heading {
	max-width: 440px;
	margin: 0 auto 0.5rem;
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--pk-primary-dark);
}
.topup-success-amount { color: #198754; white-space: nowrap; }
.topup-success-actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 400px;
	margin: 0 auto;
}
@media (max-width: 575.98px) {
	.topup-success-heading { font-size: 1.4rem; }
}

/* Khung nạp thẻ ở trang số dư — xem account/wallet.php. Lỗi nạp hiện ngay dưới ô mã. */
.topup-card { scroll-margin-top: 110px; }
.topup-card .card-body { padding: 1.5rem; }
.topup-card-head { display: flex; align-items: flex-start; gap: 0.9rem; margin-bottom: 1.25rem; }
.topup-card-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--pk-primary-light);
	color: var(--pk-primary);
	font-size: 1.3rem;
}
.topup-card-title { margin: 0 0 0.2rem; font-size: 1.05rem; font-weight: 700; }
.topup-card-hint { margin: 0; font-size: 0.85rem; color: var(--pk-muted); }
.topup-form-row { display: flex; gap: 0.75rem; }
.topup-code-field { position: relative; flex: 1; min-width: 0; }
.topup-code-field .bi {
	position: absolute;
	top: 50%;
	left: 1rem;
	transform: translateY(-50%);
	color: var(--pk-muted);
	pointer-events: none;
}
.topup-code-input {
	height: 3rem;
	padding-left: 2.6rem;
	border-radius: 999px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.topup-code-input::placeholder { letter-spacing: 0.06em; color: #b8aea7; }
.topup-code-input:focus { border-color: var(--pk-primary); box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.12); }
.topup-code-input.is-invalid { background-image: none; padding-right: 0.75rem; }
.topup-code-input.is-invalid:focus { box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.18); }
.topup-submit { height: 3rem; flex-shrink: 0; white-space: nowrap; }
.topup-error {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding: 0.65rem 0.9rem;
	border-radius: var(--radius-md);
	background: var(--pk-primary-light);
	color: var(--pk-primary-dark);
	font-size: 0.9rem;
	font-weight: 500;
	animation: auth-alert-in 0.25s ease-out;
}
.topup-error .bi { color: var(--pk-primary); line-height: 1.4; }
@media (max-width: 575.98px) {
	.topup-form-row { flex-direction: column; }
	.topup-submit { width: 100%; }
}

/* ==========================================================================
   Bố cục mới (header 2 tầng, trang chủ dạng lưới thẻ, dải cam kết) — vẫn giữ
   bảng màu đỏ - vàng Tết ở :root, chỉ đổi bố cục/khoảng trắng/bóng đổ.
   ========================================================================== */
:root {
	--page-bg: #faf6f2;
	--line: rgba(43, 35, 32, 0.08);
	--shadow-soft: 0 1px 2px rgba(43, 35, 32, 0.04), 0 6px 18px rgba(43, 35, 32, 0.04);
	--header-sticky-h: 7.5rem; /* chiều cao header dính (2 tầng) — dùng cho position: sticky bên dưới */
}
body { background: var(--page-bg); }

/* ----- Header tầng trên: logo + tìm kiếm + nút hành động (partials/header.php) ----- */
.site-header {
	background: var(--pk-surface);
	z-index: 1030;
	box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(43, 35, 32, 0.04);
}
.header-main-inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 70px;
}
.header-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	flex-shrink: 0;
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	line-height: 1;
}
.brand-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.3rem;
	height: 2.3rem;
	border-radius: 11px;
	background: linear-gradient(135deg, var(--pk-primary) 0%, var(--pk-primary-dark) 100%);
	color: var(--pk-accent);
	font-size: 1.1rem;
	box-shadow: 0 6px 14px rgba(79, 70, 229, 0.28);
}
.site-footer .brand-logo { width: 2rem; height: 2rem; font-size: 1rem; border-radius: 10px; background: rgba(255, 255, 255, 0.14); box-shadow: none; }
.brand-mark { font-size: 1.6rem; line-height: 1; }
.brand-text { color: var(--pk-primary); }
.brand-text-accent { color: var(--pk-accent); }

.header-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1;
	max-width: 560px;
	margin: 0;
}
.header-search .bi-search {
	position: absolute;
	left: 1.05rem;
	color: var(--pk-muted);
	pointer-events: none;
}
.header-search-input {
	width: 100%;
	height: 2.75rem;
	padding: 0 1.1rem 0 2.7rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: #f5f0eb;
	color: var(--pk-ink);
	font-size: 0.9rem;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.header-search-input::placeholder { color: #9c918a; }
.header-search-input:focus {
	outline: none;
	background: var(--pk-surface);
	border-color: rgba(79, 70, 229, 0.35);
	box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.08);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: auto;
}
.header-action {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.7rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--pk-ink);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}
.header-action > .bi,
.header-action-icon > .bi { font-size: 1.2rem; }
.header-action > .header-action-caret { font-size: 0.7rem; }
.header-action:hover,
.header-action[aria-expanded="true"] { background: var(--pk-primary-light); color: var(--pk-primary); }
.header-action-icon { position: relative; display: inline-flex; }
.header-cart-count {
	position: absolute;
	top: -0.45rem;
	right: -0.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 0.3rem;
	border: 2px solid #fff;
	border-radius: 999px;
	background: var(--pk-primary);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	box-sizing: content-box;
}
.header-divider { width: 1px; height: 1.75rem; margin: 0 0.5rem; background: rgba(43, 35, 32, 0.12); }
.header-login { padding: 0.45rem 0.8rem; color: var(--pk-ink); font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.header-login:hover { color: var(--pk-primary); }
.header-account.dropdown-toggle::after { margin-left: 0.1rem; }
.header-toggler {
	display: inline-flex;
	padding: 0.3rem 0.45rem;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--pk-ink);
	font-size: 1.6rem;
	line-height: 1;
}
.header-toggler:hover,
.header-toggler[aria-expanded="true"] { background: var(--pk-primary-light); color: var(--pk-primary); }
.lang-switcher-toggle .lang-switcher-flag { width: 1.2rem; height: 1.2rem; }
.header-wallet { margin-right: 0.35rem; }
.btn-pk-primary.header-auth-btn { padding: 0.5rem 1.35rem; }

/* ----- Header tầng dưới: "Tất cả danh mục" + menu chính ----- */
.header-nav { padding: 0; border-top: 1px solid var(--line); }
.header-cats-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 0.25rem;
	border: 0;
	background: transparent;
	color: var(--pk-ink);
	font-weight: 700;
	font-size: 0.9rem;
	white-space: nowrap;
}
.header-cats-toggle .bi { font-size: 1.25rem; line-height: 1; }
.header-cats-toggle:hover,
.header-cats-toggle[aria-expanded="true"] { color: var(--pk-primary); }
.site-header .header-cats-menu { min-width: 16rem; }
.header-cats-item { display: flex !important; align-items: center; gap: 0.65rem; }
.header-cats-item .category-icon { width: 2rem; height: 2rem; border-radius: 10px; }
.header-cats-item .category-icon i { font-size: 0.95rem; }
.site-header .header-cats-all { color: var(--pk-primary); font-weight: 600; }

.site-header .header-nav .nav-link {
	position: relative;
	padding: 0.75rem 0.85rem !important;
	border-radius: 0;
	background: transparent;
	color: var(--pk-ink);
	font-weight: 500;
	font-size: 0.9rem;
}
.site-header .header-nav .nav-link:hover,
.site-header .header-nav .nav-link.active { color: var(--pk-primary); background: transparent; }
@media (min-width: 992px) {
	.header-nav .navbar-collapse { gap: 1.75rem; min-height: 48px; }
	/* Gạch chân mục đang xem (dùng ::before vì ::after là caret của .dropdown-toggle) */
	.site-header .header-nav .nav-link.active::before {
		content: '';
		position: absolute;
		left: 0.85rem;
		right: 0.85rem;
		bottom: 0;
		height: 2px;
		border-radius: 2px;
		background: var(--pk-primary);
	}
}
@media (min-width: 992px) and (hover: hover) {
	.header-cats { position: relative; }
	.header-cats:hover > .dropdown-menu { display: block; top: 100%; left: 0; margin-top: 0; }
}
@media (max-width: 991.98px) {
	.header-main-inner { gap: 0.75rem; min-height: 60px; }
	.header-brand { font-size: 1.3rem; }
	.brand-logo { width: 2rem; height: 2rem; font-size: 1rem; }
	.header-nav { border-top: 0; }
	.header-nav .navbar-collapse { padding: 0.25rem 0 1rem; }
	.header-nav .header-search { max-width: none; margin-bottom: 0.5rem; }
	.header-cats-toggle { padding: 0.6rem 0; }
	.site-header .header-nav .nav-link { padding: 0.6rem 0 !important; }
	.header-nav-auth { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
	.header-nav-auth .btn { flex: 1; }
}

/* ----- Thẻ sản phẩm: ảnh lọt lòng có bo góc, nhãn giảm giá ----- */
.product-card { border-color: var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(43, 35, 32, 0.04); }
.product-card-img-wrap { margin: 0.5rem 0.5rem 0; border-radius: 10px; }
.product-card-compact .product-card-img-wrap { aspect-ratio: 3 / 2; }
.product-card-compact .product-card-body { padding: 0.6rem 0.75rem 0.8rem; }
.product-card-discount {
	position: absolute;
	top: 0.45rem;
	right: 0.45rem;
	z-index: 1;
	padding: 0.15rem 0.45rem;
	border-radius: 6px;
	background: var(--pk-primary);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
}

/* ----- Dải cam kết phía trên footer (partials/trust-strip.php) ----- */
.trust-strip { padding: 1.5rem 0; border-top: 1px solid var(--line); background: var(--pk-surface); }
.trust-strip-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
.trust-item { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.trust-icon { flex-shrink: 0; color: var(--pk-primary); font-size: 1.6rem; }
.trust-item-title { font-weight: 700; font-size: 0.88rem; }
.trust-item-desc { color: var(--pk-muted); font-size: 0.78rem; }
@media (min-width: 992px) {
	.trust-strip-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.trust-item + .trust-item { padding-left: 1.5rem; border-left: 1px solid var(--line); }
}

/* ==========================================================================
   Giỏ hàng + thanh toán (cart/index.php, checkout/form.php, partials/shop-steps.php)

   ========================================================================== */
.shop-page { padding-top: 1.25rem; padding-bottom: 3rem; }

/* Hàng đầu trang: tiêu đề trái + thanh tiến trình phải (mobile: tiến trình lên trên, tiêu đề xuống dưới) */
.shop-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	margin-bottom: 1.25rem;
}
@media (max-width: 767.98px) {
	.shop-top .shop-steps { order: -1; flex-basis: 100%; }
}

/* Thanh tiến trình 3 bước */
.shop-steps {
	display: flex;
	align-items: center;
	flex: 0 1 460px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.shop-step { display: flex; align-items: center; flex: 1; min-width: 0; }
.shop-step:last-child { flex: 0 0 auto; }
.shop-step:not(:last-child)::after {
	content: "";
	flex: 1;
	height: 2px;
	margin: 0 0.6rem;
	border-radius: 2px;
	background: var(--line);
}
.shop-step.is-done:not(:last-child)::after { background: var(--pk-primary); }
.shop-step-inner { display: flex; align-items: center; gap: 0.5rem; color: var(--pk-muted); white-space: nowrap; }
a.shop-step-inner:hover { color: var(--pk-primary); }
.shop-step-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: var(--pk-surface);
	border: 1.5px solid var(--line);
	color: var(--pk-muted);
	font-size: 0.95rem;
}
.shop-step-label { font-size: 0.88rem; font-weight: 600; }
.shop-step.is-current .shop-step-dot {
	background: linear-gradient(135deg, var(--pk-primary) 0%, var(--pk-primary-dark) 100%);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 6px 14px rgba(79, 70, 229, 0.28);
}
.shop-step.is-current .shop-step-label,
.shop-step.is-done .shop-step-label { color: var(--pk-ink); }
.shop-step.is-done .shop-step-dot { background: var(--pk-primary-light); border-color: transparent; color: var(--pk-primary); }
@media (max-width: 575.98px) {
	/* Mobile: chỉ giữ nhãn bước hiện tại cho đỡ chật */
	.shop-step-label { display: none; }
	.shop-step.is-current .shop-step-label { display: inline; }
}

.shop-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.shop-title { margin: 0; font-weight: 800; font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); letter-spacing: -0.01em; }
.shop-count { color: var(--pk-muted); font-size: 0.95rem; }

.shop-note {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 1.25rem;
	padding: 0.75rem 1rem;
	border-radius: var(--radius-md);
	background: var(--pk-accent-light);
	color: #6b4a06;
	font-size: 0.9rem;
}
.shop-note .bi { font-size: 1.25rem; color: var(--pk-accent); }
.shop-note a { color: var(--pk-primary); font-weight: 600; }
.shop-alert { border-radius: var(--radius-md); }

.shop-layout { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.shop-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
@media (min-width: 992px) {
	.shop-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 1.5rem; }
	/* Cột tóm tắt bám theo khi cuộn qua form dài */
	.shop-aside { position: sticky; top: calc(var(--header-sticky-h) + 1rem); }
}
@media (min-width: 1200px) {
	.shop-layout { grid-template-columns: minmax(0, 1fr) 390px; }
}

.shop-panel {
	background: var(--pk-surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	padding: 1.4rem 1.5rem;
}
@media (max-width: 575.98px) {
	.shop-panel { padding: 1.1rem 1rem; }
}
.shop-panel-title { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1.1rem; font-size: 1.05rem; font-weight: 800; }
.shop-panel-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--pk-primary-light);
	color: var(--pk-primary);
	font-size: 0.85rem;
	font-weight: 800;
}
.shop-link { color: var(--pk-primary); font-weight: 600; font-size: 0.92rem; }
.shop-link:hover { color: var(--pk-primary-dark); }
.shop-btn-quiet { border-radius: 999px; color: var(--pk-muted); font-weight: 600; }

/* Ô nhập trong 2 trang: viền đỏ nhạt khi focus thay cho xanh mặc định của Bootstrap */
.shop-page .form-label { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; }
.shop-page .form-control {
	border-radius: var(--radius-md);
	border-color: rgba(43, 35, 32, 0.14);
	padding: 0.6rem 0.85rem;
}
.shop-page .form-control:focus,
.shop-page .form-check-input:focus {
	border-color: rgba(79, 70, 229, 0.45);
	box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.12);
}
.shop-page .form-check-input:checked { background-color: var(--pk-primary); border-color: var(--pk-primary); }

/* ----- Giỏ hàng: từng dòng sản phẩm ----- */
.cart-panel { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.cart-line {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto 120px 2.5rem;
	grid-template-areas: "thumb info qty total remove";
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--line);
}
.cart-line-thumb { grid-area: thumb; }
.cart-line-info { grid-area: info; min-width: 0; }
.cart-line .qty-stepper { grid-area: qty; }
.cart-line-total { grid-area: total; text-align: right; font-weight: 800; font-size: 1.02rem; }
.cart-line-remove { grid-area: remove; }
.cart-line-thumb img {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: var(--radius-md);
	border: 1px solid var(--line);
	background: var(--pk-bg);
}
.cart-line-name { display: block; color: var(--pk-ink); font-weight: 700; line-height: 1.35; }
.cart-line-name:hover { color: var(--pk-primary); }
.cart-line-price { margin-top: 0.2rem; color: var(--pk-muted); font-size: 0.85rem; }
.cart-line-warning { margin-top: 0.35rem; color: var(--pk-primary); font-size: 0.82rem; font-weight: 600; }
.cart-line-badge {
	display: inline-block;
	margin-top: 0.35rem;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	background: var(--pk-primary-light);
	color: var(--pk-primary);
	font-size: 0.75rem;
	font-weight: 700;
}
.cart-line.is-unavailable .cart-line-thumb img { filter: grayscale(0.7); opacity: 0.7; }
.cart-line-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--pk-muted);
	transition: background 0.15s ease, color 0.15s ease;
}
.cart-line-remove:hover { background: var(--pk-primary-light); color: var(--pk-primary); }
@media (max-width: 767.98px) {
	/* Mobile: ảnh | tên + nút xoá, hàng dưới số lượng + thành tiền */
	.cart-line {
		grid-template-columns: 72px minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb info remove"
			"thumb qty total";
		gap: 0.6rem 0.85rem;
		align-items: start;
	}
	.cart-line-thumb img { width: 72px; height: 72px; }
	.cart-line-total { align-self: center; }
	.cart-line .qty-stepper { justify-self: start; }
}

.qty-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(43, 35, 32, 0.14);
	border-radius: 999px;
	background: var(--pk-surface);
	overflow: hidden;
}
.qty-stepper-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	border: none;
	background: transparent;
	color: var(--pk-ink);
	font-size: 1.05rem;
	transition: background 0.15s ease, color 0.15s ease;
}
.qty-stepper-btn:hover { background: var(--pk-primary-light); color: var(--pk-primary); }
.qty-stepper-input {
	width: 2.75rem;
	height: 2.1rem;
	border: none;
	text-align: center;
	font-weight: 700;
	background: transparent;
	-moz-appearance: textfield;
	appearance: textfield;
}
.qty-stepper-input:focus { outline: none; }
.qty-stepper:focus-within { border-color: rgba(79, 70, 229, 0.45); box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.12); }
.qty-stepper-input::-webkit-outer-spin-button,
.qty-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-panel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 0 0.6rem; }

.cart-empty { max-width: 560px; margin: 0 auto; padding: 3rem 1.5rem; text-align: center; }
.cart-empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 5.5rem;
	height: 5.5rem;
	margin-bottom: 1.1rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pk-primary-light) 0%, var(--pk-accent-light) 100%);
	color: var(--pk-primary);
	font-size: 2.4rem;
}
.cart-empty-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 0.35rem; }
.cart-empty-text { color: var(--pk-muted); margin-bottom: 1.4rem; }

/* ----- Cột tóm tắt (cả 2 trang) ----- */
.shop-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.shop-summary-head .shop-panel-title { margin: 0; }
.shop-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--line); }
.shop-summary-row strong { color: var(--pk-primary); font-size: 1.25rem; font-weight: 800; }

.shop-secure { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 0.85rem; color: var(--pk-muted); font-size: 0.78rem; text-align: center; }
.shop-secure .bi { color: #2f9e5b; }

/* Danh sách món ở trang thanh toán */
.summary-items { margin: 0 0 1rem; padding: 0 0 1rem; list-style: none; border-bottom: 1px dashed var(--line); display: flex; flex-direction: column; gap: 0.75rem; }
.summary-item { display: flex; align-items: center; gap: 0.75rem; }
.summary-item-thumb { position: relative; flex-shrink: 0; }
.summary-item-thumb img { display: block; width: 52px; height: 52px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--pk-bg); }
.summary-item-qty {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 1.3rem;
	height: 1.3rem;
	padding: 0 0.3rem;
	border-radius: 999px;
	background: var(--pk-ink);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.3rem;
	text-align: center;
}
.summary-item-name { flex: 1; min-width: 0; font-size: 0.88rem; font-weight: 600; line-height: 1.35; }
.summary-item-total { flex-shrink: 0; font-weight: 700; font-size: 0.9rem; white-space: nowrap; }

.summary-coupon { margin-bottom: 1rem; }
.coupon-field .form-control { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.coupon-field .btn {
	border-top-right-radius: 999px;
	border-bottom-right-radius: 999px;
	padding-inline: 1.1rem;
	background: var(--pk-ink);
	color: #fff;
	font-weight: 600;
}
.coupon-field .btn:hover { background: #000; color: #fff; }
.coupon-applied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.6rem 0.85rem;
	border: 1px dashed rgba(79, 70, 229, 0.4);
	border-radius: var(--radius-md);
	background: var(--pk-primary-light);
	font-size: 0.85rem;
	font-weight: 600;
}
.coupon-applied .bi { color: var(--pk-primary); margin-right: 0.35rem; }
.coupon-remove { border: none; background: none; padding: 0; color: var(--pk-muted); font-size: 0.82rem; text-decoration: underline; }
.coupon-remove:hover { color: var(--pk-primary); }

.summary-quote { padding: 1rem; border-radius: var(--radius-md); background: var(--pk-bg); }
.quote-summary > div { gap: 1rem; padding: 0.2rem 0; font-size: 0.9rem; }
.quote-summary dd { text-align: right; white-space: nowrap; }
.quote-summary > div:last-child { align-items: baseline; }

/* ----- Thanh toán: chọn phương thức (thẻ chọn, viền đỏ khi đang chọn) ----- */
.pay-options { display: flex; flex-direction: column; gap: 0.65rem; }
.pay-option {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 0;
	padding: 0.9rem 1rem;
	border: 1.5px solid rgba(43, 35, 32, 0.12);
	border-radius: var(--radius-md);
	background: var(--pk-surface);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.pay-option:hover { border-color: rgba(79, 70, 229, 0.35); }
.pay-option:has(.pay-option-input:checked) {
	border-color: var(--pk-primary);
	background: #fff7f7;
	box-shadow: 0 6px 16px rgba(79, 70, 229, 0.08);
}
.pay-option:has(.pay-option-input:focus-visible) { box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.18); }
.pay-option.is-disabled { cursor: not-allowed; opacity: 0.6; }
.pay-option.is-disabled:hover { border-color: rgba(43, 35, 32, 0.12); }
.pay-option-input { flex-shrink: 0; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--pk-primary); }
.pay-option-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 10px;
	background: var(--pk-primary-light);
	color: var(--pk-primary);
	font-size: 1.2rem;
}
.pay-option-icon.is-paypal { background: #e8f1fb; color: #003087; }
.pay-option-icon.is-wallet { background: var(--pk-accent-light); color: #a87410; }
.pay-option-body { flex: 1; min-width: 0; }
.pay-option-name { display: block; font-weight: 700; font-size: 0.93rem; line-height: 1.3; }
.pay-option-sub { display: block; margin-top: 0.1rem; color: var(--pk-muted); font-size: 0.8rem; }
.pay-option-amount { flex-shrink: 0; font-weight: 800; white-space: nowrap; }
.pay-option:has(.pay-option-input:checked) .pay-option-amount { color: var(--pk-primary); }
.pay-option-note { display: flex; gap: 0.45rem; color: var(--pk-muted); font-size: 0.82rem; }
.use-balance { margin-top: 1rem; padding: 0.75rem 1rem 0.75rem 2.6rem; border-radius: var(--radius-md); background: var(--pk-accent-light); font-size: 0.88rem; }
@media (max-width: 575.98px) {
	/* Mobile: số tiền xuống dòng dưới tên phương thức */
	.pay-option { flex-wrap: wrap; row-gap: 0.2rem; }
	/* thẳng cột với tên: radio 1.1rem + icon 2.5rem + 2 khoảng gap 0.85rem */
	.pay-option-amount { flex-basis: 100%; padding-left: calc(1.1rem + 2.5rem + 0.85rem * 2); }
}

/* ----- Trang kết quả đơn (checkout/result.php) ----- */
.result-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.25rem 1.5rem;
	margin-bottom: 1.25rem;
	padding: 1.75rem 1.75rem;
}
.result-hero::after {
	/* Vòng trang trí mờ góc phải, đổi màu theo trạng thái */
	content: "";
	position: absolute;
	right: -50px;
	top: -70px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	border: 28px solid currentColor;
	opacity: 0.06;
	pointer-events: none;
}
.result-hero.is-success { color: #2f9e5b; background: linear-gradient(120deg, #fff 0%, #f1faf4 100%); border-color: rgba(47, 158, 91, 0.18); }
.result-hero.is-pending { color: #0891b2; background: linear-gradient(120deg, #fff 0%, #fff8e8 100%); border-color: rgba(6, 182, 212, 0.25); }
.result-hero.is-cancelled { color: var(--pk-muted); }
.result-hero-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 4.25rem;
	height: 4.25rem;
	border-radius: 50%;
	background: currentColor;
	font-size: 2rem;
	box-shadow: 0 10px 24px rgba(43, 35, 32, 0.12);
}
.result-hero-icon .bi { color: #fff; }
.result-hero-body { flex: 1 1 320px; min-width: 0; color: var(--pk-ink); }
.result-hero-title { margin: 0 0 0.3rem; font-size: clamp(1.2rem, 1rem + 0.6vw, 1.45rem); font-weight: 800; }
.result-hero-text { margin: 0 0 0.75rem; color: var(--pk-muted); }
.result-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font-size: 0.88rem; }
.result-code {
	padding: 0.3rem 0.75rem;
	border: 1px dashed rgba(43, 35, 32, 0.25);
	border-radius: 999px;
	background: var(--pk-surface);
	color: var(--pk-muted);
}
.result-code strong { color: var(--pk-ink); letter-spacing: 0.02em; white-space: nowrap; }
.result-date { color: var(--pk-muted); }
.result-hero-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.6rem; }
@media (max-width: 575.98px) {
	.result-hero { padding: 1.4rem 1.1rem; }
	.result-hero-icon { width: 3.5rem; height: 3.5rem; font-size: 1.6rem; }
	.result-hero-actions { flex-basis: 100%; }
	.result-hero-actions .btn { flex: 1 1 auto; }
}

.result-items { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.result-items .summary-item-name small { display: block; margin-top: 0.1rem; color: var(--pk-muted); font-weight: 400; font-size: 0.78rem; }
.result-item-link { color: var(--pk-ink); }
.result-item-link:hover { color: var(--pk-primary); }

.result-delivery { display: flex; align-items: flex-start; gap: 0.9rem; }
.result-delivery-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--pk-primary) 0%, var(--pk-primary-dark) 100%);
	color: var(--pk-accent-light);
	font-size: 1.15rem;
}
.result-delivery-body { min-width: 0; }
.result-delivery-title { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 800; }
.result-delivery-line { color: var(--pk-muted); font-size: 0.9rem; }
.result-delivery-line strong { color: var(--pk-ink); }

.result-method { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--line); }
.result-method small { display: block; color: var(--pk-muted); font-size: 0.78rem; }
.result-method strong { display: block; font-size: 0.9rem; line-height: 1.3; }

.result-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 1rem;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
}
.result-status-badge.is-success { background: #e6f6ec; color: #23824a; }
.result-status-badge.is-pending { background: var(--pk-accent-light); color: #a87410; }
.result-status-badge.is-cancelled { background: #f1eeec; color: var(--pk-muted); }