/* ==========================================================
   PAGE-SPECIFIC STYLES
   ========================================================== */

/* ===================== AUTH PAGES ===================== */
.auth-wrap { min-height: calc(100vh - var(--header-h) - var(--topbar-h)); display: grid; grid-template-columns: 1fr 1fr; }
.auth-visual { position: relative; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); display: flex; flex-direction: column; justify-content: center; padding: 60px; color: #fff; overflow: hidden; }
.auth-visual::after { content: '👟'; position: absolute; right: -60px; bottom: -60px; font-size: 320px; opacity: .12; }
.auth-visual .av-logo { font-size: 30px; font-weight: 900; letter-spacing: -.5px; margin-bottom: 30px; }
.auth-visual h2 { font-size: 40px; font-weight: 900; line-height: 1.1; margin-bottom: 18px; letter-spacing: -.8px; }
.auth-visual p { font-size: 17px; opacity: .92; max-width: 420px; line-height: 1.7; }
.auth-perks { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.auth-perk { display: flex; align-items: center; gap: 13px; font-weight: 700; font-size: 15px; }
.auth-perk i { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; }
.auth-form-side { display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card h1 { font-size: 30px; font-weight: 900; margin-bottom: 8px; letter-spacing: -.5px; }
.auth-card .sub { color: var(--text-muted); margin-bottom: 30px; }
.auth-switch { text-align: center; margin-top: 24px; font-size: 14px; color: var(--text-muted); }
.auth-switch a { color: var(--accent); font-weight: 800; }
.auth-divider { display: flex; align-items: center; gap: 16px; margin: 24px 0; color: var(--text-light); font-size: 13px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; font-size: 13.5px; }
.checkbox-line { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.checkbox-line input { width: 17px; height: 17px; accent-color: var(--accent); }

/* ===================== SHOP PAGE ===================== */
.shop-layout { display: grid; grid-template-columns: 270px 1fr; gap: 40px; padding: 10px 0 60px; }
.shop-sidebar { position: sticky; top: calc(var(--header-h) + var(--topbar-h) + 20px); height: fit-content; }
.filter-block { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.filter-block:last-child { border-bottom: none; }
.filter-title { font-size: 14px; font-weight: 900; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
.filter-list li { margin-bottom: 4px; }
.filter-list a { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--text-muted); transition: all var(--transition); }
.filter-list a:hover, .filter-list a.active { background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.filter-list a .count { font-size: 12px; color: var(--text-light); }
.color-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.color-swatch-btn { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; position: relative; box-shadow: inset 0 0 0 2px var(--bg); transition: all var(--transition); }
.color-swatch-btn:hover, .color-swatch-btn.active { transform: scale(1.12); border-color: var(--accent); }
.size-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.size-chip { min-width: 42px; padding: 8px 10px; border: 2px solid var(--border); border-radius: var(--radius-sm); text-align: center; font-weight: 800; font-size: 13px; cursor: pointer; transition: all var(--transition); }
.size-chip:hover, .size-chip.active { border-color: var(--accent); color: var(--accent); }
.price-inputs { display: flex; align-items: center; gap: 10px; }
.price-inputs input { width: 100%; padding: 10px; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-size: 13px; }

.shop-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; gap: 16px; flex-wrap: wrap; }
.shop-count { font-size: 14px; color: var(--text-muted); font-weight: 600; }
.shop-count strong { color: var(--text); }
.sort-select { padding: 11px 38px 11px 16px; border: 2px solid var(--border); border-radius: var(--radius-pill); background: var(--bg); color: var(--text); font-weight: 700; font-size: 13.5px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6470' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.active-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; background: var(--accent-soft); color: var(--accent); border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 800; }
.filter-tag a { display: grid; place-items: center; }
.mobile-filter-bar { display: none; }

/* ===================== PRODUCT DETAIL ===================== */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 10px 0 60px; }
.pd-gallery { position: sticky; top: calc(var(--header-h) + var(--topbar-h) + 20px); height: fit-content; }
.pd-main-img { position: relative; aspect-ratio: 1/1; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-soft); margin-bottom: 14px; }
.pd-main-img img { width: 100%; height: 100%; object-fit: cover; }
.pd-main-img .placeholder { width: 100%; height: 100%; display: grid; place-items: center; font-size: 120px; opacity: .3; }
.pd-zoom-hint { position: absolute; bottom: 14px; right: 14px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; padding: 6px 12px; border-radius: var(--radius-pill); font-weight: 700; }
.pd-thumbs { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; }
.pd-thumb { aspect-ratio: 1/1; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid var(--border); cursor: pointer; transition: all var(--transition); background: var(--bg-soft); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb.active { border-color: var(--accent); }

.pd-info { padding-top: 6px; }
.pd-cat { font-size: 12px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; }
.pd-title { font-size: clamp(26px, 3vw, 36px); font-weight: 900; line-height: 1.15; letter-spacing: -.6px; margin-bottom: 14px; }
.pd-rating-row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.pd-rating-row .rev-link { font-size: 13.5px; color: var(--text-muted); font-weight: 600; }
.pd-rating-row .rev-link:hover { color: var(--accent); }
.pd-views { font-size: 13px; color: var(--text-light); display: inline-flex; align-items: center; gap: 5px; }
.pd-price-box { display: flex; align-items: center; gap: 16px; padding: 22px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 26px; flex-wrap: wrap; }
.pd-price { font-size: 34px; font-weight: 900; color: var(--accent); letter-spacing: -.5px; }
.pd-price-old { font-size: 19px; color: var(--text-light); text-decoration: line-through; }
.pd-save { background: var(--accent); color: #fff; padding: 5px 12px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 900; }
.pd-option-group { margin-bottom: 24px; }
.pd-option-label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; margin-bottom: 13px; }
.pd-option-label .selected-val { color: var(--text-muted); font-weight: 600; }
.color-options { display: flex; gap: 12px; flex-wrap: wrap; }
.color-option { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.color-option .swatch { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--border); box-shadow: inset 0 0 0 3px var(--bg); transition: all var(--transition); }
.color-option:hover .swatch { transform: scale(1.06); }
.color-option.active .swatch { border-color: var(--accent); }
.color-option span { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.size-options { display: flex; gap: 10px; flex-wrap: wrap; }
.size-btn { min-width: 54px; padding: 13px 14px; border: 2px solid var(--border); border-radius: var(--radius-sm); font-weight: 800; font-size: 15px; text-align: center; cursor: pointer; transition: all var(--transition); position: relative; }
.size-btn:hover:not(.out-of-stock) { border-color: var(--accent); }
.size-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.size-btn.out-of-stock { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.pd-qty-cart { display: flex; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.qty-wrap { display: flex; align-items: center; border: 2px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.qty-btn { width: 46px; height: 50px; display: grid; place-items: center; font-size: 16px; color: var(--text); transition: background var(--transition); }
.qty-btn:hover { background: var(--bg-soft); color: var(--accent); }
.qty-input { width: 54px; height: 50px; text-align: center; border: none; background: transparent; color: var(--text); font-weight: 800; font-size: 16px; }
.qty-input:focus { outline: none; }
.pd-actions { display: flex; gap: 12px; flex: 1; min-width: 240px; }
.pd-actions .btn { flex: 1; }
.pd-wishlist-big { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; font-size: 19px; color: var(--text-muted); transition: all var(--transition); flex-shrink: 0; }
.pd-wishlist-big:hover, .pd-wishlist-big.active { border-color: var(--accent); color: var(--accent); }
.pd-stock-info { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; margin-bottom: 24px; }
.pd-stock-info.in { color: var(--success); }
.pd-stock-info.low { color: var(--warning); }
.pd-stock-info.out { color: var(--error); }
.pd-meta { display: flex; flex-direction: column; gap: 10px; padding: 20px 0; border-top: 1px solid var(--border); }
.pd-meta-row { display: flex; gap: 10px; font-size: 13.5px; }
.pd-meta-row .label { color: var(--text-muted); min-width: 110px; font-weight: 600; }
.pd-meta-row .val { font-weight: 700; }
.pd-perks { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 8px; }
.pd-perk { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--bg-soft); border-radius: var(--radius-sm); }
.pd-perk i { font-size: 20px; color: var(--accent); }
.pd-perk span { font-size: 12.5px; font-weight: 700; line-height: 1.35; }

/* Tabs */
.pd-tabs { margin-top: 56px; }
.tab-nav { display: flex; gap: 6px; border-bottom: 2px solid var(--border); margin-bottom: 28px; overflow-x: auto; }
.tab-btn { padding: 14px 24px; font-weight: 800; font-size: 15px; color: var(--text-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: all var(--transition); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; animation: fadeUp .4s var(--ease); }
.tab-panel.active { display: block; }
.tab-content { font-size: 15px; line-height: 1.85; color: var(--text-muted); white-space: pre-line; max-width: 800px; }

/* Reviews */
.review-summary { display: grid; grid-template-columns: 220px 1fr; gap: 40px; padding: 28px; background: var(--bg-soft); border-radius: var(--radius); margin-bottom: 32px; align-items: center; }
.review-score { text-align: center; }
.review-score .big { font-size: 56px; font-weight: 900; line-height: 1; }
.review-score .stars { font-size: 18px; margin: 10px 0 6px; }
.review-score .total { font-size: 13px; color: var(--text-muted); }
.review-bars { display: flex; flex-direction: column; gap: 8px; }
.review-bar { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.review-bar .lbl { width: 42px; font-weight: 700; }
.review-bar .track { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.review-bar .fill { height: 100%; background: var(--gold); border-radius: 4px; }
.review-bar .pct { width: 40px; text-align: right; color: var(--text-muted); }
.review-item { padding: 22px 0; border-bottom: 1px solid var(--border); }
.review-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.review-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 900; font-size: 17px; }
.review-author { font-weight: 800; font-size: 14.5px; }
.review-date { font-size: 12px; color: var(--text-light); }
.review-comment { font-size: 14.5px; line-height: 1.7; color: var(--text); }
.review-images { display: flex; gap: 8px; margin-top: 12px; }
.review-images img { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; cursor: pointer; }
.rating-input { display: flex; gap: 6px; font-size: 28px; color: var(--border-strong); margin-bottom: 16px; }
.rating-input i { cursor: pointer; transition: color .15s; }
.rating-input i.on { color: var(--gold); }

/* ===================== CART PAGE ===================== */
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 32px; padding: 10px 0 60px; }
.cart-items-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cart-item { display: grid; grid-template-columns: 100px 1fr auto; gap: 18px; padding: 22px; border-bottom: 1px solid var(--border); align-items: center; }
.cart-item:last-child { border-bottom: none; }
.cart-item-img { width: 100px; height: 100px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-soft); }
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-name { font-weight: 800; font-size: 15.5px; margin-bottom: 6px; }
.cart-item-meta { display: flex; gap: 14px; font-size: 13px; color: var(--text-muted); margin-bottom: 10px; flex-wrap: wrap; }
.cart-item-meta span { display: inline-flex; align-items: center; gap: 5px; }
.cart-item-price { font-weight: 900; color: var(--accent); font-size: 16px; }
.cart-item-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.cart-remove { color: var(--text-light); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; transition: color var(--transition); }
.cart-remove:hover { color: var(--error); }
.cart-qty { display: flex; align-items: center; border: 2px solid var(--border); border-radius: var(--radius-pill); }
.cart-qty button { width: 36px; height: 38px; display: grid; place-items: center; color: var(--text); }
.cart-qty button:hover { color: var(--accent); }
.cart-qty input { width: 42px; height: 38px; text-align: center; border: none; background: transparent; color: var(--text); font-weight: 800; }
.cart-qty input:focus { outline: none; }

.cart-summary { position: sticky; top: calc(var(--header-h) + var(--topbar-h) + 20px); height: fit-content; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
.cart-summary h3 { font-size: 19px; font-weight: 900; margin-bottom: 22px; }
.summary-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; font-size: 14.5px; }
.summary-row .label { color: var(--text-muted); }
.summary-row .val { font-weight: 800; }
.summary-row.discount .val { color: var(--success); }
.summary-total { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 4px; margin-top: 8px; border-top: 2px solid var(--border); }
.summary-total .label { font-size: 16px; font-weight: 800; }
.summary-total .val { font-size: 26px; font-weight: 900; color: var(--accent); }
.coupon-box { display: flex; gap: 8px; margin: 18px 0; }
.coupon-box input { flex: 1; padding: 12px 14px; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-weight: 700; text-transform: uppercase; }
.coupon-box input:focus { outline: none; border-color: var(--accent); }
.coupon-active { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(22,163,74,.1); border-radius: var(--radius-sm); margin: 18px 0; font-size: 13.5px; font-weight: 800; color: var(--success); }
.coupon-active a { color: var(--error); font-size: 12px; }
.free-ship-progress { margin: 16px 0; padding: 14px; background: var(--bg-soft); border-radius: var(--radius-sm); }
.fsp-text { font-size: 12.5px; margin-bottom: 8px; font-weight: 700; }
.fsp-bar { height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; }
.fsp-fill { height: 100%; background: linear-gradient(90deg, var(--success), #4ade80); transition: width .5s var(--ease); border-radius: 4px; }

/* ===================== CHECKOUT ===================== */
.checkout-layout { display: grid; grid-template-columns: 1fr 400px; gap: 36px; padding: 10px 0 60px; }
.checkout-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; margin-bottom: 22px; }
.checkout-section h3 { font-size: 17px; font-weight: 900; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.checkout-section h3 .step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 14px; display: grid; place-items: center; }
.payment-options { display: flex; flex-direction: column; gap: 12px; }
.payment-option { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all var(--transition); }
.payment-option:hover { border-color: var(--border-strong); }
.payment-option.active { border-color: var(--accent); background: var(--accent-soft); }
.payment-option input { width: 20px; height: 20px; accent-color: var(--accent); }
.payment-option .po-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--bg-soft); display: grid; place-items: center; font-size: 20px; }
.payment-option .po-info strong { display: block; font-size: 14.5px; font-weight: 800; }
.payment-option .po-info span { font-size: 12.5px; color: var(--text-muted); }
.order-review-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.order-review-item img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--bg-soft); position: relative; }
.ori-qty-badge { position: relative; }
.order-review-item .ori-name { font-weight: 800; font-size: 14px; line-height: 1.3; }
.order-review-item .ori-meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.order-review-item .ori-price { font-weight: 900; color: var(--accent); font-size: 14px; }

/* ===================== QR / BANK ===================== */
.qr-pay-box { text-align: center; padding: 30px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); max-width: 460px; margin: 0 auto; }
.qr-img { width: 260px; height: 260px; margin: 0 auto 20px; border-radius: var(--radius); border: 1px solid var(--border); background: #fff; padding: 12px; }
.qr-img img { width: 100%; height: 100%; object-fit: contain; }
.bank-detail { text-align: left; background: var(--bg-soft); border-radius: var(--radius); padding: 18px 20px; margin-top: 18px; }
.bank-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.bank-row:last-child { border-bottom: none; }
.bank-row .bk-label { color: var(--text-muted); }
.bank-row .bk-val { font-weight: 800; display: flex; align-items: center; gap: 8px; }
.copy-btn { color: var(--accent); cursor: pointer; font-size: 13px; }
.payment-status-poll { margin-top: 20px; padding: 14px; border-radius: var(--radius); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.payment-status-poll.waiting { background: rgba(245,158,11,.12); color: var(--warning); }
.payment-status-poll.paid { background: rgba(22,163,74,.12); color: var(--success); }

/* ===================== ORDER SUCCESS / TRACKING ===================== */
.success-hero { text-align: center; padding: 50px 20px 30px; }
.success-icon { width: 96px; height: 96px; border-radius: 50%; background: rgba(22,163,74,.12); color: var(--success); display: grid; place-items: center; font-size: 48px; margin: 0 auto 22px; animation: popIn .5s var(--ease); }
@keyframes popIn { 0% { transform: scale(0); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
.success-hero h1 { font-size: 32px; font-weight: 900; margin-bottom: 10px; }
.success-hero p { color: var(--text-muted); font-size: 15px; }
.order-track { display: flex; justify-content: space-between; position: relative; max-width: 720px; margin: 40px auto; }
.order-track::before { content: ''; position: absolute; top: 22px; left: 8%; right: 8%; height: 3px; background: var(--border); }
.track-step { position: relative; z-index: 2; text-align: center; flex: 1; }
.track-dot { width: 46px; height: 46px; border-radius: 50%; background: var(--bg); border: 3px solid var(--border); display: grid; place-items: center; font-size: 17px; color: var(--text-light); margin: 0 auto 10px; transition: all var(--transition); }
.track-step.done .track-dot { background: var(--success); border-color: var(--success); color: #fff; }
.track-step.active .track-dot { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 6px rgba(var(--accent-rgb),.15); }
.track-label { font-size: 12.5px; font-weight: 800; }
.track-step.done .track-label, .track-step.active .track-label { color: var(--text); }
.track-label-muted { color: var(--text-light); }

/* ===================== ACCOUNT ===================== */
.account-layout { display: grid; grid-template-columns: 280px 1fr; gap: 36px; padding: 10px 0 60px; }
.account-sidebar { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; height: fit-content; position: sticky; top: calc(var(--header-h) + var(--topbar-h) + 20px); }
.account-user { text-align: center; padding-bottom: 22px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.account-avatar { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 14px; object-fit: cover; background: var(--accent-soft); display: grid; place-items: center; font-size: 34px; color: var(--accent); font-weight: 900; overflow: hidden; }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-user .name { font-weight: 900; font-size: 17px; }
.account-user .email { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.account-menu a { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14.5px; color: var(--text); transition: all var(--transition); margin-bottom: 4px; }
.account-menu a i { width: 20px; color: var(--text-muted); }
.account-menu a:hover { background: var(--bg-soft); }
.account-menu a.active { background: var(--accent); color: #fff; }
.account-menu a.active i { color: #fff; }
.account-menu a.danger { color: var(--error); }
.account-content { min-height: 400px; }
.account-panel-title { font-size: 24px; font-weight: 900; margin-bottom: 24px; }

.order-row { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px; transition: all var(--transition); }
.order-row:hover { box-shadow: var(--shadow); }
.order-row-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.order-code-lbl { font-weight: 900; font-size: 15px; }
.order-code-lbl span { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-left: 8px; }
.order-row-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 12px; }
.order-thumbs { display: flex; gap: 8px; }
.order-thumbs img { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; background: var(--bg-soft); }
.order-thumbs .more-count { width: 54px; height: 54px; border-radius: 8px; background: var(--bg-soft); display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--text-muted); }
.status-badge { padding: 5px 13px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 800; color: #fff; }

.address-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.address-card { border: 2px solid var(--border); border-radius: var(--radius); padding: 20px; position: relative; transition: all var(--transition); }
.address-card.default { border-color: var(--accent); }
.address-card .addr-default-tag { position: absolute; top: 16px; right: 16px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: var(--radius-pill); }
.address-card .addr-name { font-weight: 900; font-size: 15px; margin-bottom: 4px; }
.address-card .addr-phone { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.address-card .addr-text { font-size: 13.5px; line-height: 1.6; color: var(--text); margin-bottom: 14px; }
.address-card .addr-actions { display: flex; gap: 14px; font-size: 13px; font-weight: 700; }
.address-card .addr-actions a { color: var(--accent); }
.address-card .addr-actions a.del { color: var(--error); }

/* ===================== POLICY / STATIC PAGES ===================== */
.static-content { max-width: 820px; margin: 0 auto; padding: 10px 0 60px; }
.static-content h2 { font-size: 24px; font-weight: 900; margin: 32px 0 14px; }
.static-content h3 { font-size: 18px; font-weight: 800; margin: 24px 0 10px; }
.static-content p { font-size: 15.5px; line-height: 1.85; color: var(--text-muted); margin-bottom: 16px; }
.static-content ul { padding-left: 22px; margin-bottom: 16px; }
.static-content ul li { font-size: 15px; line-height: 1.8; color: var(--text-muted); list-style: disc; margin-bottom: 8px; }

/* About */
.about-hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; padding: 70px 50px; background: linear-gradient(120deg, var(--accent), var(--accent-hover)); color: #fff; margin-bottom: 50px; text-align: center; }
.about-hero h1 { font-size: clamp(30px,4vw,48px); font-weight: 900; margin-bottom: 16px; }
.about-hero p { font-size: 17px; max-width: 600px; margin: 0 auto; opacity: .95; }
.about-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin: 50px 0; }
.about-stat { text-align: center; padding: 30px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.about-stat .num { font-size: 40px; font-weight: 900; color: var(--accent); }
.about-stat .lbl { font-size: 14px; color: var(--text-muted); font-weight: 700; margin-top: 6px; }

/* Contact */
.contact-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; padding: 10px 0 60px; }
.contact-info-card { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: #fff; border-radius: var(--radius-lg); padding: 40px; }
.contact-info-card h3 { font-size: 24px; font-weight: 900; margin-bottom: 28px; }
.contact-info-item { display: flex; gap: 16px; margin-bottom: 24px; }
.contact-info-item i { width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 19px; flex-shrink: 0; }
.contact-info-item .ci-label { font-size: 12px; opacity: .8; }
.contact-info-item .ci-val { font-weight: 800; font-size: 15px; margin-top: 2px; }

/* =====================================================================
   GAP-FILL — các lớp bổ sung (auto-completed)
   ===================================================================== */

/* header count badges */
.cart-badge,.wish-badge{position:absolute;top:-6px;right:-8px;background:var(--accent);color:#fff;font-size:10px;font-weight:800;min-width:18px;height:18px;border-radius:20px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1}

/* marquee */
.marquee-track{display:inline-flex;gap:48px;white-space:nowrap;animation:marqueeMove 28s linear infinite;will-change:transform}
@keyframes marqueeMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* hero dots */
.hero-dots{display:flex;gap:9px;justify-content:center}

/* generic full-width grid cell + selected helper */
.full{grid-column:1/-1}
.sel,.selected{outline:2px solid var(--accent)}

/* buttons */
.btn-outline-danger{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1.5px solid var(--error);color:var(--error);padding:10px 18px;border-radius:var(--radius-pill);font-weight:700;cursor:pointer;transition:var(--transition)}
.btn-outline-danger:hover{background:var(--error);color:#fff}

/* ---------- AUTH ---------- */
.auth-sub{color:var(--text-muted);margin-bottom:22px}
.auth-form{display:flex;flex-direction:column;gap:14px}
.pw-toggle{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer}

/* ---------- ACCOUNT ---------- */
.account-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:24px}
.acc-stat{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.acc-stat .num,.acc-stat b{font-size:24px;font-weight:900;color:var(--accent);display:block}
.account-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:20px}
.account-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.account-form{display:flex;flex-direction:column;gap:14px;max-width:520px}
.view-all-link{color:var(--accent);font-weight:700;font-size:14px}
.order-row-mini{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}
.order-row-mini:last-child{border-bottom:none}
.order-total{font-weight:800;color:var(--accent)}

/* ---------- ORDERS LIST ---------- */
.order-filter-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1px solid var(--border)}
.order-filter-tabs a{padding:10px 16px;font-weight:700;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.order-filter-tabs a.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- ORDER DETAIL ---------- */
.od-status-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.od-date{color:var(--text-muted);font-size:14px}
.od-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.od-addr{line-height:1.7}
.od-note{margin-top:10px;color:var(--text-muted);font-size:14px}
.od-cancel{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.od-cancel .form-control{flex:1;min-width:200px}
.order-items-list{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.order-line{display:flex;align-items:center;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.order-line:last-child{border-bottom:none}
.order-line img{width:60px;height:60px;border-radius:10px;object-fit:cover;background:var(--bg-soft)}
.order-line>div{flex:1}
.order-line span{font-weight:700;display:block}
.order-line small{color:var(--text-muted)}
.order-timeline{display:flex;flex-direction:column}
.timeline-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.timeline-item:last-child{border-bottom:none}
.timeline-dot{width:12px;height:12px;border-radius:50%;margin-top:5px;flex-shrink:0;background:var(--accent)}
.status-badge.lg{padding:6px 16px;font-size:14px}

/* ---------- CART extras ---------- */
.cart-continue{display:inline-flex;align-items:center;gap:8px;color:var(--text-muted);font-weight:700;margin-top:14px}
.cart-continue:hover{color:var(--accent)}
.cart-trust{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:18px;color:var(--text-muted);font-size:13px}
.cart-trust span{display:inline-flex;align-items:center;gap:6px}
.coupon-remove{background:none;border:none;color:var(--error);cursor:pointer;font-weight:700;font-size:13px}

/* ---------- CHECKOUT ---------- */
.checkout-main{display:flex;flex-direction:column;gap:20px}
.checkout-review,.order-review{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.order-review-item,.order-line{align-items:center}
.ori-img{width:54px;height:54px;border-radius:9px;object-fit:cover;background:var(--bg-soft);position:relative}

/* ---------- CONTACT ---------- */
.contact-info{display:flex;flex-direction:column;gap:14px}
.contact-card{display:flex;align-items:center;gap:14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.contact-card b{display:block}
.contact-card a,.contact-card span{color:var(--text-muted)}
.ci-icon{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.contact-form-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px}

/* ---------- ABOUT ---------- */
.about-content{max-width:760px;margin:0 auto}

/* ---------- SHOP ---------- */
.shop-main{flex:1;min-width:0}
.shop-sidebar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.shop-sidebar-close{display:none;background:none;border:none;font-size:20px;cursor:pointer;color:var(--text)}
.color-swatch{display:inline-block;width:22px;height:22px;border-radius:50%;border:2px solid var(--border);cursor:pointer;vertical-align:middle}

/* ---------- PRODUCT DETAIL ---------- */
.pd-main{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-soft)}
.pd-badge{position:absolute;top:14px;left:14px;background:var(--accent);color:#fff;font-size:12px;font-weight:800;padding:5px 12px;border-radius:20px;z-index:2}
.pd-short{color:var(--text-muted);line-height:1.7;margin:14px 0}
.pd-spec-table{width:100%;border-collapse:collapse}
.pd-spec-table td{padding:10px 12px;border-bottom:1px solid var(--border)}
.pd-spec-table td:first-child{font-weight:700;width:40%;color:var(--text-muted)}

/* ---------- REVIEWS ---------- */
.review-list{display:flex;flex-direction:column;gap:18px}
.review-form{background:var(--bg-soft);border-radius:var(--radius);padding:20px;margin-bottom:24px}
.review-body{flex:1}
.review-note{color:var(--text-muted);font-size:14px;background:var(--bg-soft);padding:14px;border-radius:var(--radius);text-align:center}

/* ---------- QUICK VIEW ---------- */
.qv-body{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.qv-gallery{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--bg-soft)}
.qv-main-img{width:100%;height:100%;object-fit:cover;aspect-ratio:1}
.qv-badge{position:absolute;top:12px;left:12px;background:var(--accent);color:#fff;font-weight:800;font-size:12px;padding:4px 11px;border-radius:20px}
.qv-info{display:flex;flex-direction:column}
.qv-title{font-size:22px;font-weight:800;margin:6px 0}
.qv-rating{margin-bottom:8px;color:var(--text-muted)}
.qv-desc{color:var(--text-muted);line-height:1.6;margin:10px 0}
.qv-detail-link{color:var(--accent);font-weight:700;margin-top:14px;display:inline-flex;align-items:center;gap:7px}

/* ---------- PAYMENT PENDING ---------- */
.qr-left{text-align:center}
.qr-right{display:flex;flex-direction:column;justify-content:center}
.qr-hint{color:var(--text-muted);font-size:13px;margin-top:10px}
.pay-amount{font-size:26px;font-weight:900;color:var(--accent)}
.bank-row.highlight,.highlight{background:var(--accent-soft)}

/* ---------- ORDER SUCCESS ---------- */
.success-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
.success-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.success-code{font-size:22px;font-weight:900;color:var(--accent);letter-spacing:.5px}
.success-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.order-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}

/* ---------- STATIC PAGES ---------- */
.static-page{max-width:820px;margin:0 auto;padding:8px 0 40px}

/* ---------- account sidebar logout ---------- */
.account-menu a.logout{color:var(--error)}

/* responsive */
@media(max-width:768px){
  .od-grid,.success-grid,.order-info-grid,.qv-body,.checkout-layout{grid-template-columns:1fr}
  .shop-sidebar-close{display:block}
}