/* =============================================
   MUA SẮM VUI - COMPONENTS
   Loading · Cards · Forms · Modals · Profile
   Admin · Community · Search · Share · PWA
   ============================================= */

/* ── Loading screen ── */
#loading-screen { position: fixed; inset: 0; z-index: 9999; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; transition: opacity .4s, visibility .4s }
#loading-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none }
.loader-logo { display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 900; color: var(--accent); letter-spacing: -0.5px }
.loader-logo i { font-size: 32px; animation: bounce .8s infinite alternate }
.loader-bar { width: 200px; height: 4px; background: var(--bg-input); border-radius: 4px; overflow: hidden }
.loader-progress { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--purple)); border-radius: 4px; animation: load 1.2s ease forwards }

/* ── Deal card – unified grid card ── */
.deal-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: transform .18s, box-shadow .18s; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; height: 100% }
.deal-card:active { transform: scale(.97); box-shadow: var(--shadow-xs) }

/* Image wrapper – fixed height, object-fit contain = hiển thị toàn bộ ảnh, không cắt */
.deal-card-img-wrap { position: relative; width: 100%; height: 148px; overflow: hidden; background: var(--bg-input); flex-shrink: 0 }
.deal-card-img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .3s }
.deal-card:active .deal-card-img { transform: scale(1.04) }

/* Body */
.deal-card-body { padding: 10px 11px 12px; flex: 1; display: flex; flex-direction: column }

/* Title – luôn giữ đúng 2 dòng */
.deal-card-title { font-size: 12.5px; font-weight: 700; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text); min-height: calc(1.45em * 2); margin-bottom: 8px }

/* Price – tách 2 hàng: hàng 1 giá sale (luôn 1 dòng), hàng 2 gốc + badge (nowrap) */
.dc-price { font-size: 13px; font-weight: 900; color: var(--red); letter-spacing: -0.2px; line-height: 1.35; margin-bottom: 4px; word-break: break-all }
.dc-sub { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; overflow: hidden }
.dc-sub .deal-price-original { font-size: 11px; color: var(--text-muted); text-decoration: line-through; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0 }
.dc-sub .deal-discount { font-size: 10px; font-weight: 800; background: var(--red-soft); color: var(--red); padding: 2px 7px; border-radius: 6px; white-space: nowrap; flex-shrink: 0 }

/* Meta – luôn dính đáy */
.deal-meta { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-muted); font-weight: 600; margin-top: auto }
.deal-meta i { margin-right: 2px }

/* Giữ tương thích với deal-prices cũ (list view dùng) */
.deal-prices { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; flex-wrap: wrap }
.deal-price-sale { color: var(--red); font-size: 13px; font-weight: 800 }
.deal-price-original { color: var(--text-muted); font-size: 11px; text-decoration: line-through }
.deal-discount { background: var(--red-soft); color: var(--red); font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 6px; white-space: nowrap }

/* ── Store tags ── */
.deal-store-tag { font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: var(--radius-pill); display: inline-block; margin-bottom: 5px; letter-spacing: 0.2px }
.store-shopee { background: #FFF0EE; color: #EE4D2D }
.store-lazada { background: #EEEDFF; color: #4F46E5 }
.store-tiktok { background: #E7FFFE; color: #0EA5E9 }
.store-khac { background: var(--bg-input); color: var(--text-secondary) }

/* ── Deal list item (compact) ── */
.deal-list-item { display: flex; gap: 10px; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-sm); margin-bottom: 8px; cursor: pointer; transition: all .18s; box-shadow: var(--shadow-xs); align-items: center }
.deal-list-item:active { transform: scale(.98); background: var(--bg-input) }
.deal-list-img { width: 70px; height: 70px; border-radius: 9px; object-fit: contain; background: var(--bg-input); flex-shrink: 0; border: 1px solid var(--border-light) }
.deal-list-info { flex: 1; min-width: 0 }
.dl-top { margin-bottom: 3px }
.dl-title { font-size: 12px; font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: var(--text); margin-bottom: 4px }
.dl-price-row { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; overflow: hidden }
.dl-sale { font-size: 13px; font-weight: 900; color: var(--red); letter-spacing: -0.2px; white-space: nowrap }
.dl-orig { font-size: 10.5px; color: var(--text-muted); text-decoration: line-through; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0 }
.dl-price-row .deal-discount { flex-shrink: 0 }
.dl-footer { display: flex; align-items: center; justify-content: space-between; gap: 4px }
.dl-user { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; cursor: pointer; flex: 1; min-width: 0; overflow: visible }
.dl-user:active { opacity: .7 }
.dl-user > span:nth-child(2) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dl-avatar { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; background: var(--accent-soft); flex-shrink: 0; border: 2px solid transparent }
.dl-meta { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text-muted); font-weight: 600; flex-shrink: 0 }
.dl-meta i { margin-right: 1px }
/* legacy compat */
.deal-list-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 5px }
.deal-user-badge { display: flex; align-items: center; gap: 4px; font-size: 11px; cursor: pointer; flex-shrink: 0; font-weight: 600 }
.deal-user-badge:active { opacity: .7 }
.deal-meta-right { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); font-weight: 600 }
.deal-meta-right i { margin-right: 2px }

/* ── Special card decorators ── */
.sponsored-card { position: relative; border: 2px solid rgba(124,58,237,0.22) !important; background: var(--bg-card); box-shadow: 0 4px 18px rgba(124,58,237,0.1) !important; overflow: hidden }
.sponsored-card::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(transparent, rgba(124,58,237,0.06), transparent 30%); animation: sp-spin 4s linear infinite; z-index: 0; pointer-events: none }
.sponsored-card > * { position: relative; z-index: 1 }
.sponsored-badge { position: absolute; top: 9px; left: 9px; background: linear-gradient(135deg, #7C3AED, #6366F1); color: #fff; font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 9px; z-index: 3; box-shadow: 0 2px 10px rgba(124,58,237,0.4); display: flex; align-items: center; gap: 4px }
.hot-card { border: 1.5px solid rgba(239,68,68,0.2) !important; box-shadow: 0 2px 14px rgba(239,68,68,0.08) !important }
.hot-ribbon { position: absolute; top: 9px; right: 9px; background: linear-gradient(135deg, #FF6B6B, #FF8E53); color: #fff; font-size: 9.5px; font-weight: 800; padding: 3px 9px; border-radius: 7px; z-index: 2; display: flex; align-items: center; gap: 3px; box-shadow: 0 2px 8px rgba(239,68,68,0.3) }
.hot-ribbon i { animation: fire-d .6s infinite alternate }
.trend-card { border: 1.5px solid rgba(245,158,11,0.2) !important; box-shadow: 0 2px 14px rgba(245,158,11,0.08) !important }
.trend-ribbon { position: absolute; top: 9px; right: 9px; background: linear-gradient(135deg, #F59E0B, #F97316); color: #fff; font-size: 9.5px; font-weight: 800; padding: 3px 9px; border-radius: 7px; z-index: 2; display: flex; align-items: center; gap: 3px; box-shadow: 0 2px 8px rgba(245,158,11,0.3) }

/* ── Gift card ── */
.gift-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-xs); transition: all .18s }
.gift-card:active { transform: scale(.97) }
.gift-card-img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--bg-input); display: flex; align-items: center; justify-content: center; font-size: 50px }
.gift-card-body { padding: 11px }
.gift-card-name { font-size: 13px; font-weight: 700; margin-bottom: 5px }
.gift-card-cost { font-size: 14px; font-weight: 900; color: var(--orange); display: flex; align-items: center; gap: 4px }

/* ── Event card ── */
.event-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 17px; margin: 0 16px 12px; box-shadow: var(--shadow-sm) }
.event-title { font-size: 15px; font-weight: 800; margin-bottom: 6px }
.event-prize { color: var(--orange); font-size: 14px; font-weight: 700; margin-bottom: 6px }
.event-timer { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--red); font-weight: 800; margin-bottom: 10px }
.event-stats { display: flex; gap: 14px; font-size: 12px; color: var(--text-muted); font-weight: 600; margin-bottom: 10px }

/* ── Rank badges ── */
.rk { font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 5px; white-space: nowrap }
.rk-starter { background: var(--bg-input); color: var(--text-muted) }
.rk-newbie { background: rgba(16,185,129,0.12); color: #10B981 }
.rk-hunter { background: rgba(16,185,129,0.18); color: #059669 }
.rk-pro { background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(99,102,241,0.15)); color: #3B82F6 }
.rk-master { background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(168,85,247,0.15)); color: #7C3AED; animation: glow-p 3s infinite }
.rk-mythic { background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(249,115,22,0.12)); color: #EF4444; animation: glow-p 2s infinite; box-shadow: 0 0 8px rgba(239,68,68,0.2) }
.rk-legend { background: linear-gradient(135deg, #F59E0B, #F97316); color: #fff; animation: legend-shine 2s infinite; box-shadow: 0 0 12px rgba(245,158,11,0.3) }
.rk-name-default, .rk-name-starter { color: var(--text-secondary) }
.rk-name-newbie { color: #10B981 }
.rk-name-hunter { color: #059669; font-weight: 700 }
.rk-name-pro { color: #3B82F6; font-weight: 700 }
.rk-name-master { color: #7C3AED; font-weight: 700 }
.rk-name-mythic { color: #EF4444; font-weight: 800 }
.rk-name-legend { color: #F59E0B; font-weight: 800; text-shadow: 0 0 8px rgba(245,158,11,0.3) }

/* ── Tags ── */
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 7px; font-size: 10.5px; font-weight: 800 }
.tag-hot { background: linear-gradient(135deg, #FF6B6B, #FF8E53); color: #fff; animation: glow-p 2s infinite }
.tag-trending { background: linear-gradient(135deg, #F59E0B, #F97316); color: #fff; animation: glow-p 2.5s infinite }
.tag-sponsored { background: linear-gradient(135deg, #7C3AED, #6366F1); color: #fff }
.tag-new { background: var(--green-soft); color: var(--green) }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 22px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; border: none; cursor: pointer; transition: all .18s; font-family: inherit; letter-spacing: 0.1px }
.btn:active { transform: scale(.95) }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(74,108,247,0.35) }
.btn-primary:active { box-shadow: 0 2px 6px rgba(74,108,247,0.2) }
.btn-secondary { background: var(--bg-input); color: var(--text); border: 1.5px solid var(--border) }
.btn-danger { background: var(--red); color: #fff }
.btn-success { background: var(--green); color: #fff }
.btn-ghost { background: transparent; color: var(--text-muted); border: none; box-shadow: none }
.btn-ghost:active { background: var(--bg-input) }
.btn-sm { padding: 8px 15px; font-size: 12px; border-radius: var(--radius-xs) }
.btn-full { width: 100% }

/* ── FAB (Floating Action Button) ── */
.fab { position: fixed; bottom: calc(var(--tab-h) + var(--safe-bottom) + 16px); right: 18px; width: 56px; height: 56px; border-radius: 18px; z-index: 90; background: var(--accent); color: #fff; font-size: 22px; border: none; box-shadow: 0 6px 20px rgba(74,108,247,0.45); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .18s, box-shadow .18s }
.fab:active { transform: scale(.88); box-shadow: 0 3px 10px rgba(74,108,247,0.3) }

/* ── Forms ── */
.form-group { margin-bottom: 15px }
.form-label { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px }
/* ── Character counter ─────────────────────────────────────── */
.word-counter {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 700; letter-spacing: .2px;
    color: var(--text-muted); background: var(--bg-input);
    padding: 2px 8px; border-radius: 20px; transition: all .2s;
    white-space: nowrap; line-height: 1.4;
}
.word-counter.filling { color: #3b82f6;  background: rgba(59,130,246,0.08); }
.word-counter.ok   { color: var(--green);  background: var(--green-soft); }
.word-counter.warn { color: var(--orange); background: var(--orange-soft); }
.word-counter.over { color: var(--red);    background: var(--red-soft); animation: counter-shake .25s ease; }

/* Thanh progress bên dưới input */
.char-bar { height: 3px; background: var(--border); border-radius: 2px; margin-top: 5px; overflow: hidden; }
.char-bar-fill { height: 100%; width: 0; border-radius: 2px; transition: width .15s ease, background .2s; background: var(--text-muted); }
.char-bar-fill.filling { background: #60a5fa; }
.char-bar-fill.ok      { background: var(--green); }
.char-bar-fill.warn    { background: var(--orange); }
.char-bar-fill.over    { background: var(--red); }


@keyframes counter-shake {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}
.form-input, .form-select, .form-textarea { width: 100%; padding: 12px 15px; background: var(--bg-input); border: 1.5px solid var(--border); border-radius: var(--radius-xs); color: var(--text); font-size: 14px; font-weight: 600; font-family: inherit; transition: border-color .2s, box-shadow .2s, background .2s }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(74,108,247,0.12); background: #fff }
.form-input.error, .form-textarea.error { border-color: var(--red); box-shadow: 0 0 0 3px rgba(239,68,68,0.1) }
.form-textarea { min-height: 95px; resize: vertical }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg fill='%2364748B' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; padding-right: 36px }
.input-wrap { position: relative; display: block }
.input-wrap .form-input, .input-wrap .form-textarea { padding-right: 34px }
.input-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 15px; padding: 2px 4px; display: none; line-height: 1; z-index: 2 }
.input-clear:hover { color: var(--text) }
.textarea-wrap .input-clear { top: 14px; transform: none }
.price-hint { font-size: 11px; color: var(--accent); font-weight: 600; position: absolute; right: 34px; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: .55 }
.pw-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 6px }

/* ── Filter bar ── */
.filter-bar { padding: 10px 16px; display: flex; flex-wrap: nowrap; gap: 7px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch }
.filter-bar::-webkit-scrollbar { display: none }
.filter-chip { padding: 6px 14px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; cursor: pointer; transition: all .18s; background: var(--bg-card); color: var(--text-secondary); border: 1.5px solid var(--border); white-space: nowrap; font-family: inherit; flex-shrink: 0 }
.filter-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 3px 10px rgba(74,108,247,0.3) }

/* ── Vote bar ── */
.vote-bar { display: flex; align-items: center; gap: 5px }
.vote-btn { display: flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; cursor: pointer; background: var(--bg-input); border: 1.5px solid var(--border); color: var(--text-secondary); transition: all .18s; font-family: inherit }
.vote-btn:active { transform: scale(.92) }
.vote-btn.voted-up { background: var(--green-soft); color: var(--green); border-color: var(--green) }
.vote-btn.voted-down { background: var(--red-soft); color: var(--red); border-color: var(--red) }

/* ── Modal (bottom sheet) ── */
.modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(15,23,42,0.4); backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s }
.modal-overlay.active { opacity: 1; visibility: visible }
body.modal-open { overflow: hidden }
.modal-sheet { width: 100%; max-width: 480px; max-height: calc(var(--vvh, 100dvh) * 0.92 - env(safe-area-inset-top, 0px) - 8px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; background: var(--bg-card); border-radius: 24px 24px 0 0; padding: 8px 20px calc(env(safe-area-inset-bottom, 0px) + 20px); transform: translateY(100%); transition: transform .35s cubic-bezier(.32,.72,0,1) }
.modal-overlay.active .modal-sheet { transform: translateY(0) }
.modal-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 14px; position: sticky; top: 0; background: var(--bg-card); z-index: 2 }
.modal-top::before { content: ''; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; background: var(--border); border-radius: 2px }
.modal-title { font-size: 17px; font-weight: 800 }
.modal-close { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-input); border: none; color: var(--text-secondary); font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s }
.modal-close:active { background: var(--border); transform: scale(.88) }

/* ── Inner tabs ── */
.inner-tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 16px; background: var(--bg-card) }
.inner-tab { padding: 14px 18px; font-size: 13.5px; font-weight: 800; color: var(--text-muted); cursor: pointer; border-bottom: 2.5px solid transparent; transition: all .2s; background: none; border-top: none; border-left: none; border-right: none; font-family: inherit }
.inner-tab.active { color: var(--accent); border-bottom-color: var(--accent) }

/* ── Community: Rank list items ── */
.rank-item { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-bottom: 1px solid var(--border-light); background: var(--bg-card); transition: background .15s; cursor: pointer }
.rank-item:active { background: var(--bg-input) }
.rank-pos { width: 34px; font-size: 16px; font-weight: 900; text-align: center; color: var(--text-muted); flex-shrink: 0 }
.rank-1 { color: #F59E0B } .rank-2 { color: #94A3B8 } .rank-3 { color: #D97706 }
.rank-avatar { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 26px; background: var(--accent-soft); flex-shrink: 0; border: 2px solid var(--accent-light) }
.rank-info { flex: 1; min-width: 0 }
.rank-name { font-size: 14px; font-weight: 800 }
.rank-level { font-size: 11px; color: var(--text-muted); font-weight: 600; margin-top: 1px }
.rank-xp { font-size: 15px; font-weight: 900; color: var(--accent); flex-shrink: 0 }
.rank-me { background: linear-gradient(135deg, rgba(74,108,247,0.05), rgba(124,58,237,0.05)) !important; border-left: 3px solid var(--accent) }

/* ── Community: Post cards ── */
.post-card { padding: 15px 16px; border-bottom: 1px solid var(--border-light); cursor: pointer; background: var(--bg-card); transition: background .15s }
.post-card:active { background: var(--bg-input) }
.post-header { display: flex; align-items: center; gap: 11px; margin-bottom: 9px }
.post-avatar { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--accent-soft); flex-shrink: 0; border: 2px solid transparent }
.post-user { font-size: 13.5px; font-weight: 800 }
.post-time { font-size: 11px; color: var(--text-muted); font-weight: 600 }
.post-cat { font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 7px; letter-spacing: 0.3px }
.cat-thong-bao { background: var(--accent-soft); color: var(--accent) }
.cat-hoi-dap { background: var(--green-soft); color: var(--green) }
.cat-canh-bao { background: var(--red-soft); color: var(--red) }
.post-title { font-size: 15px; font-weight: 800; margin-bottom: 5px; line-height: 1.4 }
.post-content { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.post-stats { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text-muted); font-weight: 700 }

/* ── Community: Comments ── */
.comment-item { display: flex; gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--border-light) }
.comment-avatar { width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 19px; background: var(--accent-soft); border: 2px solid transparent }
.comment-body { flex: 1 }
.comment-user { font-size: 13px; font-weight: 800 }
.comment-text { font-size: 13.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.55 }
.comment-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-weight: 600 }

/* ── Profile ── */
.profile-header { text-align: center; padding: 28px 16px 20px; background: linear-gradient(180deg, var(--accent-soft), transparent) }
.profile-avatar { width: 84px; height: 84px; border-radius: 26px; display: flex; align-items: center; justify-content: center; font-size: 46px; background: var(--bg-card); border: 3px solid var(--accent); margin: 0 auto 14px; box-shadow: var(--shadow); cursor: pointer; position: relative; transition: all .2s }
.profile-avatar::after { content: '✏️'; position: absolute; bottom: -3px; right: -3px; font-size: 14px; background: #fff; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm) }
.profile-avatar.no-edit { cursor: default; }
.profile-avatar.no-edit::after { display: none; }
.profile-name { font-size: 21px; font-weight: 900; letter-spacing: -0.3px }
.profile-rank { font-size: 13px; color: var(--accent); font-weight: 700; margin-top: 3px }
.profile-stats { display: flex; justify-content: center; gap: 0; margin-top: 18px; background: var(--bg-card); border-radius: var(--radius-sm); margin-left: 16px; margin-right: 16px; border: 1px solid var(--border-light) }
.stat-item { text-align: center; flex: 1; padding: 14px 4px; border-right: 1px solid var(--border-light); min-width: 0 }
.stat-item:last-child { border-right: none }
.stat-value { font-size: 17px; font-weight: 900; word-break: break-all; line-height: 1.2 }
.stat-label { font-size: 11px; color: var(--text-muted); margin-top: 3px; font-weight: 600 }
.stat-xu { color: var(--orange) }
.stat-xp { color: var(--accent) }
.xp-bar { height: 7px; background: var(--bg-input); border-radius: 7px; margin: 10px 16px; overflow: hidden }
.xp-bar-fill { height: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--accent), var(--purple)); transition: width .5s }
.achievement-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 0 16px }
.achievement-item { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 14px; text-align: center; box-shadow: var(--shadow-xs); transition: all .2s }
.achievement-item:active { transform: scale(.96) }
.achievement-icon { font-size: 30px; margin-bottom: 7px }
.achievement-name { font-size: 11px; font-weight: 700; color: var(--text-secondary) }
.avatar-picker { display: grid; grid-template-columns: repeat(6,1fr); gap: 9px; padding: 9px 0 }
.avatar-option { width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 28px; background: var(--bg-input); border: 2px solid transparent; cursor: pointer; transition: all .18s }
.avatar-option:active { transform: scale(.88) }
.avatar-option.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(74,108,247,0.18) }

/* ── Admin ── */
.admin-menu-item { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border-bottom: 1px solid var(--border-light); cursor: pointer; background: var(--bg-card); transition: background .15s }
.admin-menu-item:active { background: var(--bg-input) }
.admin-menu-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 18px }
.admin-menu-text { flex: 1 }
.admin-menu-title { font-size: 14px; font-weight: 800 }
.admin-menu-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; font-weight: 600 }
.admin-stat-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 16px; text-align: center; box-shadow: var(--shadow-xs) }
.admin-stat-num { font-size: 28px; font-weight: 900 }
.admin-stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-weight: 600 }
.admin-table { width: 100%; border-collapse: collapse; font-size: 12px }
.admin-table th { background: var(--bg-input); padding: 11px 9px; text-align: left; font-weight: 800; color: var(--text-secondary); position: sticky; top: 0 }
.admin-table td { padding: 11px 9px; border-bottom: 1px solid var(--border-light); font-weight: 600 }

/* ── Toast notifications ── */
.toast { position: fixed; top: calc(var(--safe-top) + 14px); left: 16px; right: 16px; z-index: 9999; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 10px; transform: translateY(-130%); transition: transform .3s cubic-bezier(.32,.72,0,1); max-width: 480px; margin: 0 auto; box-shadow: var(--shadow-lg) }
.toast.show { transform: translateY(0) }
.toast-success { background: #fff; color: var(--green); border: 1.5px solid rgba(16,185,129,0.4) }
.toast-error { background: #fff; color: var(--red); border: 1.5px solid rgba(239,68,68,0.4) }
.toast-info { background: #fff; color: var(--accent); border: 1.5px solid rgba(74,108,247,0.4) }

/* ── Notification list items ── */
.notif-item { display: flex; gap: 13px; padding: 14px 16px; border-bottom: 1px solid var(--border-light); transition: background .15s }
.notif-item.unread { background: rgba(74,108,247,0.04) }
.notif-icon { width: 40px; height: 40px; border-radius: var(--radius-xs); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0 }
.notif-success { background: var(--green-soft); color: var(--green) }
.notif-info { background: var(--accent-soft); color: var(--accent) }
.notif-warning { background: var(--orange-soft); color: var(--orange) }
.notif-error { background: var(--red-soft); color: var(--red) }
.notif-body { flex: 1 }
.notif-title { font-size: 13px; font-weight: 800 }
.notif-msg { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; font-weight: 600 }
.notif-time { font-size: 11px; color: var(--text-muted); margin-top: 3px; font-weight: 600 }

/* ── Search ── */
/* BUG FIX: --font và --text-primary không tồn tại → dùng inherit và --text */
.search-wrap { padding: 12px 16px 0; position: relative }
.search-input-wrap { position: relative }
.search-input { width: 100%; padding: 11px 44px 11px 40px; border-radius: 50px; border: 2px solid var(--border-light); background: var(--bg-card); font-family: inherit; font-size: 14px; font-weight: 500; color: var(--text); box-sizing: border-box; transition: border-color .2s }
.search-input:focus { outline: none; border-color: var(--accent) }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; pointer-events: none }
.search-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 4px; display: none }
.search-input:not(:placeholder-shown) ~ .search-clear { display: block }
.search-results-label { font-size: 12px; color: var(--text-muted); padding: 8px 16px 0; font-weight: 600 }

/* ── Share ── */
.share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 50px; border: 1.5px solid var(--border-light); background: var(--bg-card); font-size: 12px; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: all .2s }
.share-btn:hover { border-color: var(--accent); color: var(--accent) }
.share-options { display: flex; gap: 10px; padding: 16px; flex-wrap: wrap }
/* BUG FIX: --bg-page không tồn tại → dùng --bg */
.share-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 16px; border-radius: 12px; background: var(--bg); border: 1.5px solid var(--border-light); cursor: pointer; flex: 1; min-width: 60px; font-size: 11px; font-weight: 700; color: var(--text-secondary); transition: all .2s }
.share-opt:hover { border-color: var(--accent); color: var(--accent) }
.share-opt i { font-size: 20px }
.share-opt.copy i { color: #6366F1 }
.share-opt.facebook i { color: #1877F2 }
.share-opt.zalo i { color: #0068FF }
.share-opt.messenger i { color: #8B5CF6 }

/* ── PWA install banner ── */
.pwa-banner { position: fixed; bottom: calc(var(--tab-h, 64px) + var(--safe-bottom, 0px) + 8px); left: 16px; right: 16px; background: linear-gradient(135deg, var(--accent), #6366F1); border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 24px rgba(74,108,247,.35); z-index: 800; animation: slideUp .4s ease }
.pwa-banner-icon { font-size: 28px; flex-shrink: 0 }
.pwa-banner-text { flex: 1 }
.pwa-banner-title { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 2px }
.pwa-banner-sub { font-size: 11px; color: rgba(255,255,255,.8) }
.pwa-banner-btns { display: flex; gap: 8px; flex-shrink: 0 }
.pwa-btn-install { background: #fff; color: var(--accent); border: none; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 800; cursor: pointer }
.pwa-btn-dismiss { background: rgba(255,255,255,.2); color: #fff; border: none; border-radius: 8px; padding: 6px 8px; font-size: 12px; cursor: pointer }

/* ── Bell push-dot (trạng thái chưa subscribe push) ── */
/* Chấm cam nhấp nháy trên bell = chưa bật push, mời user nhấp */
.bell-push-dot {
    position: absolute; top: 3px; right: 3px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--orange, #F59E0B);
    border: 2px solid #fff;
    animation: bell-dot-pulse 2s ease-in-out infinite;
    pointer-events: none;
}
.bell-push-dot--blocked {
    background: var(--text-muted, #9CA3AF);
    animation: none;
}
@keyframes bell-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .6; transform: scale(1.25); }
}

/* ── Bell ring animation (dùng trong modal preview) ── */
@keyframes bell-ring {
    0%, 100% { transform: rotate(0deg); }
    10%, 30%  { transform: rotate(-15deg); }
    20%, 40%  { transform: rotate(15deg); }
    50%       { transform: rotate(0deg); }
}

/* ── Push status banner trong modal thông báo ── */
.notif-push-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px; border-bottom: 1px solid var(--border-light);
    background: linear-gradient(135deg, rgba(245,158,11,.07), rgba(234,179,8,.03));
    transition: background .15s;
}
.notif-push-banner:hover { background: rgba(245,158,11,.12); }
.notif-push-banner--blocked { background: var(--bg-input); }
.notif-push-banner--on { background: linear-gradient(135deg, rgba(34,197,94,.07), rgba(22,163,74,.03)); }
.notif-push-banner-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--orange, #F59E0B);
    flex-shrink: 0;
    animation: bell-dot-pulse 2s ease-in-out infinite;
}
.notif-push-banner-text { flex: 1; font-size: 12px; color: var(--text-secondary); font-weight: 600; line-height: 1.4 }
.notif-push-banner-text b { color: var(--text-primary); font-size: 12.5px }
.notif-push-toggle-off {
    background: var(--bg-input); border: 1.5px solid var(--border);
    color: var(--text-muted); border-radius: 8px;
    padding: 4px 10px; font-size: 11px; font-weight: 700; cursor: pointer;
    flex-shrink: 0;
}
.notif-push-toggle-off:active { transform: scale(.92); }

/* ── Shimmer skeleton ── */
.shimmer { background: linear-gradient(90deg, var(--bg-input) 25%, #DDE3EE 50%, var(--bg-input) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm) }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 56px 32px; color: var(--text-muted) }
.empty-state i { font-size: 48px; margin-bottom: 16px; opacity: .25; display: block }
.empty-state p { font-size: 14px; font-weight: 600 }

/* ════════════════════════════════════════════════════════════
   CHAMPION BADGES — Top 1/2/3 Tuần & Tháng
   Hiện ở mọi nơi: comment, post, deal, profile, leaderboard
   ════════════════════════════════════════════════════════════ */

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes champ-shine {
    0%   { background-position: -200% center }
    100% { background-position:  200% center }
}
@keyframes champ-pulse {
    0%, 100% { box-shadow: 0 0 0 0 currentColor, 0 0 6px 1px currentColor }
    50%       { box-shadow: 0 0 0 3px transparent, 0 0 10px 3px currentColor }
}
@keyframes champ-float {
    0%, 100% { transform: translateY(0px) }
    50%       { transform: translateY(-2px) }
}
@keyframes champ-rainbow {
    0%   { filter: hue-rotate(0deg)   brightness(1.1) }
    50%  { filter: hue-rotate(30deg)  brightness(1.25) }
    100% { filter: hue-rotate(0deg)   brightness(1.1) }
}

/* ── Base badge ──────────────────────────────────────────── */
.champ-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .3px;
    padding: 2px 7px 2px 5px;
    border-radius: 20px;
    vertical-align: middle;
    margin-left: 4px;
    white-space: nowrap;
    cursor: default;
    border: 1.5px solid transparent;
    position: relative;
    overflow: hidden;
    line-height: 1.4;
    transition: transform .15s ease;
}
.champ-badge:hover {
    transform: scale(1.08);
}

/* Shimmer overlay chạy qua badge */
.champ-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 35%,
        rgba(255,255,255,.45) 50%,
        transparent 65%);
    background-size: 200% 100%;
    animation: champ-shine 2.2s linear infinite;
    pointer-events: none;
    border-radius: inherit;
}

/* ── 👑 TOP 1 TUẦN — vàng rực, animation float + pulse ─── */
.champ-top1-week {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 40%, #FF8C00 70%, #FFD700 100%);
    background-size: 200% 200%;
    color: #5C3A00;
    border-color: #FF8C00;
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
    animation:
        champ-float  2s  ease-in-out infinite,
        champ-shine  2.2s linear    infinite;
    box-shadow:
        0 2px 8px rgba(255,165,0,.55),
        0 0 0 1px rgba(255,200,0,.3) inset;
}
.champ-top1-week::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,.25) 0%, transparent 60%);
    pointer-events: none;
}

/* ── 🥈 TOP 2 TUẦN — bạc sáng ───────────────────────────── */
.champ-top2-week {
    background: linear-gradient(135deg, #E8E8E8 0%, #C0C0C0 50%, #A8A8A8 100%);
    background-size: 200% 200%;
    color: #3A3A3A;
    border-color: #B0B0B0;
    box-shadow: 0 2px 6px rgba(180,180,180,.5);
    animation: champ-shine 2.8s linear infinite;
}

/* ── 🥉 TOP 3 TUẦN — đồng ───────────────────────────────── */
.champ-top3-week {
    background: linear-gradient(135deg, #E8A87C 0%, #CD7F32 50%, #A05C20 100%);
    background-size: 200% 200%;
    color: #FFF3E0;
    border-color: #B87333;
    box-shadow: 0 2px 6px rgba(180,100,30,.45);
    animation: champ-shine 3s linear infinite;
}

/* ── 🏆 TOP 1 THÁNG — holographic rainbow, to hơn, xịn hơn */
.champ-top1-month {
    background: linear-gradient(135deg,
        #FF0080 0%,
        #FF8C00 16%,
        #FFD700 33%,
        #00FF88 50%,
        #00CFFF 66%,
        #A855F7 83%,
        #FF0080 100%);
    background-size: 300% 300%;
    color: #fff;
    border-color: rgba(255,255,255,.6);
    text-shadow: 0 1px 3px rgba(0,0,0,.45);
    font-size: 11px;
    padding: 3px 9px 3px 6px;
    animation:
        champ-shine   1.8s linear    infinite,
        champ-float   2.5s ease-in-out infinite,
        champ-rainbow 3s   ease-in-out infinite;
    box-shadow:
        0 3px 12px rgba(168,85,247,.6),
        0 0 20px  rgba(255,200,0,.25),
        0 0 0 1.5px rgba(255,255,255,.35) inset;
}

/* Hào quang ngoài badge Top 1 tháng */
.champ-top1-month::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 22px;
    background: linear-gradient(135deg, #FF0080, #FFD700, #00CFFF, #A855F7, #FF0080);
    background-size: 300% 300%;
    animation: champ-shine 1.8s linear infinite;
    z-index: -1;
    opacity: .7;
    filter: blur(3px);
}

/* ── 🥈 TOP 2 THÁNG ──────────────────────────────────────── */
.champ-top2-month {
    background: linear-gradient(135deg, #E8E8E8 0%, #C8C8FF 50%, #B0B8FF 100%);
    background-size: 200% 200%;
    color: #2A2A5A;
    border-color: #9090D0;
    box-shadow: 0 2px 8px rgba(144,144,255,.45);
    animation: champ-shine 2.5s linear infinite;
}

/* ── 🥉 TOP 3 THÁNG ──────────────────────────────────────── */
.champ-top3-month {
    background: linear-gradient(135deg, #FFD9A0 0%, #F4A261 50%, #E76F51 100%);
    background-size: 200% 200%;
    color: #fff;
    border-color: #E76F51;
    box-shadow: 0 2px 8px rgba(231,111,81,.45);
    animation: champ-shine 2.8s linear infinite;
}

/* ── Responsive: trên mobile thu nhỏ chút ────────────────── */
@media (max-width: 400px) {
    .champ-badge { font-size: 9px; padding: 2px 5px 2px 4px; margin-left: 3px; }
    .champ-top1-month { font-size: 10px; }
}

/* ── Dark mode tự adapt vì dùng màu cứng (không cần override) */


/* ── HOT Deal: vertical card (horizontal scroll) ─────────── */
.hot-scroll { gap: 12px; padding: 0 15px 4px; }
.hot-card-v {
    display: flex;
    flex-direction: column;
    min-width: 175px;
    max-width: 175px;
    flex-shrink: 0;
    background: var(--bg-card);
    border-radius: 14px;
    border: 1.5px solid rgba(239,68,68,0.18);
    box-shadow: 0 3px 14px rgba(239,68,68,0.1);
    overflow: hidden;
    cursor: pointer;
    transition: transform .18s, box-shadow .18s;
    scroll-snap-align: start;
}
.hot-card-v:active { transform: scale(.97); }
.hot-card-v-img-wrap {
    position: relative;
    width: 100%;
    height: 155px;
    flex-shrink: 0;
    background: var(--bg-input);
    overflow: hidden;
}
.hot-card-v-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .3s;
}
.hot-card-v:active .hot-card-v-img { transform: scale(1.04); }
.hot-card-v-body {
    flex: 1;
    padding: 9px 11px 11px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.hot-card-v-body .deal-meta { margin-top: auto; padding-top: 4px; font-size: 10.5px }
.hot-card-v-title {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text);
    margin: 3px 0 6px;
    min-height: calc(1.45em * 2);
}
.hot-card-v-price {
    font-size: 13px;
    font-weight: 900;
    color: var(--red);
    letter-spacing: -0.2px;
    word-break: break-all;
    line-height: 1.35;
    margin-bottom: 4px;
}
.hot-card-v-sub {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    margin-bottom: 2px;
}
.hot-card-v-sub .deal-price-original { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0 }
.hot-card-v-sub .deal-discount { font-size: 9.5px; flex-shrink: 0 }
/* Legacy landscape styles kept for backward compat */
.hot-card-h {
    display: flex;
    min-width: 230px;
    max-width: 230px;
    flex-shrink: 0;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1.5px solid rgba(239,68,68,0.18);
    box-shadow: 0 3px 12px rgba(239,68,68,0.1);
    overflow: hidden;
    cursor: pointer;
    transition: transform .18s, box-shadow .18s;
    scroll-snap-align: start;
}
.hot-card-h:active { transform: scale(.97); }
.hot-card-h-img-wrap {
    position: relative;
    width: 90px;
    min-height: 120px;
    flex-shrink: 0;
}
.hot-card-h-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--bg-input);
    display: block;
}
.hot-fire-badge {
    position: absolute;
    top: 7px;
    left: 7px;
    background: linear-gradient(135deg, #FF4444, #FF6B35);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 2px 8px rgba(239,68,68,0.45);
    animation: fire-d .6s infinite alternate;
}
.hot-card-h-body {
    flex: 1;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.hot-card-h-title {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 4px 0 4px;
    color: var(--text);
}
.hot-card-h-price {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--red);
    letter-spacing: -0.3px;
}
.hot-card-h-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

/* ── Trending: ranked list ─────────────────────────────────── */
.trending-list {
    padding: 0 15px 8px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.trending-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background .15s;
}
.trending-row:last-child { border-bottom: none; }
.trending-row:active { opacity: .75; }
.trending-rank {
    font-size: 17px;
    font-weight: 900;
    min-width: 26px;
    text-align: center;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: -1px;
    flex-shrink: 0;
}
.trending-rank.rank-1 {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 20px;
}
.trending-rank.rank-2 {
    background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 20px;
}
.trending-rank.rank-3 {
    background: linear-gradient(135deg, #CD7F32, #A0522D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 20px;
}
.trending-thumb {
    width: 62px;
    height: 62px;
    object-fit: contain;
    border-radius: 10px;
    background: var(--bg-input);
    flex-shrink: 0;
    border: 1px solid var(--border-light);
}
.trending-info {
    flex: 1;
    min-width: 0;
}
.trending-title {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text);
    margin-bottom: 5px;
}
.trending-price-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
    overflow: hidden;
}
.tr-price {
    font-size: 13px;
    font-weight: 900;
    color: var(--red);
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.trending-price-row .deal-discount { flex-shrink: 0; }
.tr-original {
    font-size: 10.5px;
    color: var(--text-muted);
    text-decoration: line-through;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.trending-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 600;
}
.trending-meta i { margin-right: 2px }
.trending-arrow {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
    opacity: .4;
}

/* ── Tài trợ: scroll ngang ───────────────────────────────── */
.sp-scroll { gap: 12px; padding: 0 15px 4px; }
.sp-scroll-item {
    min-width: 155px;
    max-width: 155px;
    flex-shrink: 0;
    scroll-snap-align: start;
}
/* ── Tài trợ: featured full-width card (scroll) ───────────── */
/* ── Tài trợ: compact grid card (kiểu Slickdeals) ─────────── */
.sp-grid-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid rgba(124,58,237,0.15);
    box-shadow: 0 2px 10px rgba(124,58,237,0.08);
    overflow: hidden;
    cursor: pointer;
    transition: transform .18s, box-shadow .18s;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.sp-grid-card:active { transform: scale(.97); box-shadow: 0 1px 4px rgba(124,58,237,0.06); }
.sp-grid-img-wrap {
    position: relative;
    width: 100%;
    height: 148px;
    overflow: hidden;
    background: var(--bg-input);
    flex-shrink: 0;
}
.sp-grid-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .3s;
}
.sp-grid-card:active .sp-grid-img { transform: scale(1.04); }
.sp-grid-badge {
    position: absolute;
    top: 7px;
    left: 7px;
    background: rgba(124,58,237,0.15);
    color: var(--purple, #7C3AED);
    font-size: 9.5px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 3px;
    backdrop-filter: blur(6px);
    z-index: 2;
}
.sp-grid-body {
    padding: 9px 11px 11px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.sp-grid-title {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text);
    margin-bottom: 7px;
    min-height: calc(1.45em * 2);
}
.sp-grid-price {
    font-size: 13px;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.2px;
    word-break: break-all;
    line-height: 1.35;
    margin-bottom: 4px;
}
.sp-grid-price-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
    overflow: hidden;
}
.sp-grid-price-row .deal-price-original {
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.sp-grid-price-row .deal-discount { flex-shrink: 0; }
.sp-grid-store {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: auto;
    padding-top: 4px;
}

/* ── Category Browse Header ───────────────────────────────── */
.cat-browse-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 16px 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-light);
}
.cat-browse-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft, rgba(99,102,241,0.1));
    border-radius: 8px;
    color: var(--primary, #6366f1);
    font-size: 15px;
    flex-shrink: 0;
}
.cat-browse-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    flex: 1;
}
.cat-browse-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 3px 8px;
    border-radius: 20px;
}

/* ── PC (≥ 480px): re-center fixed elements ──────────────────
   components.css loads after base.css, so non-media-query rules
   here override the PC-centred positions in base.css.
   This block restores them.
   ─────────────────────────────────────────────────────────── */
@media (min-width: 480px) {
    #loading-screen {
        left: 50%;
        right: auto;
        width: 480px;
        transform: translateX(-50%);
    }
    .fab {
        right: calc(50% - 222px);
    }
    .toast {
        left: calc(50% - 224px);
        right: auto;
        width: 448px;
    }
    .pwa-banner {
        left: calc(50% - 224px);
        right: auto;
        width: 448px;
    }
}