/* ==========================================================================
   BrickCo - account.css (trang Tài khoản + Thông tin tài khoản)
   ========================================================================== */

body.page-template-page-templatesprofile-php,
body.page-template-page-templatesaccount-php,
body.page-template-page-templatesstore-php,
body.page-template-page-templatesloyalty-php,
body.page-template-page-templatesorders-php,
body.page-template-page-templatesvouchers-php,
body.page-template-page-templatesorder-detail-php,
body.page-template-page-templatescomplaints-php,
body.page-template-page-templatescomplaint-new-php { background:var(--gray-100); padding-bottom:0; }

/* Header riêng: tiêu đề to hơn, nằm chính giữa */
.detail-header.is-profile,
.detail-header.is-account,
.detail-header.is-store,
.detail-header.is-loyalty,
.detail-header.is-orders,
.detail-header.is-vouchers,
.detail-header.is-order-detail,
.detail-header.is-complaints,
.detail-header.is-complaint-new { box-shadow:var(--shadow-sm); }
.detail-header.is-profile .detail-header-inner,
.detail-header.is-account .detail-header-inner,
.detail-header.is-store .detail-header-inner,
.detail-header.is-loyalty .detail-header-inner,
.detail-header.is-orders .detail-header-inner,
.detail-header.is-vouchers .detail-header-inner,
.detail-header.is-order-detail .detail-header-inner,
.detail-header.is-complaints .detail-header-inner,
.detail-header.is-complaint-new .detail-header-inner { position:relative; }
.detail-header.is-profile .detail-header-title,
.detail-header.is-account .detail-header-title,
.detail-header.is-store .detail-header-title,
.detail-header.is-loyalty .detail-header-title,
.detail-header.is-orders .detail-header-title,
.detail-header.is-vouchers .detail-header-title,
.detail-header.is-order-detail .detail-header-title,
.detail-header.is-complaints .detail-header-title,
.detail-header.is-complaint-new .detail-header-title { position:absolute; left:50%; transform:translateX(-50%); font-size:1.125rem; font-weight:700; color:var(--gray-900); white-space:nowrap; }

.pf-main { padding:0.75rem 0 2rem; }
.pf-container { display:flex; flex-direction:column; gap:0.75rem; max-width:42rem; margin:0 auto; padding:0 0.75rem; }
.pf-card-head.is-simple { margin-bottom:0.75rem; }

/* ===== Thẻ cam đầu trang ===== */
.pf-hero { display:flex; align-items:center; gap:0.75rem; padding:1rem; border-radius:var(--radius-2xl); background:linear-gradient(to right,var(--orange-500),var(--orange-600)); color:var(--white); box-shadow:var(--shadow-sm); }
.pf-avatar { display:flex; flex-shrink:0; align-items:center; justify-content:center; width:3.5rem; height:3.5rem; border-radius:9999px; background:rgba(255,255,255,.2); }
.pf-hero-info { flex:1; min-width:0; }
.pf-hero-name { font-size:0.875rem; font-weight:700; overflow-wrap:anywhere; }
.pf-hero-email { margin-top:0.125rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:0.75rem; color:var(--orange-100); }
.pf-hero-badge { display:flex; flex-shrink:0; color:rgba(255,255,255,.8); }
.pf-avatar.is-sm { width:3rem; height:3rem; }
.pf-logout { display:flex; flex-shrink:0; align-items:center; gap:0.25rem; padding:0.5rem 0.75rem; border-radius:0.5rem; background:rgba(255,255,255,.15); color:var(--white); font-size:0.75rem; font-weight:500; transition:background .15s; }
.pf-logout:hover { background:rgba(255,255,255,.25); color:var(--white); }

/* ===== Thẻ trắng ===== */
.pf-card { padding:1rem; border-radius:var(--radius-2xl); background:var(--white); box-shadow:var(--shadow-sm); }
.pf-card-head { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem; padding:0 0.25rem; }
.pf-card-head > svg { flex-shrink:0; color:var(--orange-500); }
.pf-card-head h2 { font-size:1rem; font-weight:700; color:var(--gray-900); }
.pf-card-head p { font-size:0.75rem; color:var(--gray-500); }
.pf-card.is-compact { padding:0.75rem; }
.pf-card-head.is-muted > svg { color:var(--gray-700); }

/* ===== Trang Tài khoản: ô chức năng ===== */
.ac-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.75rem; }
.ac-tile { display:flex; align-items:center; gap:0.75rem; min-height:5.5rem; padding:0 0.75rem; border:1px solid var(--gray-200); border-radius:0.75rem; background:var(--white); color:inherit; text-align:left; transition:border-color .15s, background .15s; }
.ac-tile:hover { border-color:var(--orange-300); background:var(--orange-50); color:inherit; }
.ac-tile { position:relative; }
.ac-tile-lock { position:absolute; top:0.5rem; right:0.625rem; display:flex; color:var(--gray-300); }

/* Chưa đăng nhập: thẻ Đăng nhập / Đăng ký */
.ac-guest { display:flex; flex-direction:column; align-items:center; text-align:center; }
.ac-guest-icon { display:flex; padding:0.875rem; border-radius:9999px; background:var(--orange-50); color:var(--orange-500); }
.ac-guest-title { margin-top:0.75rem; font-size:0.9375rem; font-weight:700; color:var(--gray-900); }
.ac-guest-text { margin-top:0.25rem; font-size:0.75rem; color:var(--gray-500); }
.ac-guest-actions { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; width:100%; margin-top:1rem; }
.ac-guest-btn { padding:0.75rem; border:1px solid var(--orange-500); border-radius:0.75rem; background:var(--orange-500); color:var(--white); font-size:0.875rem; font-weight:600; transition:background .15s; }
.ac-guest-btn:hover { background:var(--orange-600); }
.ac-guest-btn.is-outline { border-color:var(--orange-300); background:var(--white); color:var(--orange-600); }
.ac-guest-btn.is-outline:hover { background:var(--orange-50); }
.ac-tile > svg:first-child { flex-shrink:0; color:var(--orange-500); stroke-width:1.8; }
.ac-tile > svg:last-child { flex-shrink:0; color:var(--gray-300); }
.ac-tile-label { flex:1; min-width:0; font-size:0.875rem; font-weight:500; line-height:1.25rem; color:var(--gray-800); }

/* ===== Trang Tài khoản: hỗ trợ ===== */
.ac-support-row { display:flex; align-items:center; gap:0.75rem; width:100%; padding:1rem 0; color:var(--gray-800); text-align:left; transition:color .15s; }
.ac-support-row + .ac-support-row { border-top:1px solid var(--gray-100); }
.ac-support-row:hover { color:var(--orange-600); }
.ac-support-row > svg:first-child { flex-shrink:0; color:var(--gray-700); stroke-width:1.8; }
.ac-support-row > svg:last-child { flex-shrink:0; color:var(--gray-400); }
.ac-support-label { flex:1; font-size:0.875rem; font-weight:500; }
.pf-card-head.is-simple + .ac-support { margin-top:-0.25rem; }

/* ===== Ô nhập ===== */
.pf-fields { display:flex; flex-direction:column; gap:0.75rem; }
.pf-field { display:block; }
.pf-label { display:block; margin-bottom:0.25rem; font-size:0.75rem; font-weight:500; color:var(--gray-700); }
.pf-input { display:block; width:100%; padding:0.625rem 0.75rem; border:1px solid var(--gray-200); border-radius:0.75rem; background:var(--white); font-size:0.875rem; color:var(--gray-900); outline:none; transition:border-color .15s, box-shadow .15s; }
.pf-input::placeholder { color:var(--gray-400); }
.pf-input:focus { border-color:var(--orange-400); box-shadow:0 0 0 3px var(--orange-100); }
.pf-input:disabled { background:var(--gray-50); color:var(--gray-500); cursor:not-allowed; }
select.pf-input { color:var(--gray-700); }
textarea.pf-input { line-height:1.25rem; resize:none; }
.pf-grid { display:grid; gap:0.5rem; }

.pf-btn { display:flex; align-items:center; justify-content:center; gap:0.5rem; width:100%; margin-top:1rem; padding:0.625rem; border-radius:0.75rem; background:var(--orange-500); color:var(--white); font-size:0.875rem; font-weight:600; box-shadow:var(--shadow-sm); transition:background .15s; }
.pf-btn:hover { background:var(--orange-600); }
.pf-btn.is-lg { padding:0.75rem; }
.pf-btn:disabled { opacity:.5; }

/* ===== Quên mật khẩu ===== */
.pf-link { display:flex; align-items:center; gap:0.75rem; padding:0.75rem; border:1px solid var(--gray-200); border-radius:0.75rem; transition:border-color .15s, background .15s; }
.pf-link:hover { border-color:var(--orange-300); background:var(--orange-50); }
.pf-link > svg:first-child { flex-shrink:0; color:var(--orange-500); }
.pf-link > svg:last-child { flex-shrink:0; color:var(--gray-300); }
.pf-link-body { flex:1; min-width:0; }
.pf-link-body strong { display:block; font-size:0.875rem; font-weight:600; color:var(--gray-900); }
.pf-link-body span { display:block; margin-top:0.125rem; font-size:0.75rem; color:var(--gray-500); }

/* ===== Trang Thông tin cửa hàng ===== */
.st-list { display:flex; flex-direction:column; gap:0.5rem; }
.st-row { display:flex; align-items:center; gap:0.75rem; padding:0.625rem 0.75rem; border:1px solid var(--gray-200); border-radius:0.75rem; background:var(--white); color:inherit; transition:border-color .15s, background .15s; }
.st-row:hover { border-color:var(--orange-300); background:var(--orange-50); color:inherit; }
.st-row > svg:first-child { flex-shrink:0; color:var(--orange-500); }
.st-row > svg:last-child { flex-shrink:0; color:var(--gray-300); }
.st-row-body { flex:1; min-width:0; }
.st-row-label { display:block; font-size:0.75rem; color:var(--gray-500); }
.st-row-value { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:0.875rem; font-weight:500; color:var(--gray-900); }
.st-row.is-fanpage:hover { border-color:#93c5fd; background:#eff6ff; }
.st-fb-icon { display:flex; flex-shrink:0; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border-radius:0.5rem; background:#dbeafe; color:#2563eb; }
.st-row-title { display:block; font-size:0.875rem; font-weight:700; color:var(--gray-900); }
.st-row-link { display:block; font-size:0.75rem; color:#3b82f6; }
.st-branch { display:block; padding:0.75rem; border:1px solid var(--gray-200); border-radius:0.75rem; background:var(--white); color:inherit; transition:border-color .15s, background .15s; }
.st-branch:hover { border-color:var(--orange-300); background:var(--orange-50); color:inherit; }
.st-branch-name { display:block; font-size:0.875rem; font-weight:700; color:var(--gray-900); }
.st-branch-address { display:flex; align-items:flex-start; gap:0.5rem; margin-top:0.25rem; font-size:0.875rem; line-height:1.5rem; color:var(--gray-600); }
.st-branch-address svg { flex-shrink:0; margin-top:0.25rem; color:var(--orange-500); }
.st-empty { font-size:0.875rem; color:var(--gray-500); text-align:center; }

/* ===== Trang Tích điểm ===== */
.lp-hero { display:flex; align-items:flex-start; justify-content:space-between; overflow:hidden; padding:1.25rem; border-radius:var(--radius-2xl); background:linear-gradient(to bottom right,var(--orange-500),var(--orange-600)); color:var(--white); box-shadow:var(--shadow-sm); }
.lp-hero-label { font-size:0.875rem; color:var(--orange-100); }
.lp-hero-points { margin:0.5rem 0 0.25rem; font-size:2.25rem; font-weight:700; line-height:1.1; letter-spacing:-0.025em; }
.lp-hero-icon { display:flex; padding:0.75rem; border-radius:9999px; background:rgba(255,255,255,.15); }
.lp-hero-icon svg { fill:currentColor; }

.lp-rule { display:flex; align-items:center; gap:0.75rem; }
.lp-rule-icon { display:flex; flex-shrink:0; padding:0.625rem; border-radius:0.75rem; background:var(--orange-50); color:var(--orange-500); }
.lp-rule-body { flex:1; min-width:0; }
.lp-rule-body h2 { font-size:0.875rem; font-weight:700; color:var(--gray-900); }
.lp-rule-body p { margin-top:0.25rem; font-size:0.75rem; line-height:1.25rem; color:var(--gray-500); }
.lp-rule > svg:last-child { flex-shrink:0; color:var(--gray-300); }

.lp-section-head { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; margin-bottom:1rem; }
.lp-section-head h2 { font-size:1rem; font-weight:700; color:var(--gray-900); }
.lp-section-head p { margin-top:0.25rem; font-size:0.75rem; color:var(--gray-500); }
.lp-section-head > svg { flex-shrink:0; color:var(--orange-500); }

.lp-grid { display:grid; gap:0.75rem; }
.lp-item { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--gray-200); border-radius:0.75rem; background:var(--white); transition:border-color .15s, box-shadow .15s; }
.lp-item:hover { border-color:var(--orange-200); box-shadow:var(--shadow-sm); }
.lp-item-media { position:relative; display:flex; align-items:center; justify-content:center; height:7rem; overflow:hidden; background:var(--gray-50); }
.lp-item-media img { width:100%; height:100%; object-fit:cover; }
.lp-item-media.is-logo { background:rgba(255,247,237,.7); }
.lp-item-media.is-logo img { width:4rem; height:4rem; object-fit:contain; }
.lp-tag { position:absolute; top:0; left:0; padding:0.125rem 0.5rem; border-radius:0 0 0.5rem 0; background:var(--orange-500); color:var(--white); font-size:0.625rem; font-weight:700; }
.lp-stock { position:absolute; right:0; bottom:0; padding:0.125rem 0.5rem; border-radius:0.5rem 0 0 0; background:var(--red-500); color:var(--white); font-size:0.625rem; font-weight:700; }
.lp-item-body { display:flex; flex:1; flex-direction:column; padding:0.75rem; }
.lp-item-title { font-size:0.875rem; font-weight:600; color:var(--gray-900); }
.lp-item-title.is-clamp { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lp-item-title a:hover { color:var(--orange-600); }
.lp-item-desc { min-height:2rem; margin-top:0.25rem; font-size:0.75rem; line-height:1rem; color:var(--gray-500); }
.lp-item-price { display:flex; align-items:baseline; gap:0.375rem; margin-top:0.25rem; }
.lp-item-price strong { font-size:0.75rem; font-weight:700; color:var(--orange-600); }
.lp-item-price del { font-size:0.6875rem; color:var(--gray-400); }
.lp-item-meta { display:flex; align-items:center; gap:0.25rem; margin-top:0.5rem; font-size:0.6875rem; color:var(--gray-500); }
.lp-star { fill:var(--orange-400); }
.lp-item-foot { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; margin-top:auto; padding-top:0.75rem; }
.lp-need { font-size:0.6875rem; font-weight:500; color:var(--gray-400); }
.lp-need.is-ok { color:#059669; }
.lp-cost { display:flex; align-items:center; gap:0.25rem; font-size:0.875rem; font-weight:700; color:var(--orange-600); }
.lp-cost svg { fill:currentColor; }
.lp-btn { flex-shrink:0; padding:0.5rem 0.75rem; border-radius:0.5rem; background:var(--orange-500); color:var(--white); font-size:0.75rem; font-weight:600; transition:background .15s; }
.lp-btn:hover { background:var(--orange-600); }
.lp-btn:disabled { background:var(--gray-100); color:var(--gray-400); cursor:not-allowed; }

.lp-history { padding:0; overflow:hidden; }
.lp-history-head { display:flex; align-items:center; gap:0.5rem; width:100%; padding:0.75rem 1rem; border-bottom:1px solid var(--gray-100); text-align:left; transition:background .15s; }
.lp-history-head:hover { background:var(--gray-50); }
.lp-history-head:disabled { cursor:default; }
.lp-history-head:disabled:hover { background:transparent; }
.lp-empty { padding:1rem; font-size:0.8125rem; color:var(--gray-500); text-align:center; }
.lp-btn:disabled { white-space:nowrap; }
.lp-history-head > svg { color:var(--gray-700); }
.lp-history-head h2 { font-size:0.875rem; font-weight:700; color:var(--gray-900); }
.lp-more { display:flex; align-items:center; gap:0.25rem; margin-left:auto; font-size:0.75rem; font-weight:500; color:var(--orange-600); }
.lp-history-row { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; padding:0.75rem 1rem; }
.lp-history-row + .lp-history-row { border-top:1px solid var(--gray-100); }
.lp-history-title { font-size:0.875rem; color:var(--gray-800); }
.lp-history-meta { margin-top:0.25rem; font-size:0.75rem; color:var(--gray-400); }
.lp-history-points { flex-shrink:0; font-size:0.875rem; font-weight:600; color:#059669; }
.lp-history-points.is-minus { color:var(--red-500); }

.lp-policy { display:flex; align-items:flex-start; gap:0.5rem; padding:0 0.5rem; font-size:0.75rem; line-height:1.25rem; color:var(--gray-500); }
.lp-policy svg { flex-shrink:0; margin-top:0.125rem; }

@media (min-width:640px) {
	.lp-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ===== Trang Đơn hàng ===== */
.od-tabs { position:sticky; top:3.5rem; z-index:20; overflow-x:auto; border-bottom:1px solid var(--gray-200); background:var(--white); scrollbar-width:none; }
.od-tabs::-webkit-scrollbar { display:none; }
.od-tabs-inner { display:flex; min-width:max-content; max-width:42rem; margin:0 auto; }
.od-tab { position:relative; padding:0.75rem 1rem; font-size:0.875rem; color:var(--gray-500); white-space:nowrap; transition:color .15s; }
.od-tab:hover { color:var(--orange-600); }
.od-tab.is-active { font-weight:600; color:var(--orange-600); }
.od-tab.is-active::after { content:''; position:absolute; left:0.75rem; right:0.75rem; bottom:0; height:2px; border-radius:9999px; background:var(--orange-500); }

.od-card { overflow:hidden; border-radius:var(--radius-2xl); background:var(--white); box-shadow:var(--shadow-sm); }
.od-head { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; padding:0.75rem 1rem; border-bottom:1px solid var(--gray-100); }
.od-code { display:flex; align-items:center; gap:0.5rem; min-width:0; font-size:0.75rem; color:var(--gray-500); }
.od-code svg { flex-shrink:0; }
.od-status { display:flex; flex-shrink:0; align-items:center; gap:0.25rem; font-size:0.875rem; font-weight:500; }
.od-status.is-orange { color:var(--orange-600); }
.od-status.is-blue { color:#2563eb; }
.od-status.is-green { color:#059669; }
.od-status.is-gray { color:var(--gray-500); }

.od-item { display:flex; gap:0.75rem; padding:0.75rem 1rem; color:inherit; transition:background .15s; }
.od-item + .od-item { border-top:1px solid var(--gray-100); }
.od-item:hover { background:var(--gray-50); color:inherit; }
.od-item-img { flex-shrink:0; width:4rem; height:4rem; border-radius:0.5rem; background:var(--gray-100); object-fit:cover; }
.od-item-info { flex:1; min-width:0; }
.od-item-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:0.875rem; color:var(--gray-800); }
.od-item-qty { display:block; margin-top:0.25rem; font-size:0.75rem; color:var(--gray-500); }
.od-item-price { flex-shrink:0; font-size:0.875rem; font-weight:500; color:var(--gray-800); }

.od-summary { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; padding:0.75rem 1rem; border-top:1px solid var(--gray-100); }
.od-meta { font-size:0.75rem; color:var(--gray-500); }
.od-total { font-size:0.875rem; color:var(--gray-800); text-align:right; }
.od-total b { font-size:1rem; color:var(--orange-600); }

.od-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:0.5rem; padding:0.75rem 1rem; border-top:1px solid var(--gray-100); }
.od-btn { display:inline-flex; align-items:center; gap:0.125rem; padding:0.5rem 0.75rem; border:1px solid var(--gray-300); border-radius:0.5rem; background:var(--white); color:var(--gray-700); font-size:0.75rem; font-weight:500; transition:border-color .15s, color .15s, background .15s; }
.od-btn.is-outline:hover { border-color:var(--orange-300); color:var(--orange-600); }
.od-btn.is-danger:hover { border-color:#fca5a5; color:#dc2626; }
.od-btn.is-primary { border-color:var(--orange-500); background:var(--orange-500); color:var(--white); font-weight:600; }
.od-btn.is-primary:hover { border-color:var(--orange-600); background:var(--orange-600); }

.od-pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0.25rem; margin-top:0.5rem; }
.od-pagination .page-numbers { display:flex; align-items:center; justify-content:center; min-width:2.25rem; height:2.25rem; padding:0 0.5rem; border:1px solid var(--gray-200); border-radius:0.5rem; background:var(--white); color:var(--gray-700); font-size:0.875rem; font-weight:600; transition:border-color .15s, color .15s; }
.od-pagination a.page-numbers:hover { border-color:var(--orange-500); color:var(--orange-600); }
.od-pagination .page-numbers.current { border-color:var(--orange-500); background:var(--orange-500); color:var(--white); }
.od-pagination .page-numbers.dots { border-color:transparent; background:none; }
.od-empty { display:flex; flex-direction:column; align-items:center; gap:0.75rem; padding:3rem 1rem; border-radius:var(--radius-2xl); background:var(--white); color:var(--gray-300); text-align:center; }
.od-empty p { font-size:0.875rem; color:var(--gray-500); }
.od-empty-btn { width:auto; margin-top:0; padding:0.625rem 1.5rem; }
.od-btn:disabled { opacity:.5; cursor:not-allowed; }


@media (min-width:640px) {
	.od-tabs { top:4rem; }
}
@media (min-width:601px) { .admin-bar .od-tabs { top:calc(3.5rem + 46px); } }
@media (min-width:640px) { .admin-bar .od-tabs { top:calc(4rem + 46px); } }
@media (min-width:783px) { .admin-bar .od-tabs { top:calc(4rem + 32px); } }

/* ===== Trang Mã khuyến mãi ===== */
.vc-hero { display:flex; align-items:center; gap:0.75rem; padding:0.75rem; border-radius:var(--radius-2xl); background:linear-gradient(to right,var(--orange-500),var(--orange-600)); color:var(--white); box-shadow:var(--shadow-sm); }
.vc-hero-icon { display:flex; flex-shrink:0; padding:0.625rem; border-radius:0.75rem; background:rgba(255,255,255,.15); }
.vc-hero h2 { font-size:0.875rem; font-weight:700; }
.vc-hero p { margin-top:0.125rem; font-size:0.6875rem; color:var(--orange-100); }
.vc-empty { display:flex; flex-direction:column; align-items:center; gap:0.5rem; padding:2rem 1rem; border-radius:var(--radius-2xl); background:var(--white); color:var(--gray-300); text-align:center; box-shadow:var(--shadow-sm); }
.vc-empty p { max-width:18rem; font-size:0.8125rem; color:var(--gray-500); }

.vc-group { padding:0.75rem; border-radius:var(--radius-2xl); background:var(--gray-100); }
.vc-group-head { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem; padding:0 0.25rem; }
.vc-group-head h2 { font-size:0.875rem; font-weight:700; color:var(--gray-800); }
.vc-group-icon { display:flex; padding:0.375rem; border-radius:0.5rem; color:var(--white); }
.vc-count { margin-left:auto; padding:0.125rem 0.5rem; border-radius:9999px; background:var(--white); box-shadow:var(--shadow-sm); font-size:0.6875rem; font-weight:500; color:var(--gray-500); }

.vc-grid { display:grid; gap:0.625rem; }
.vc-card { display:flex; min-height:6.5rem; overflow:hidden; border-radius:0.75rem; background:var(--white); box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .15s; }
.vc-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.vc-stub { display:flex; flex-shrink:0; flex-direction:column; align-items:center; justify-content:center; width:4.25rem; padding:0 0.375rem; border-right:1px dashed rgba(255,255,255,.7); color:var(--white); text-align:center; }
.vc-value { margin-top:0.375rem; font-size:1.125rem; font-weight:700; line-height:1; }
.vc-kind { margin-top:0.125rem; font-size:0.5625rem; font-weight:500; letter-spacing:.025em; text-transform:uppercase; }
.vc-body { display:flex; flex:1; flex-direction:column; min-width:0; padding:0.625rem; }
.vc-title-row { display:flex; align-items:center; gap:0.375rem; min-width:0; }
.vc-tag { flex-shrink:0; padding:0.125rem 0.375rem; border-radius:0.25rem; font-size:0.5625rem; font-weight:600; text-transform:uppercase; }
.vc-title { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:0.75rem; font-weight:700; color:var(--gray-900); }
.vc-desc { margin-top:0.125rem; font-size:0.6875rem; line-height:1.25; color:var(--gray-500); }
.vc-foot { display:flex; align-items:center; gap:0.5rem; margin-top:auto; padding-top:0.375rem; font-size:0.625rem; color:var(--gray-500); }
.vc-expiry { margin-left:auto; color:var(--gray-400); }

/* Bảng màu voucher: nền đậm (dải màu, icon nhóm) + nền nhạt (nhãn loại) */
.vc-stub.is-violet, .vc-group-icon.is-violet { background:#8b5cf6; }
.vc-stub.is-orange, .vc-group-icon.is-orange { background:var(--orange-500); }
.vc-stub.is-amber, .vc-group-icon.is-amber { background:var(--amber-500); }
.vc-stub.is-blue, .vc-group-icon.is-blue { background:#3b82f6; }
.vc-stub.is-emerald, .vc-group-icon.is-emerald { background:#10b981; }
.vc-stub.is-rose, .vc-group-icon.is-rose { background:var(--rose-500); }
.vc-tag.is-violet { background:#ede9fe; color:#6d28d9; }
.vc-tag.is-orange { background:var(--orange-100); color:var(--orange-700); }
.vc-tag.is-amber { background:#fef3c7; color:#b45309; }
.vc-tag.is-blue { background:#dbeafe; color:#1d4ed8; }
.vc-tag.is-emerald { background:#d1fae5; color:#047857; }
.vc-tag.is-rose { background:#ffe4e6; color:#be123c; }

.vc-howto { display:flex; align-items:flex-start; gap:0.5rem; padding:0.625rem; border:1px solid var(--gray-200); border-radius:0.75rem; background:var(--white); box-shadow:var(--shadow-sm); font-size:0.6875rem; line-height:1rem; color:var(--gray-500); }
.vc-howto > svg:first-child { flex-shrink:0; margin-top:0.125rem; color:var(--gray-400); }
.vc-howto > svg:last-child { flex-shrink:0; margin-left:auto; color:var(--gray-300); }
.vc-howto-title { margin-bottom:0.125rem; font-weight:600; color:var(--gray-700); }
.vc-howto b { color:var(--gray-700); }

.vc-continue { display:flex; align-items:center; justify-content:center; gap:0.25rem; padding:0.5rem; border-radius:0.75rem; font-size:0.875rem; font-weight:500; color:var(--orange-600); transition:background .15s; }
.vc-continue:hover { background:var(--orange-50); color:var(--orange-600); }

@media (min-width:640px) {
	.vc-hero { padding:1rem; }
	.vc-hero h2 { font-size:1rem; }
	.vc-hero p { font-size:0.75rem; }
	.vc-group { padding:1rem; }
	.vc-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.vc-howto { padding:0.75rem; }
}

@media (min-width:640px) {
	.pf-main { padding-top:1rem; }
	.pf-container { padding:0 1rem; }
	.pf-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.pf-card.is-compact { padding:1rem; }
}

/* ===== Chi tiết đơn hàng (page-templates/order-detail.php) ===== */
.odp .pf-card { padding:1rem; }
.odp-grow { flex:1; min-width:0; }
.odp-strong { font-size:0.875rem; font-weight:600; color:var(--gray-900); }
.odp-muted { margin-top:0.125rem; font-size:0.75rem; color:var(--gray-500); }
.odp-text { font-size:0.875rem; color:var(--gray-700); }
.odp-text + .odp-text { margin-top:0.125rem; }
.odp-note { margin-top:0.5rem; }
.odp-title { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem; font-size:0.875rem; font-weight:700; color:var(--gray-900); }
.odp-title svg { flex-shrink:0; color:var(--orange-500); }
.odp-title.is-plain { margin-bottom:0.75rem; }

/* Trạng thái + các mốc */
.odp-status { display:flex; align-items:center; gap:0.75rem; }
.odp-status-icon { display:flex; padding:0.5rem; border-radius:9999px; background:var(--gray-100); }
.odp-status-label { font-size:0.875rem; font-weight:600; }
.odp-status-icon.is-orange, .odp-status-label.is-orange { color:var(--orange-600); }
.odp-status-icon.is-blue, .odp-status-label.is-blue { color:#2563eb; }
.odp-status-icon.is-green, .odp-status-label.is-green { color:#059669; }
.odp-status-icon.is-gray, .odp-status-label.is-gray { color:var(--gray-500); }
.odp-steps { display:flex; align-items:center; justify-content:space-between; margin-top:1.25rem; font-size:0.75rem; color:var(--gray-400); }
.odp-step { display:flex; flex-direction:column; align-items:center; gap:0.25rem; text-align:center; }
.odp-step.is-done { color:var(--gray-700); }
.odp-step.is-done svg { color:var(--orange-500); }
.odp-step-line { flex:1; height:1px; margin:0 0.5rem 1.125rem; background:var(--gray-200); }
.odp-step-line.is-done { background:var(--orange-400); }

/* Giao hàng */
.odp-ship, .odp-points { display:flex; align-items:center; gap:0.75rem; }
.odp-soft-icon { display:flex; flex-shrink:0; padding:0.5rem; border-radius:0.5rem; background:var(--orange-50); color:var(--orange-500); }
.odp-soft-icon.is-star svg { fill:currentColor; }
.odp-badge { flex-shrink:0; padding:0.25rem 0.75rem; border-radius:9999px; font-size:0.75rem; font-weight:500; }
.odp-badge.is-orange { background:var(--orange-50); color:var(--orange-600); }
.odp-badge.is-blue { background:#eff6ff; color:#2563eb; }
.odp-badge.is-green { background:#ecfdf5; color:#059669; }
.odp-badge.is-gray { background:var(--gray-100); color:var(--gray-500); }

/* Theo dõi giao hàng: dòng thời gian dọc, mặc định chỉ hiện mốc mới nhất */
.odp-track-head { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; margin-bottom:0.75rem; }
.odp-track-head .odp-title { margin-bottom:0; }
.odp-link { display:flex; flex-shrink:0; align-items:center; gap:0.25rem; font-size:0.75rem; font-weight:500; color:var(--orange-600); }
.odp-link svg { transition:transform .2s; }
.odp-track.is-open .odp-link svg { transform:rotate(180deg); }
.odp-timeline { list-style:none; }
.odp-tl { position:relative; display:flex; gap:0.75rem; padding-bottom:1.5rem; }
.odp-tl:last-child { padding-bottom:0; }
.odp-tl::before { content:''; position:absolute; top:1.5rem; bottom:0; left:0.6875rem; width:2px; background:var(--orange-400); }
.odp-tl:last-child::before { display:none; }
.odp-tl-dot { position:relative; z-index:1; display:flex; flex-shrink:0; align-items:center; justify-content:center; width:1.5rem; height:1.5rem; border-radius:9999px; background:var(--orange-500); color:var(--white); }
.odp-tl-dot svg { stroke-width:3; }
.odp-tl.is-current .odp-tl-dot { box-shadow:0 0 0 4px var(--orange-100); }
.odp-tl-body { flex:1; min-width:0; padding-top:0.125rem; }
.odp-tl-title { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; font-size:0.875rem; font-weight:600; line-height:1.3; color:var(--gray-900); }
.odp-tl.is-current .odp-tl-title { color:var(--orange-600); }
.odp-tl-badge { padding:0.0625rem 0.375rem; border-radius:0.25rem; background:var(--orange-100); color:var(--orange-600); font-size:0.625rem; font-weight:600; }
.odp-tl-time { margin-top:0.25rem; font-size:0.75rem; color:var(--gray-500); }
.odp-tl-desc { margin-top:0.25rem; font-size:0.75rem; color:var(--gray-400); }

/* Sản phẩm */
.odp .odp-items { padding:0; overflow:hidden; }
.odp-items-head { padding:0.75rem 1rem; border-bottom:1px solid var(--gray-100); font-size:0.875rem; font-weight:700; color:var(--gray-900); }
.odp-items-head span { margin-left:0.25rem; font-size:0.75rem; font-weight:500; color:var(--gray-500); }
.odp-item { display:flex; gap:0.75rem; padding:1rem; color:inherit; transition:background .15s; }
.odp-item + .odp-item { border-top:1px solid var(--gray-100); }
a.odp-item:hover { background:var(--gray-50); color:inherit; }
.odp-item-img { flex-shrink:0; width:4rem; height:4rem; border-radius:0.5rem; background:var(--gray-100); object-fit:cover; }
.odp-item-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:0.875rem; color:var(--gray-800); }
.odp-item .odp-muted { display:block; margin-top:0.5rem; }
.odp-item-price { flex-shrink:0; font-size:0.875rem; font-weight:600; color:var(--orange-600); }
.odp-item-side { display:flex; flex-shrink:0; flex-direction:column; align-items:flex-end; gap:0.25rem; }
.odp-gift-tag { display:inline-flex; align-items:center; gap:0.125rem; padding:0.125rem 0.375rem; border-radius:0.25rem; background:#ede9fe; color:#7c3aed; font-size:0.625rem; font-weight:600; }
.odp-free { font-size:0.875rem; font-weight:600; color:#059669; }

/* Thanh toán */
.odp-rows { display:flex; flex-direction:column; gap:0.625rem; font-size:0.875rem; }
.odp-row { display:flex; justify-content:space-between; gap:1rem; color:var(--gray-600); }
.odp-row span:first-child { display:flex; align-items:center; gap:0.25rem; }
.odp-row.is-discount { color:#059669; }
.odp-row.is-total { padding-top:0.75rem; border-top:1px solid var(--gray-100); }
.odp-row.is-total span:first-child { font-weight:600; color:var(--gray-900); }
.odp-row.is-total span:last-child { font-size:1.125rem; font-weight:700; color:var(--orange-600); }
.odp-pay { display:flex; align-items:center; gap:0.5rem; margin-top:0.75rem; padding-top:0.75rem; border-top:1px solid var(--gray-100); font-size:0.75rem; color:var(--gray-500); }
.odp-pay + .odp-pay { margin-top:0; padding-top:0.5rem; border-top:0; }

/* Điểm tích lũy */
.odp-points .odp-muted b { color:var(--orange-600); }
.odp-outline-btn { display:flex; flex-shrink:0; align-items:center; gap:0.25rem; padding:0.5rem 0.75rem; border:1px solid var(--orange-200); border-radius:0.5rem; font-size:0.75rem; font-weight:500; color:var(--orange-600); transition:background .15s; }
.odp-outline-btn:hover { background:var(--orange-50); color:var(--orange-600); }

/* Thao tác */
.odp-actions { display:flex; gap:0.5rem; }
.odp-action { display:flex; flex:1; align-items:center; justify-content:center; gap:0.25rem; padding:0.75rem 0.5rem; border:1px solid var(--gray-300); border-radius:0.75rem; background:var(--white); color:var(--gray-700); font-size:0.875rem; font-weight:500; transition:border-color .15s, color .15s, background .15s; }
.odp-action:hover { border-color:var(--orange-300); color:var(--orange-600); }
.odp-action.is-danger { border-color:#fca5a5; color:#dc2626; }
.odp-action.is-danger:hover { background:#fef2f2; }
.odp-action.is-primary { border-color:var(--orange-500); background:var(--orange-500); color:var(--white); font-weight:600; }
.odp-action.is-primary:hover { background:var(--orange-600); border-color:var(--orange-600); color:var(--white); }
.odp-action:disabled { opacity:.5; cursor:not-allowed; }

/* Đánh giá đơn hàng: popup + box "Đánh giá của bạn" */
.odp .stars { display:inline-flex; gap:0.125rem; }
.odp .star { fill:var(--gray-300); }
.odp .star.is-on { fill:#fb923c; }
.odp-reviewed-badge { margin-left:auto; padding:0.125rem 0.5rem; border-radius:9999px; background:#ecfdf5; color:#059669; font-size:0.6875rem; font-weight:600; }
.odp-rv + .odp-rv { margin-top:0.75rem; padding-top:0.75rem; border-top:1px solid var(--gray-100); }
.odp-rv-head { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; }
.odp-rv-name { min-width:0; font-size:0.8125rem; font-weight:500; color:var(--gray-800); }
.odp-rv-name small { display:block; font-size:0.6875rem; font-weight:400; color:var(--gray-500); }
.odp-rv-text { margin-top:0.375rem; font-size:0.875rem; color:var(--gray-700); white-space:pre-line; }

.odp-rv-item { display:flex; flex-direction:column; gap:0.625rem; padding-bottom:1rem; border-bottom:1px solid var(--gray-100); }
.odp-rv-product { display:flex; align-items:center; gap:0.75rem; }
.odp-rv-img { flex-shrink:0; width:3rem; height:3rem; border-radius:0.5rem; object-fit:cover; background:var(--gray-100); }
.odp-rv-product .odp-muted { display:block; }
.odp-rv-stars { display:flex; align-items:center; gap:0.25rem; }
.odp-rv-star { display:flex; padding:0.125rem; }
.odp-rv-star svg { fill:var(--gray-200); transition:fill .15s, transform .15s; }
.odp-rv-star.is-on svg { fill:#fb923c; }
.odp-rv-star:hover svg { transform:scale(1.1); }
.odp-rv-label { margin-left:0.5rem; font-size:0.8125rem; font-weight:600; color:var(--orange-600); }

/* ===== Khiếu nại (page-templates/complaints.php + complaint-new.php) ===== */
.kn .pf-card { padding:1rem; }
.kn-form { display:flex; flex-direction:column; gap:0.75rem; }
.kn-banner { display:flex; align-items:center; gap:0.75rem; padding:0.75rem 1rem; border-radius:var(--radius-2xl); background:#eff6ff; box-shadow:var(--shadow-sm); }
.kn-banner-icon { display:flex; flex-shrink:0; padding:0.5rem; border-radius:0.5rem; background:#dbeafe; color:#2563eb; }
.kn-banner-title { font-size:0.875rem; font-weight:600; color:#1e3a8a; }
.kn-banner-text { margin-top:0.125rem; font-size:0.75rem; color:#2563eb; }

.kn-fields { display:flex; flex-direction:column; gap:1rem; }
.kn-field { display:block; }
.kn-label { display:block; margin-bottom:0.375rem; font-size:0.875rem; font-weight:500; color:var(--gray-700); }
.kn-required { color:var(--red-500); }
.kn-input { display:block; width:100%; padding:0.625rem 0.75rem; border:1px solid var(--gray-200); border-radius:0.75rem; background:var(--white); font-size:0.875rem; line-height:1.25rem; color:var(--gray-900); outline:none; transition:border-color .15s, box-shadow .15s; }
textarea.kn-input { resize:none; }
.kn-input::placeholder { color:var(--gray-400); }
.kn-input:focus { border-color:var(--orange-400); box-shadow:0 0 0 3px var(--orange-100); }
.kn-input[readonly] { background:var(--gray-50); color:var(--gray-600); }
.kn-hint { display:block; margin-top:0.375rem; font-size:0.75rem; color:var(--gray-500); }
.kn-field > .kn-hint:first-of-type { margin:0 0 0.5rem; }

.kn-images { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0.5rem; }
.kn-add { display:flex; aspect-ratio:1; align-items:center; justify-content:center; border:2px dashed var(--gray-300); border-radius:0.5rem; background:var(--gray-50); color:var(--gray-400); cursor:pointer; transition:border-color .15s, color .15s; }
.kn-add:hover { border-color:var(--orange-400); color:var(--orange-500); }
.kn-add[hidden] { display:none; }
.kn-thumb { position:relative; aspect-ratio:1; overflow:hidden; border-radius:0.5rem; background:var(--gray-100); }
.kn-thumb img { width:100%; height:100%; object-fit:cover; }
.kn-thumb-remove { position:absolute; top:0.25rem; right:0.25rem; display:flex; align-items:center; justify-content:center; width:1.375rem; height:1.375rem; border-radius:9999px; background:rgba(0,0,0,.6); color:var(--white); font-size:1rem; line-height:1; }

.kn-contact { display:flex; flex-direction:column; gap:0.5rem; }
.kn-contact-head { display:flex; align-items:center; justify-content:space-between; }
.kn-contact-title { display:flex; align-items:center; gap:0.375rem; font-size:0.875rem; font-weight:700; color:var(--gray-900); }
.kn-contact-title svg { color:var(--orange-500); }
.kn-link { font-size:0.8125rem; font-weight:500; color:var(--orange-600); }
.kn-contact-row, .kn-row { display:flex; justify-content:space-between; gap:1rem; font-size:0.875rem; color:var(--gray-500); }
.kn-contact-row strong, .kn-row strong { font-weight:500; color:var(--gray-900); text-align:right; }
.kn-row + .kn-row { margin-top:0.5rem; }

.kn-submit { display:flex; align-items:center; justify-content:center; gap:0.5rem; width:100%; padding:0.75rem; border-radius:0.75rem; background:var(--orange-500); color:var(--white); font-size:0.875rem; font-weight:600; box-shadow:var(--shadow-sm); transition:background .15s; }
.kn-submit:hover { background:var(--orange-600); }
.kn-submit:disabled { opacity:.6; cursor:wait; }

.kn-btn { display:flex; align-items:center; justify-content:center; padding:0.75rem; border:1px solid var(--orange-500); border-radius:0.75rem; background:var(--orange-500); color:var(--white); font-size:0.875rem; font-weight:600; }
.kn-btn:hover { background:var(--orange-600); color:var(--white); }
.kn-btn.is-outline { border-color:var(--gray-300); background:var(--white); color:var(--gray-700); }
.kn-btn.is-outline:hover { border-color:var(--orange-300); color:var(--orange-600); }
.kn-empty { display:flex; flex-direction:column; align-items:center; gap:0.75rem; text-align:center; color:var(--orange-500); }
.kn-empty p { font-size:0.875rem; color:var(--gray-700); }

/* Danh sách + chi tiết */
.kn-create { display:flex; align-items:center; gap:0.75rem; padding:0.875rem 1rem; border:1px dashed var(--orange-300); border-radius:var(--radius-2xl); background:var(--white); color:inherit; }
.kn-create:hover { background:var(--orange-50); color:inherit; }
.kn-create > span:nth-child(2) { flex:1; min-width:0; }
.kn-create strong { display:block; font-size:0.875rem; color:var(--gray-900); }
.kn-create small { display:block; margin-top:0.125rem; font-size:0.75rem; color:var(--gray-500); }
.kn-create > svg { color:var(--gray-400); }
.kn-create-icon { display:flex; padding:0.5rem; border-radius:9999px; background:var(--orange-500); color:var(--white); }

.kn-card { display:block; padding:1rem; border-radius:var(--radius-2xl); background:var(--white); color:inherit; box-shadow:var(--shadow-sm); transition:box-shadow .15s; }
.kn-card:hover { color:inherit; box-shadow:0 4px 12px rgba(0,0,0,.08); }
.kn-card[hidden] { display:none; }
.kn-head { display:flex; align-items:flex-start; justify-content:space-between; gap:0.75rem; }
.kn-code { font-size:0.9375rem; font-weight:700; color:var(--gray-900); }
.kn-muted { margin-top:0.125rem; font-size:0.75rem; color:var(--gray-500); }
/* Màu theo trạng thái (Khiếu nại > Trạng thái khiếu nại), truyền qua --kn. */
.kn-status { --kn:#6b7280; display:inline-flex; flex-shrink:0; align-items:center; gap:0.25rem; padding:0.25rem 0.625rem; border-radius:9999px; background:color-mix(in srgb, var(--kn) 12%, #fff); color:color-mix(in srgb, var(--kn) 85%, #000); font-size:0.75rem; font-weight:600; }
.kn-card-reason { margin-top:0.625rem; font-size:0.875rem; color:var(--gray-700); }
.kn-thumbs { display:flex; gap:0.375rem; margin-top:0.625rem; }
.kn-thumbs img { width:3rem; height:3rem; border-radius:0.375rem; object-fit:cover; }
.kn-card-reply { display:flex; align-items:center; gap:0.25rem; margin-top:0.625rem; font-size:0.75rem; font-weight:500; color:#059669; }

.kn-steps { display:flex; align-items:center; margin-top:1.25rem; font-size:0.75rem; color:var(--gray-400); }
.kn-step { display:flex; flex-direction:column; align-items:center; gap:0.25rem; text-align:center; }
.kn-step.is-done { color:var(--gray-700); }
.kn-step.is-done svg { color:var(--orange-500); }
.kn-step-line { flex:1; height:1px; margin:0 0.5rem 1.125rem; background:var(--gray-200); }
.kn-step-line.is-done { background:var(--orange-400); }

.kn-reply { padding:1rem; border-left:3px solid #10b981; border-radius:var(--radius-2xl); background:#ecfdf5; }
.kn-reply-title { display:flex; align-items:center; gap:0.375rem; font-size:0.875rem; font-weight:700; color:#047857; }
.kn-reply-text { margin-top:0.375rem; font-size:0.875rem; line-height:1.5; color:var(--gray-800); white-space:pre-line; }
.kn-section-title { margin-bottom:0.75rem; font-size:0.875rem; font-weight:700; color:var(--gray-900); }
.kn-reason { margin-top:0.75rem; padding:0.75rem; border-radius:0.75rem; background:var(--gray-50); font-size:0.875rem; line-height:1.5; color:var(--gray-700); white-space:pre-line; }
.kn-gallery { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0.375rem; margin-top:0.75rem; }
.kn-gallery img { width:100%; aspect-ratio:1; border-radius:0.5rem; object-fit:cover; }

@media (min-width:640px) {
	.kn-images { grid-template-columns:repeat(5,minmax(0,1fr)); }
}