/* === 07-detail-cart-checkout.css === */
/* ============================================================
   TRANG CHI TIẾT SẢN PHẨM
   ============================================================ */
.detail { display: grid; grid-template-columns: 460px 1fr; gap: 32px; align-items: start; margin-bottom: 40px; }
.detail__img { position: relative; background: var(--surface-2); border: 1px solid transparent; border-radius: var(--radius); aspect-ratio: 1/1; display: grid; place-items: center; overflow: hidden; }
.detail__img img { width: 100%; height: 100%; object-fit: cover; padding: 0; transition: opacity .35s ease; }
.detail__ficon { font-size: 8rem; }
.detail__media { position: sticky; top: 96px; }
/* CLS: cả thân trang chi tiết do JS (detail.js) render → giữ chỗ trong lúc tải để footer không nhảy.
   Giải phóng NGAY khi nội dung render xong (.grid-loading biến mất). Đặt THẤP hơn chiều cao thật của
   sản phẩm → chỉ GIẢM dịch xuống, không gây dịch lên. */
#detailBody:not(.ap-loaded) { min-height: 150vh; }
@media (min-width: 760px) { #detailBody:not(.ap-loaded) { min-height: 90vh; } }
/* Dải thumbnail nhiều ảnh (slider tự viết, không thư viện) */
.detail__thumbs { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.detail__thumbTrack { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; flex: 1; scrollbar-width: none; }
.detail__thumbTrack::-webkit-scrollbar { display: none; }
.detail__thumb { flex: 0 0 auto; width: 76px; height: 76px; padding: 5px; background: var(--surface-2); border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; overflow: hidden; transition: border-color .15s; }
.detail__thumb img { width: 100%; height: 100%; object-fit: contain; }
.detail__thumb:hover { border-color: var(--gold); }
.detail__thumb.is-active { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.detail__thumbNav { flex: 0 0 auto; width: 30px; height: 76px; display: grid; place-items: center; font-size: 1.5rem; line-height: 1; color: var(--gold); background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius); cursor: pointer; }
.detail__thumbNav:hover { background: var(--surface); border-color: var(--gold); }
.detail__img img { cursor: zoom-in; }
/* Lightbox phóng to ảnh sản phẩm */
.ap-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(8,10,14,.92); padding: 40px; }
.ap-lightbox.on { display: flex; }
.ap-lb__img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.6); background: #fff; }
.ap-lb__close { position: absolute; top: 18px; right: 24px; width: 44px; height: 44px; font-size: 30px; line-height: 1; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: 10px; cursor: pointer; }
.ap-lb__close:hover { background: rgba(255,255,255,.18); }
.ap-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 72px; display: grid; place-items: center; font-size: 2.2rem; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: 10px; cursor: pointer; }
.ap-lb__nav:hover { background: rgba(255,255,255,.18); }
.ap-lb__prev { left: 24px; } .ap-lb__next { right: 24px; }
@media (max-width: 640px) { .ap-lb__nav { width: 40px; height: 56px; font-size: 1.6rem; } .ap-lb__prev { left: 8px; } .ap-lb__next { right: 8px; } .ap-lb__close { top: 10px; right: 12px; } }
.detail__name { font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 700; line-height: 1.3; margin-bottom: 14px; }
.detail__metaRow { display: flex; flex-wrap: wrap; gap: 16px; font-size: .88rem; color: var(--text-mute); margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.detail__metaRow b { color: var(--text); }
.stock-in { color: var(--success); }
.stock-out { color: var(--red); }
.detail__priceBox { background: linear-gradient(135deg, rgba(232,180,58,.1), transparent); border: 1px solid var(--border); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.detail__price { font-family: var(--ff-head); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--gold); }
.detail__price--contact { font-size: 1.6rem; }
.detail__warranty, .detail__cond { font-size: .86rem; color: var(--text-mute); }
.detail__cond { width: 100%; }
/* Dải CHỌN MÀU / biến thể (PC build nhiều màu vỏ Case) */
.detail__variants { margin: 0 0 18px; }
.detail__variants-h { font-size: .86rem; font-weight: 700; color: var(--text); margin-bottom: 9px; }
.detail__swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.dswatch { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 9px; border: 1.5px solid var(--border-2); border-radius: 999px; background: var(--surface); color: var(--text); text-decoration: none; font-size: .88rem; font-weight: 600; transition: border-color .15s, box-shadow .15s; }
.dswatch:hover { border-color: var(--gold); }
.dswatch.is-active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(232,180,58,.25); cursor: default; }
.dswatch__dot { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.dswatch.is-oos { opacity: .55; }
.dswatch.is-oos .dswatch__label::after { content: " (hết)"; color: var(--red); font-weight: 500; }
.detail__highlights { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; font-size: .9rem; color: var(--text-mute); line-height: 1.7; margin-bottom: 20px; }
/* Nhãn "PC chơi được game gì" (dải nhãn game nổi bật — chỉ PC build) */
.detail__games { background: linear-gradient(135deg, rgba(54,201,141,.13), rgba(54,201,141,.03)); border: 1px solid rgba(54,201,141,.42); border-radius: var(--radius); padding: 13px 16px; margin-bottom: 20px; }
.detail__games-h { font-weight: 700; color: #36c98d; margin-bottom: 10px; font-size: .92rem; }
.detail__gtags { display: flex; flex-wrap: wrap; gap: 8px; }
.gtag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--border-2); border-radius: 999px; background: var(--surface); font-size: .85rem; line-height: 1.2; }
.gtag__name { font-weight: 700; color: var(--text); }
.gtag__note { color: #36c98d; font-weight: 600; font-size: .8rem; padding-left: 7px; border-left: 1px solid var(--border-2); }
.detail__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
/* Nút "Tùy chỉnh theo yêu cầu" (PC build → mở trang Xây dựng cấu hình) */
.detail__customize { width: 100%; margin: -4px 0 18px; border: 1.5px dashed var(--gold-deep); color: var(--gold); font-weight: 700; background: rgba(232,180,58,.06); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.detail__customize:hover { background: rgba(232,180,58,.13); border-color: var(--gold); }
/* ===== POPUP TÙY CHỈNH CẤU HÌNH (mini-builder ngay trên trang sản phẩm) ===== */
.cust-ov { position: fixed; inset: 0; z-index: 5000; display: none; align-items: flex-start; justify-content: center; background: rgba(8,10,14,.74); padding: 26px 14px; overflow-y: auto; }
.cust-ov.on { display: flex; }
.cust-modal { width: 100%; max-width: 640px; background: var(--bg, #0d0f12); border: 1px solid var(--border-2); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.cust-head { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--border); background: var(--surface); }
.cust-head__t { font-weight: 800; font-size: 1.02rem; color: var(--text); flex: 1; }
.cust-x, .cust-back { background: transparent; border: 1px solid var(--border-2); color: var(--text-mute); border-radius: 8px; padding: 5px 10px; cursor: pointer; font-size: .88rem; line-height: 1; }
.cust-x:hover, .cust-back:hover { border-color: var(--gold); color: var(--gold); }
.cust-note { padding: 10px 18px; font-size: .83rem; color: var(--text-mute); border-bottom: 1px solid var(--border); }
.cust-rows { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; max-height: 48vh; overflow-y: auto; }
.cust-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.cust-row--empty { border-style: dashed; }
.cust-row__ctrl { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.cust-row__qty { display: inline-flex; align-items: center; border: 1px solid var(--border-2); border-radius: 999px; overflow: hidden; flex: 0 0 auto; }
.cust-qty__b { width: 26px; height: 28px; background: var(--surface-2, #1c2026); color: var(--gold); border: 0; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; }
.cust-qty__b:hover { background: var(--surface); }
.cust-qty__v { min-width: 24px; text-align: center; font-weight: 700; font-size: .85rem; color: var(--text); }
.cust-row__ic { font-size: 1.15rem; color: var(--gold); width: 30px; text-align: center; flex: 0 0 30px; }
.cust-row__fig { width: 42px; height: 42px; flex: 0 0 42px; background: #0a0c0f; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cust-row__fig img { width: 100%; height: 100%; object-fit: contain; }
.cust-row__main { flex: 1 1 130px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cust-row__label { font-size: .68rem; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.cust-row__label--empty { flex: 1; text-transform: none; color: var(--text-mute); font-weight: 600; font-size: .85rem; }
.cust-row__name { font-size: .84rem; color: var(--text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-row__price { font-size: .84rem; font-weight: 700; color: var(--gold); white-space: nowrap; }
.cust-row__btns { display: flex; gap: 5px; flex: 0 0 auto; }
.cust-row__pick, .cust-row__chg, .cust-row__rm { border: 1px solid var(--border-2); background: var(--surface-2, #1c2026); color: var(--text); border-radius: 7px; padding: 6px 11px; font-size: .8rem; cursor: pointer; }
.cust-row__pick { border-color: var(--gold-deep); color: var(--gold); font-weight: 700; margin-left: auto; }
.cust-row__chg:hover, .cust-row__pick:hover { border-color: var(--gold); color: var(--gold); }
.cust-row__rm { color: var(--red); border-color: #5a2a2a; padding: 6px 9px; }
.cust-row__rm:hover { background: #2a1414; }
.cust-foot { padding: 14px 18px; border-top: 1px solid var(--border); background: var(--surface); }
.cust-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: .88rem; color: var(--text-mute); }
.cust-total b { font-family: Oswald, sans-serif; font-size: 1.5rem; color: var(--gold); }
.cust-actions { display: flex; flex-direction: column; gap: 9px; }
.cust-btn { width: 100%; padding: 12px; font-size: .95rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.cust-hint { font-size: .75rem; color: var(--text-mute); margin-top: 10px; line-height: 1.5; }
.cust-srch { padding: 12px 18px; border-bottom: 1px solid var(--border); }
.cust-srch input { width: 100%; padding: 10px 12px; background: var(--surface-2, #1c2026); border: 1px solid var(--border-2); border-radius: 9px; color: var(--text); font-size: .9rem; }
.cust-picks { padding: 8px 14px 14px; max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.cust-pick { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.cust-pick__fig { width: 44px; height: 44px; flex: 0 0 44px; background: #0a0c0f; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cust-pick__fig img { width: 100%; height: 100%; object-fit: contain; }
.cust-pick__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cust-pick__name { font-size: .84rem; color: var(--text); line-height: 1.3; }
.cust-pick__brand { font-size: .72rem; color: var(--text-mute); }
.cust-pick__price { font-size: .83rem; font-weight: 700; color: var(--gold); white-space: nowrap; }
.cust-pick__btn { border: 1px solid var(--gold-deep); background: rgba(232,180,58,.08); color: var(--gold); border-radius: 7px; padding: 7px 15px; font-weight: 700; cursor: pointer; font-size: .82rem; }
.cust-pick__btn:hover { background: var(--gold); color: #1a1407; }
.cust-loading, .cust-empty { text-align: center; padding: 30px; color: var(--text-mute); font-size: .88rem; }
@media (max-width: 560px) { .cust-modal { max-width: 100%; } .cust-row__name { white-space: normal; } }
.qty { display: flex; align-items: center; border: 1px solid var(--border-2); border-radius: 999px; overflow: hidden; }
.qty button { width: 40px; height: 46px; font-size: 1.3rem; color: var(--gold); background: var(--surface-2); }
.qty button:hover { background: var(--surface); }
.qty input { width: 54px; height: 46px; text-align: center; background: var(--surface); border: none; color: var(--text); font-weight: 700; font-size: 1rem; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.btn-lg2 { padding: 13px 26px; font-size: 1rem; }
.detail__assure { display: flex; flex-wrap: wrap; gap: 14px 22px; font-size: .84rem; color: var(--text-mute); padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.detail__extlink { font-size: .86rem; color: var(--gold); }
.detail__extlink:hover { text-decoration: underline; }
/* ── Badge cạnh tên ── */
.detail__badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.dbadge { font-size: .76rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-2); color: var(--text-mute); }
.dbadge--ok { color: var(--success); }
.dbadge--used { color: var(--gold); border-color: var(--gold-deep); }
/* ── Rating ── */
.detail__rating { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; padding: 0; }
.stars { letter-spacing: 1px; color: var(--gold); font-size: .95rem; }
.stars--0 { color: var(--border-2); }
.detail__rating .muted { font-size: .82rem; }
.detail__vat { font-size: .78rem; color: var(--text-mute); }
.detail__warranty { width: 100%; font-size: .9rem; color: var(--text); margin-top: 2px; }
.detail__warranty b { color: var(--gold); }
/* ── Hộp ưu đãi / quà tặng ── */
.detail__promo { background: linear-gradient(135deg, rgba(232,180,58,.12), rgba(232,180,58,.03)); border: 1px solid var(--gold-deep); border-radius: var(--radius); padding: 13px 16px; margin-bottom: 18px; }
.detail__promo-h { font-weight: 700; color: var(--gold); margin-bottom: 8px; font-size: .95rem; }
.detail__promo ul { list-style: none; display: grid; gap: 7px; }
.detail__promo li { position: relative; padding-left: 22px; font-size: .87rem; color: var(--text); line-height: 1.45; }
.detail__promo li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 700; }
.detail__promo b { color: var(--gold-bright); }
/* ── Đặc điểm nổi bật (tiêu đề) ── */
.detail__highlights h3 { font-size: .9rem; color: var(--gold); margin-bottom: 6px; font-weight: 600; }
/* ── Cam kết ── */
.detail__trust { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.detail__trust > div { display: flex; gap: 9px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 11px; }
.detail__trust > div > span { font-size: 1.3rem; line-height: 1; }
.detail__trust b { display: block; font-size: .82rem; color: var(--text); }
.detail__trust small { font-size: .72rem; color: var(--text-mute); }
/* ── Tư vấn Zalo / Hotline ── */
.detail__consult { display: flex; gap: 10px; margin-bottom: 16px; }
.dc { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 12px; border-radius: var(--radius); font-weight: 600; font-size: .9rem; border: 1px solid var(--border-2); transition: transform .15s, filter .15s; }
.dc:hover { transform: translateY(-2px); filter: brightness(1.06); }
.dc--zalo { background: #0068ff; color: #fff; border-color: #0068ff; }
.dc--call { background: var(--surface); color: var(--gold); border-color: var(--gold-deep); }
/* ── Tabs nội dung ── */
.ptabs { margin: 8px 0 40px; }
.ptabs__nav { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; }
.ptab { padding: 11px 20px; font-family: var(--ff-head); font-weight: 600; font-size: 1rem; color: var(--text-mute); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; transition: color .15s, border-color .15s; }
.ptab:hover { color: var(--text); }
.ptab.is-active { color: var(--gold); border-bottom-color: var(--gold); }
.ptabs__panel { display: none; }
.ptabs__panel.is-active { display: block; animation: ptabFade .2s ease; }
@keyframes ptabFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ptabs__desc { position: relative; overflow: hidden; color: var(--text); line-height: 1.75; font-size: .94rem; }
.ptabs__desc.collapsed { max-height: 420px; }
.ptabs__desc img { display: block; max-width: 100%; max-height: 380px; width: auto; height: auto; margin: 16px auto; border-radius: 10px; border: 1px solid var(--border); background: #fff; padding: 6px; }
.ptabs__desc h1, .ptabs__desc h2, .ptabs__desc h3 { color: var(--gold); margin: 22px 0 10px; font-size: 1.08rem; font-weight: 700; line-height: 1.35; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.ptabs__desc h1:first-child, .ptabs__desc h2:first-child, .ptabs__desc h3:first-child { margin-top: 0; }
.ptabs__desc p { margin: 11px 0; }
.ptabs__desc ul, .ptabs__desc ol { padding-left: 4px; margin: 12px 0; list-style: none; }
.ptabs__desc li { position: relative; padding-left: 22px; margin: 7px 0; }
.ptabs__desc ul li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 700; }
.ptabs__desc ol { counter-reset: ap-li; }
.ptabs__desc ol li { counter-increment: ap-li; }
.ptabs__desc ol li::before { content: counter(ap-li) "."; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 700; }
.ptabs__desc strong { color: var(--gold-bright, var(--gold)); font-weight: 700; }
.ptabs__desc a { color: var(--gold); text-decoration: underline; }
.ptabs__fade { position: relative; text-align: center; margin-top: -44px; padding-top: 44px; background: linear-gradient(to bottom, transparent, var(--bg) 72%); }
.ptabs__fade--open { margin-top: 12px; padding-top: 0; background: none; }
.ptabs__more { background: var(--surface); border: 1px solid var(--border-2); color: var(--gold); padding: 8px 22px; border-radius: 999px; font-weight: 600; font-size: .85rem; cursor: pointer; }
.ptabs__more:hover { border-color: var(--gold); }
/* ── Đánh giá (khung rỗng) ── */
.reviews-empty { text-align: center; padding: 20px 0; }
.reviews-score { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 8px; }
.reviews-score b { font-size: 2.2rem; font-family: var(--ff-head); color: var(--gold); line-height: 1; }
.reviews-score small { font-size: .8rem; color: var(--text-mute); }
.reviews-empty .detail__consult { max-width: 420px; margin: 14px auto 0; }
.detail__specs { margin-top: 10px; }
.detail__specs-title { font-family: var(--ff-head); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; font-size: 1.3rem; padding-left: 14px; position: relative; margin-bottom: 18px; }
.detail__specs-title::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 80%; background: var(--gold-grad); border-radius: 3px; }
/* Bảng thông số nhập từ backend (tech_html) — ép về tông tối cho đồng nhất */
.tech-html { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; }
.tech-html table { width: 100% !important; border-collapse: collapse !important; }
.tech-html td, .tech-html th { border: 1px solid var(--border) !important; padding: 9px 14px !important; background: transparent !important; color: var(--text) !important; font-size: .92rem !important; vertical-align: top; text-align: left; }
.tech-html p, .tech-html span { color: var(--text) !important; background: transparent !important; font-family: var(--ff-body) !important; font-size: .92rem !important; }
.tech-html tr:nth-child(even) td { background: rgba(255,255,255,.02) !important; }
.tech-html td:first-child, .tech-html td:first-child span { color: var(--text-mute) !important; }
.tech-html strong, .tech-html strong span { color: var(--gold) !important; font-weight: 700 !important; }
.spec-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.spec-table td { padding: 11px 16px; border-bottom: 1px solid var(--border); font-size: .92rem; }
.spec-table tr:last-child td { border-bottom: none; }
.spec-table td:first-child { color: var(--text-mute); width: 40%; }
.spec-table td:last-child { color: var(--text); font-weight: 500; }
.spec-table tr:nth-child(even) { background: rgba(255,255,255,.02); }
@media (max-width: 860px) {
  .detail { grid-template-columns: 1fr; gap: 22px; }
  .detail__media { position: static; max-width: 420px; }
  .detail__thumb { width: 64px; height: 64px; }
  .detail__thumbNav { width: 26px; height: 64px; }
}
/* ============================================================
   TRANG GIỎ HÀNG
   ============================================================ */
.cart-wrap { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }
.cart-items { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 18px; }
.cart-row { display: grid; grid-template-columns: 76px 1fr auto auto 36px; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.cart-row:last-of-type { border-bottom: none; }
.cart-row__fig { width: 76px; height: 76px; background: linear-gradient(160deg, #f4f4f5, #dadade); border-radius: var(--radius-sm); display: grid; place-items: center; overflow: hidden; }
.cart-row__fig img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.cart-row__icon { font-size: 2rem; }
.cart-row__name { font-weight: 500; font-size: .94rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cart-row__name:hover { color: var(--gold); }
.tag-used { display: inline-block; font-size: .7rem; font-weight: 600; color: var(--gold); border: 1px solid rgba(232,180,58,.4); border-radius: 4px; padding: 1px 6px; margin-top: 4px; }
.cart-row__unit { font-size: .85rem; color: var(--text-mute); margin-top: 4px; }
.cart-row__qty button { width: 34px; height: 38px; font-size: 1.1rem; }
.cart-row__qty input { width: 44px; height: 38px; }
.cart-row__line { font-family: var(--ff-head); font-weight: 600; color: var(--gold); font-size: 1.05rem; min-width: 110px; text-align: right; }
.cart-row__rm { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--text-mute); font-size: .9rem; transition: all .2s; }
.cart-row__rm:hover { background: var(--red); color: #fff; }
.cart-items__foot { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 8px; gap: 12px; }
.cart-clear { color: var(--text-mute); font-size: .88rem; font-weight: 600; transition: color .2s; }
.cart-clear:hover { color: var(--red); }
.cart-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; position: sticky; top: 96px; }
.cart-summary h3 { font-family: var(--ff-head); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; font-size: 1.15rem; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.cart-summary__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: .92rem; color: var(--text-mute); }
.cart-summary__row b { color: var(--text); }
.cart-summary__total { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 1.05rem; }
.cart-summary__total b { font-family: var(--ff-head); font-weight: 700; color: var(--gold); font-size: 1.7rem; }
.cart-summary__note { font-size: .8rem; color: var(--text-dim); margin-top: 12px; line-height: 1.5; }
@media (max-width: 860px) { .cart-wrap { grid-template-columns: 1fr; } .cart-summary { position: static; } }
@media (max-width: 560px) {
  .cart-row { grid-template-columns: 60px 1fr auto; grid-template-areas: "fig main rm" "fig qty line"; gap: 10px 12px; }
  .cart-row__fig { grid-area: fig; width: 60px; height: 60px; }
  .cart-row__main { grid-area: main; min-width: 0; }
  /* justify-self:start → pill số lượng ôm sát nội dung, KHÔNG kéo dãn hết cột (lỗi cũ) */
  .cart-row__qty { grid-area: qty; justify-self: start; }
  .cart-row__qty button { height: 42px; }
  .cart-row__qty input { height: 42px; }
  /* giá: cột auto đủ rộng + nowrap → không vỡ/đè (cũ nằm trong cột 32px) */
  .cart-row__line { grid-area: line; text-align: right; min-width: 0; white-space: nowrap; align-self: center; font-size: 1rem; }
  .cart-row__rm { grid-area: rm; justify-self: end; align-self: start; }
}
/* ============================================================
   TRANG ĐẶT HÀNG (CHECKOUT)
   ============================================================ */
.checkout { display: grid; grid-template-columns: 1fr 360px; gap: 22px; align-items: start; }
.co-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px; }
.co-box__title { font-family: var(--ff-head); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; font-size: 1.05rem; margin-bottom: 16px; color: var(--gold); }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .86rem; font-weight: 600; color: var(--text-mute); margin-bottom: 6px; }
.field label i { color: var(--red); font-style: normal; }
.field input, .field textarea { width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 11px 14px; font-size: .94rem; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,180,58,.1); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); }
.field.has-err input, .field.has-err textarea { border-color: var(--red); }
.field__err { display: block; color: var(--red); font-size: .8rem; margin-top: 5px; }
.co-error { background: rgba(255,46,46,.1); border: 1px solid var(--red); color: #ff9a9a; padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: .9rem; font-weight: 500; }
.pay-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; cursor: pointer; transition: border-color .2s, background .2s; }
.pay-card:last-child { margin-bottom: 0; }
.pay-card:hover { border-color: var(--border-2); }
.pay-card.is-selected { border-color: var(--gold); background: rgba(232,180,58,.07); }
.pay-card input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--gold); flex-shrink: 0; }
.pay-card__body b { display: block; font-size: .98rem; margin-bottom: 3px; }
.pay-card__body b em { color: var(--gold); font-style: normal; font-size: .82rem; font-weight: 600; }
.pay-card__body small { color: var(--text-mute); font-size: .85rem; line-height: 1.4; }
.co-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; position: sticky; top: 96px; }
.co-summary h3 { font-family: var(--ff-head); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; font-size: 1.05rem; margin-bottom: 16px; }
.co-items { max-height: 280px; overflow-y: auto; margin-bottom: 14px; }
.co-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.co-item__fig { width: 42px; height: 42px; flex-shrink: 0; background: linear-gradient(160deg, #f4f4f5, #dadade); border-radius: 8px; display: grid; place-items: center; overflow: hidden; font-size: 1.2rem; }
.co-item__fig img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.co-item__name { flex: 1; font-size: .82rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.co-item__name em { color: var(--gold); font-style: normal; font-weight: 600; }
.co-item__price { font-size: .85rem; font-weight: 600; white-space: nowrap; }
.co-summary__row { display: flex; justify-content: space-between; font-size: .9rem; color: var(--text-mute); margin-bottom: 10px; }
.co-summary__row b { color: var(--text); }
.co-summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; margin: 6px 0 16px; border-top: 1px solid var(--border); }
.co-summary__total b { font-family: var(--ff-head); font-weight: 700; color: var(--gold); font-size: 1.5rem; }
/* Kết quả đặt hàng */
.co-done { max-width: 680px; margin: 10px auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 38px 32px; text-align: center; }
.co-done__icon { font-size: 3.4rem; margin-bottom: 8px; }
.co-done h2 { font-family: var(--ff-head); font-weight: 700; font-size: 1.8rem; color: var(--gold); margin-bottom: 14px; }
.co-done p { color: var(--text-mute); margin-bottom: 10px; }
.co-done p b { color: var(--text); }
.co-done__note { font-size: .92rem; line-height: 1.6; }
.co-done__sum { margin-top: 14px; font-size: 1rem; }
.qr-box { display: flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin: 20px 0; text-align: left; }
.qr-img { background: #fff; padding: 12px; border-radius: 12px; flex-shrink: 0; }
.qr-img img { width: 210px; height: 210px; display: block; object-fit: contain; }
.qr-info { display: flex; flex-direction: column; gap: 9px; min-width: 220px; }
.qr-info > div { display: flex; justify-content: space-between; gap: 16px; font-size: .9rem; border-bottom: 1px dashed var(--border); padding-bottom: 7px; }
.qr-info span { color: var(--text-mute); }
.qr-info b { color: var(--text); text-align: right; }
.co-done__actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
@media (max-width: 860px) { .checkout { grid-template-columns: 1fr; } .co-summary { position: static; } }
@media (max-width: 480px) { .qr-box { flex-direction: column; } .qr-info { width: 100%; } }
/* =====================================================================
   GOM NÚT BẤM — 1 ưu tiên nổi rõ ("Mua ngay" + "Gọi lại") + hàng phụ NHẠT
   ===================================================================== */
.btn--callout { background: rgba(232,180,58,.08); color: var(--gold); border: 1.5px solid var(--gold-deep); }
.btn--callout:hover { background: rgba(232,180,58,.16); border-color: var(--gold); }
.detail__more { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 18px; }
.detail__minor { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: .83rem; font-weight: 600;
  background: transparent; color: var(--text-mute); border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s; text-decoration: none; }
.detail__minor:hover { color: var(--text); border-color: var(--border-2); background: var(--surface); }
/* =====================================================================
   ĐÁNH GIÁ KHÁCH HÀNG (thật) — danh sách + điểm sao + form gửi đánh giá
   ===================================================================== */
.detail__ratingWrap:empty { display: none; }
.rv-sum { margin: 2px 0 18px; }
.rv-sum__score { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rv-sum__score b { font-size: 2.2rem; font-family: var(--ff-head); color: var(--gold); line-height: 1; }
.rv-sum__stars { color: var(--gold); letter-spacing: 2px; font-size: 1.1rem; }
.rv-sum__score small { color: var(--text-mute); font-size: .82rem; }
.rv-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.rv-it { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.rv-it__h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
.rv-it__name { font-weight: 700; color: var(--text); font-size: .9rem; }
.rv-it__stars { color: var(--gold); letter-spacing: 1px; font-size: .9rem; }
.rv-it__h time { color: var(--text-mute); font-size: .76rem; margin-left: auto; }
.rv-it__c { color: var(--text); line-height: 1.6; font-size: .9rem; white-space: pre-wrap; margin: 0; }
.rv-it__reply { margin-top: 9px; background: rgba(232,180,58,.06); border-left: 3px solid var(--gold-deep);
  border-radius: 0 8px 8px 0; padding: 8px 11px; font-size: .85rem; color: var(--text); }
.rv-it__reply b { color: var(--gold); }
.rv-none { color: var(--text-mute); font-size: .9rem; padding: 6px 0 18px; }
.rvform { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.rvform__h { font-size: 1rem; color: var(--text); margin: 0 0 12px; font-weight: 700; }
.rvform__stars { display: inline-flex; gap: 4px; margin-bottom: 12px; }
.rvform__stars button { background: none; border: none; cursor: pointer; font-size: 1.9rem; line-height: 1; color: var(--border-2); padding: 0 2px; transition: color .1s; }
.rvform__stars button.on { color: var(--gold); }
.rvform input, .rvform textarea { width: 100%; background: var(--surface-2, #1c2026); border: 1px solid var(--border-2); border-radius: 9px;
  color: var(--text); padding: 10px 12px; font-size: .9rem; margin-bottom: 10px; font-family: inherit; }
.rvform input:focus, .rvform textarea:focus { outline: none; border-color: var(--gold); }
.rvform textarea { resize: vertical; min-height: 70px; }
.rvform .btn--gold { padding: 10px 24px; }
.rvform__msg { font-size: .85rem; margin: 6px 0 0; min-height: 1em; }
.rvform__msg.ok { color: var(--success); }
.rvform__msg.err { color: var(--red); }
.rvform__note { font-size: .76rem; color: var(--text-mute); margin: 8px 0 0; line-height: 1.5; }
/* === 08-static-pages.css === */
/* ============================================================
   TRANG TĨNH (Giới thiệu / Liên hệ / Chính sách)
   ============================================================ */
.page-hero { text-align: center; padding: 24px 0 30px; }
.page-hero h1 { font-family: var(--ff-head); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.8rem); text-transform: uppercase; letter-spacing: 1px; }
.page-hero p { color: var(--text-mute); margin-top: 8px; font-size: 1.05rem; }
.prose { max-width: 820px; margin: 0 auto; color: var(--text-mute); line-height: 1.75; }
.prose p { margin-bottom: 14px; }
.prose b { color: var(--text); }
.prose h2 { font-family: var(--ff-head); font-weight: 600; color: var(--text); font-size: 1.4rem; margin: 26px 0 12px; }
.prose ul { padding-left: 4px; margin-bottom: 14px; }
.prose ul li { position: relative; padding-left: 26px; margin-bottom: 9px; }
.prose ul li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 820px; margin: 32px auto; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 14px; text-align: center; }
.stat b { font-family: var(--ff-head); font-weight: 700; font-size: 2rem; display: block; }
.stat span { color: var(--text-mute); font-size: .86rem; }
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin: 40px auto 0; max-width: 980px; padding: 30px 36px; border-radius: 18px; background: radial-gradient(600px 200px at 100% 0%, rgba(232,180,58,.16), transparent 60%), linear-gradient(135deg, #18130a, #0e0e10); border: 1px solid var(--border-2); }
.cta-band h3 { font-family: var(--ff-head); font-weight: 600; font-size: 1.5rem; text-transform: uppercase; }
.cta-band p { color: var(--text-mute); margin-top: 4px; }
.cta-band__btns { display: flex; gap: 12px; flex-wrap: wrap; }
/* Liên hệ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; align-items: start; max-width: 1000px; margin: 0 auto; }
.contact-info { display: flex; flex-direction: column; gap: 12px; }
.contact-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; transition: border-color .2s; }
.contact-card[href]:hover { border-color: var(--gold); }
.contact-card__ic { font-size: 1.6rem; }
.contact-card b { display: block; font-size: .9rem; margin-bottom: 2px; }
.contact-card p { color: var(--text-mute); font-size: .9rem; }
.contact-social { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.contact-social__btn { color: #fff; font-weight: 600; font-size: .85rem; padding: 9px 16px; border-radius: 999px; }
.contact-form-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.contact-form-box h3 { font-family: var(--ff-head); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 16px; }
.map-box { max-width: 1000px; margin: 24px auto 0; background: var(--surface); border: 1px dashed var(--border-2); border-radius: var(--radius); padding: 40px 20px; text-align: center; color: var(--text-mute); }
/* Bản đồ cửa hàng (lien-he) — nhúng Google Maps thật từng chi nhánh */
.store-maps { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; max-width: 1000px; margin: 28px auto 0; }
.store-map { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.store-map__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; }
.store-map__hd b { font-size: .95rem; }
.store-map__dir { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 600; color: #1a1206; background: linear-gradient(135deg, #f3c969, var(--gold)); padding: 6px 12px; border-radius: 8px; white-space: nowrap; }
.store-map__dir:hover { filter: brightness(1.06); }
.store-map__addr { color: var(--text-mute); font-size: .86rem; padding: 0 16px 11px; }
.store-map__frame { width: 100%; height: 240px; border: 0; display: block; border-top: 1px solid var(--border); }
/* ============================================================
   TRANG CHI NHÁNH (Local SEO — /chi-nhanh-binh-thanh, /chi-nhanh-phan-rang)
   ============================================================ */
.branch-intro { max-width: 1000px; margin: 6px auto 0; }
.branch-intro p { color: var(--text-mute); line-height: 1.7; margin-bottom: 12px; }
.branch-intro b { color: var(--text); font-weight: 600; }
.branch-services, .branch-shop, .branch-other { max-width: 1000px; margin: 30px auto 0; }
.branch-services h2, .branch-shop h2 { font-family: var(--ff-head); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; font-size: 1.25rem; margin-bottom: 14px; }
.branch-services__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px 22px; margin: 0; padding: 0; }
.branch-services__list li { color: var(--text-mute); line-height: 1.55; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 16px; }
.branch-services__list a { color: var(--gold); font-weight: 600; }
.branch-shop p { color: var(--text-mute); margin-bottom: 12px; }
.branch-shop__links { display: flex; flex-wrap: wrap; gap: 10px; }
.branch-shop__links a { display: inline-flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 9px 18px; font-weight: 600; font-size: .9rem; color: var(--text); transition: border-color .2s, color .2s; }
.branch-shop__links a:hover { border-color: var(--gold); color: var(--gold); }
.branch-other { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; }
.branch-other p { color: var(--text-mute); line-height: 1.6; margin: 0; }
.branch-other a { color: var(--gold); font-weight: 600; }
/* Chính sách */
.policy { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; max-width: 1000px; margin: 0 auto; }
.policy__nav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
.policy__nav a { padding: 11px 14px; border-radius: var(--radius-sm); color: var(--text-mute); font-size: .9rem; font-weight: 500; transition: background .2s, color .2s; }
.policy__nav a:hover { background: var(--surface-2); color: var(--gold); }
.policy__body { margin: 0; }
.policy__body section { scroll-margin-top: 90px; padding-bottom: 8px; }
@media (max-width: 820px) {
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .policy { grid-template-columns: 1fr; }
  .policy__nav { position: static; flex-direction: row; flex-wrap: wrap; }
}
/* ============================================================
   FOOTER — thông tin pháp lý + địa chỉ nhiều chi nhánh
   ============================================================ */
.footer__contact li { display: flex; gap: 7px; align-items: flex-start; }
.footer__contact li b { color: var(--text); font-weight: 600; }
.footer__legal { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid var(--border); }
.footer__legal-txt p { color: var(--text-mute); font-size: .82rem; line-height: 1.55; }   /* A11y: sáng hơn cho đủ tương phản trên nền tối */
.footer__legal-txt b { color: var(--text); }
.bct-badge img { height: 42px; width: auto; display: block; border-radius: 4px; }
/* === 12-builder-modal.css === */
/* ============================================================
   HEADER v3 — chừa chỗ cho 2 mục mới (Xây cấu hình + Tin tức)
   ============================================================ */
.header__inner { gap: 14px; }
.search { max-width: 540px; }
.search__input { min-width: 0; }          /* cho input co lại → header KHÔNG xuống dòng khi đông mục */
.header__actions { gap: 2px; }
.hdr-act { padding: 7px 8px; gap: 7px; }
.hdr-act .ic { width: 21px; height: 21px; }
.hdr-act__txt strong { font-size: .84rem; }
.hdr-act__txt small { font-size: .68rem; }
.hdr-act--build .ic { color: var(--gold); }
.hdr-act--build:hover { background: rgba(232,180,58,.09); }
.catbar__menu a.is-build { color: var(--gold); font-weight: 700; }
/* ============================================================
   XÂY DỰNG CẤU HÌNH (builder)
   ============================================================ */
.builder { display: grid; grid-template-columns: 1fr 360px; gap: 22px; align-items: start; }
.build-slots { display: flex; flex-direction: column; gap: 12px; }
.build-row { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 16px; transition: border-color .2s, box-shadow .2s; }
.build-row.is-empty { border-style: dashed; border-color: var(--border-2); }
.build-row.is-filled { border-left: 3px solid var(--gold); }
.build-row:hover { border-color: rgba(232,180,58,.5); box-shadow: 0 0 22px rgba(232,180,58,.07); }
.build-row__ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--gold); }
.build-row__ic .ic { width: 26px; height: 26px; }
.build-row__fig { width: 50px; height: 50px; background: linear-gradient(160deg,#f4f4f5,#dadade); border-radius: var(--radius-sm); display: grid; place-items: center; overflow: hidden; }
.build-row__fig img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.build-row__fig .ficon { color: #8a8a92; }
.build-row__fig .ficon .ic { width: 60%; height: 60%; }
.build-row__info { min-width: 0; }
.build-row__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; color: var(--gold); font-weight: 700; font-style: italic; }
.build-row__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .92rem; font-weight: 500; line-height: 1.4; margin-top: 2px; }
.build-row__name:hover { color: var(--gold); }
.build-row__note { font-size: .8rem; color: var(--text-dim); margin-top: 2px; }
.build-row__r { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.build-row__price { font-family: var(--ff-head); font-weight: 600; color: var(--gold); font-size: 1.05rem; white-space: nowrap; text-shadow: 0 0 14px rgba(232,180,58,.35); text-align: right; }
.build-row__price small { display: block; font-family: var(--ff-body); font-weight: 500; color: var(--text-mute); font-size: .72rem; text-shadow: none; margin-top: 1px; }
.build-row__price--contact { color: var(--text-mute); font-size: .92rem; text-shadow: none; }
/* Ô số lượng (− n +) cho từng linh kiện */
.build-qty { display: inline-flex; align-items: center; margin-top: 8px; border: 1px solid var(--border-2); border-radius: 8px; overflow: hidden; width: max-content; background: var(--surface-2); }
.build-qty__btn { width: 30px; height: 30px; display: grid; place-items: center; color: var(--gold); font-size: 1.1rem; font-weight: 700; line-height: 1; transition: background .15s; }
.build-qty__btn:hover { background: rgba(232,180,58,.14); }
.build-qty__in { width: 42px; height: 30px; text-align: center; background: transparent; border: none; border-left: 1px solid var(--border-2); border-right: 1px solid var(--border-2); color: var(--text); font-size: .9rem; font-weight: 600; -moz-appearance: textfield; }
.build-qty__in::-webkit-outer-spin-button, .build-qty__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.build-qty__in:focus { outline: none; background: rgba(232,180,58,.08); }
/* Cảnh báo tương thích trên dòng linh kiện */
.build-row.is-bad { border-left-color: var(--red); }
.build-row__warn { margin-top: 4px; font-size: .78rem; color: #ff9a9a; font-weight: 600; line-height: 1.4; }
.build-row__act { display: flex; align-items: center; gap: 8px; }
.build-pick { display: inline-flex; align-items: center; gap: 6px; background: var(--gold-grad); color: #1a1303; font-weight: 700; font-style: italic; text-transform: uppercase; font-size: .82rem; padding: 9px 16px; border-radius: 4px; transition: filter .2s; white-space: nowrap; }
.build-pick:hover { filter: brightness(1.07); }
.build-chg { font-size: .82rem; font-weight: 600; color: var(--text-mute); padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border-2); transition: color .2s, border-color .2s; }
.build-chg:hover { color: var(--gold); border-color: var(--gold); }
.build-rm { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); color: var(--text-mute); font-size: .85rem; flex-shrink: 0; transition: all .2s; }
.build-rm:hover { background: var(--red); color: #fff; }
/* Tóm tắt cấu hình (cột phải, dính) */
.build-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; position: sticky; top: 96px; }
.build-summary h3 { font-family: var(--ff-head); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; font-size: 1.15rem; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.build-summary__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: .92rem; color: var(--text-mute); }
.build-summary__row b { color: var(--text); }
.build-summary__total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 1.05rem; }
.build-summary__total b { font-family: var(--ff-head); font-weight: 700; color: var(--gold); font-size: 1.7rem; text-shadow: 0 0 18px rgba(232,180,58,.4); }
.build-summary__warn { background: rgba(255,46,46,.08); border: 1px solid rgba(255,46,46,.4); color: #ff9a9a; padding: 10px 14px; border-radius: var(--radius-sm); font-size: .84rem; margin-bottom: 14px; line-height: 1.55; }
.build-summary__compat ul { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.build-summary__compat li { position: relative; padding-left: 14px; font-size: .82rem; }
.build-summary__compat li::before { content: "•"; position: absolute; left: 2px; color: var(--red); }
.build-summary__compat li b { color: #ffd0d0; font-weight: 700; }
.build-summary__compat-tip { display: block; margin-top: 8px; color: var(--text-mute); font-size: .78rem; font-style: italic; }
.build-summary__note { background: rgba(232,180,58,.07); border-left: 3px solid var(--gold); color: var(--text-mute); padding: 9px 12px; border-radius: var(--radius-sm); font-size: .82rem; margin-bottom: 14px; line-height: 1.5; }
.build-summary__btns { display: flex; flex-direction: column; gap: 10px; }
.build-consult { display: flex; gap: 10px; }
.build-consult .btn-ghost { flex: 1; padding: 10px 8px; }
.build-summary__clear { display: block; text-align: center; color: var(--text-mute); font-size: .84rem; font-weight: 600; margin-top: 12px; transition: color .2s; }
.build-summary__clear:hover { color: var(--red); }
.build-summary__hint { font-size: .78rem; color: var(--text-dim); margin-top: 14px; line-height: 1.5; text-align: center; }
/* ============================================================
   MODAL — popup chọn linh kiện (tái dùng cho mọi trang)
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 300; display: none; }
.modal.is-open { display: block; }
.modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.66); backdrop-filter: blur(3px); }
.modal__panel { position: relative; z-index: 1; width: min(660px, 94vw); max-height: 86vh; margin: 6vh auto 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border-2); border-top: 2px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; animation: modalIn .25s var(--ease); }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--border); }
.modal__title { font-family: var(--ff-head); font-style: italic; text-transform: uppercase; letter-spacing: .5px; font-size: 1.1rem; }
.modal__title small { display: block; font-family: var(--ff-body); font-style: normal; text-transform: none; letter-spacing: 0; font-size: .78rem; color: var(--text-mute); font-weight: 400; margin-top: 3px; }
.modal__close { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--text-mute); font-size: 1.15rem; flex-shrink: 0; transition: all .2s; }
.modal__close:hover { background: var(--red); color: #fff; }
.modal__search { padding: 12px 20px; border-bottom: 1px solid var(--border); }
.modal__search input { width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 11px 14px; font-size: .92rem; }
.modal__search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,180,58,.1); }
.modal__search input::placeholder { color: var(--text-dim); }
.modal__body { overflow-y: auto; padding: 8px 12px 14px; }
/* ④ Bộ lọc thuộc tính trong popup chọn linh kiện */
.modal__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 11px 20px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.modal__filters[hidden] { display: none; }
.pick-fl { background: var(--surface); border: 1px solid var(--border-2); color: var(--text); border-radius: 8px; padding: 7px 10px; font-size: .82rem; max-width: 180px; cursor: pointer; }
.pick-fl:focus { outline: none; border-color: var(--gold); }
/* Ô Sắp xếp (giá ↑/↓ · xem nhiều) — nhấn vàng để nổi bật, luôn hiện */
.pick-sort { background: var(--surface); border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; padding: 7px 10px; font-size: .82rem; font-weight: 700; max-width: 200px; cursor: pointer; }
.pick-sort:focus { outline: none; box-shadow: 0 0 0 3px rgba(232,180,58,.12); }
.pick-sort option { background: var(--surface); color: var(--text); font-weight: 500; }
.pick-compat { display: inline-flex; align-items: center; gap: 6px; background: rgba(232,180,58,.1); border: 1px solid rgba(232,180,58,.45); color: var(--gold); border-radius: 999px; padding: 6px 12px; font-size: .8rem; font-weight: 700; cursor: pointer; user-select: none; }
.pick-compat input { accent-color: var(--gold); cursor: pointer; }
.pick-fl-reset { font-size: .78rem; color: var(--text-mute); padding: 6px 8px; border-radius: 6px; text-decoration: underline; }
.pick-fl-reset:hover { color: var(--gold); }
.pick-count { margin-left: auto; font-size: .76rem; color: var(--text-dim); white-space: nowrap; }
.pick-row__warn { display: inline-block; margin-left: 6px; font-size: .72rem; font-weight: 700; color: #ff9a9a; background: rgba(255,46,46,.1); border: 1px solid rgba(255,46,46,.35); border-radius: 5px; padding: 1px 6px; }
.pick-row.is-bad { opacity: .82; }
.pick-row.is-bad .pick-row__fig { filter: grayscale(.35); }
.pick-row { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-sm); border-bottom: 1px solid var(--border); }
.pick-row:last-child { border-bottom: none; }
.pick-row:hover { background: var(--surface-2); }
.pick-row__fig { width: 48px; height: 48px; background: linear-gradient(160deg,#f4f4f5,#dadade); border-radius: 6px; display: grid; place-items: center; overflow: hidden; }
.pick-row__fig img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.pick-row__fig .ficon { color: #8a8a92; }
.pick-row__fig .ficon .ic { width: 58%; height: 58%; }
.pick-row__info { min-width: 0; }
.pick-row__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .88rem; line-height: 1.4; }
.pick-row__brand { font-size: .76rem; color: var(--text-mute); margin-top: 2px; }
.pick-row__r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pick-row__price { font-family: var(--ff-head); font-weight: 600; color: var(--gold); font-size: 1rem; white-space: nowrap; }
.pick-row__price--contact { color: var(--text-mute); font-size: .85rem; }
.pick-choose { font-size: .8rem; font-weight: 700; padding: 7px 14px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); white-space: nowrap; transition: all .2s; }
.pick-choose:hover { background: var(--gold-grad); color: #1a1303; border-color: transparent; }
.pick-loading, .pick-empty { text-align: center; color: var(--text-mute); padding: 42px 20px; font-size: .92rem; }
.pick-empty span { font-size: 2.2rem; display: block; margin-bottom: 8px; }
/* Responsive builder */
@media (max-width: 860px) {
  .builder { grid-template-columns: 1fr; }
  .build-summary { position: static; }
  .modal__filters { padding: 10px 14px; }
}
@media (max-width: 560px) {
  /* Modal lọc: select co giãn 2 cột cho dễ bấm trên điện thoại */
  .pick-fl { flex: 1 1 calc(50% - 8px); max-width: none; }
  .pick-sort { flex: 1 1 100%; max-width: none; }   /* Sắp xếp 1 hàng riêng cho dễ thấy */
  .pick-compat { flex: 1 1 100%; justify-content: center; }
  .pick-count { width: 100%; margin-left: 0; text-align: right; }
}
@media (max-width: 460px) {
  .build-row { padding: 12px; gap: 11px; grid-template-columns: 46px 1fr auto; }
  .build-pick { padding: 9px 12px; }
  .build-row__r { gap: 6px; }
  .build-row__price { font-size: .96rem; }
  .build-qty__in { width: 38px; }
  .modal__filters { padding: 9px 12px; gap: 7px; }
  .pick-row { grid-template-columns: 42px 1fr auto; gap: 10px; padding: 9px 6px; }
}
/* === 14-lead-popup.css === */
/* ANH PHÁT COMPUTER - Gaming Lead Popup CSS
   (biến --ap-* SCOPE vào .ap-lead-backdrop để KHÔNG đè màu của widget hỗ trợ part 13) */
.ap-lead-backdrop{
  --ap-bg:#08090d;
  --ap-panel:rgba(12,13,19,.96);
  --ap-gold:#f7c537;
  --ap-gold-2:#ffe891;
  --ap-gold-3:#b87908;
  --ap-text:#f7f1dc;
  --ap-muted:#b8b4aa;
  --ap-radius:18px;
  --ap-font:Inter,"Roboto","Segoe UI",Arial,sans-serif;
  position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;
  padding:18px;background:radial-gradient(circle at 50% 20%,rgba(247,197,55,.18),transparent 34%),
  radial-gradient(circle at 20% 80%,rgba(255,202,64,.10),transparent 32%),rgba(0,0,0,.62);
  font-family:var(--ap-font);
}
.ap-lead-backdrop.is-open{display:flex;animation:apBackdropIn .25s ease both}
.ap-lead-modal{
  position:relative;width:min(420px,100%);color:var(--ap-text);padding:26px 22px 22px;border-radius:var(--ap-radius);
  border:1px solid rgba(247,197,55,.78);
  background:linear-gradient(135deg,rgba(255,210,76,.08),transparent 24%),
  linear-gradient(315deg,rgba(255,210,76,.07),transparent 28%),
  radial-gradient(circle at 16% 10%,rgba(247,197,55,.12),transparent 26%),var(--ap-panel);
  box-shadow:0 24px 70px rgba(0,0,0,.62),0 0 0 1px rgba(255,238,161,.08) inset,0 0 38px rgba(247,197,55,.22);
  overflow:hidden;isolation:isolate;transform:translateY(8px) scale(.98);
  animation:apModalIn .35s cubic-bezier(.18,.86,.22,1.08) forwards;
}
.ap-lead-modal:before{
  content:"";position:absolute;inset:8px;z-index:-1;border-radius:calc(var(--ap-radius) - 6px);
  background:linear-gradient(90deg,transparent 0 9%,rgba(247,197,55,.55) 9% 18%,transparent 18% 100%) top left/100% 1px no-repeat,
  linear-gradient(90deg,transparent 0 72%,rgba(247,197,55,.48) 72% 88%,transparent 88% 100%) bottom left/100% 1px no-repeat,
  linear-gradient(180deg,transparent 0 20%,rgba(247,197,55,.45) 20% 36%,transparent 36% 100%) left top/1px 100% no-repeat,
  linear-gradient(180deg,transparent 0 54%,rgba(247,197,55,.42) 54% 74%,transparent 74% 100%) right top/1px 100% no-repeat;
  pointer-events:none;opacity:.9;
}
.ap-lead-modal:after{
  content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:28px 28px;mask-image:radial-gradient(circle at center,#000 0 62%,transparent 100%);opacity:.45;pointer-events:none;
}
.ap-lead-scan{
  position:absolute;left:18px;right:18px;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--ap-gold-2),transparent);
  filter:drop-shadow(0 0 8px var(--ap-gold));animation:apScan 2.8s ease-in-out infinite;opacity:.95;
}
.ap-lead-head{display:grid;grid-template-columns:46px 1fr 28px;gap:12px;align-items:start;margin-bottom:13px}
.ap-lead-gift{
  width:44px;height:44px;display:grid;place-items:center;border-radius:14px;color:#17110a;font-size:22px;
  background:radial-gradient(circle at 35% 20%,#fff5b5,transparent 34%),linear-gradient(135deg,#ffda56,#b77706);
  box-shadow:0 0 18px rgba(247,197,55,.40),0 0 0 1px rgba(255,238,161,.6) inset;
  animation:apFloatGift 2.6s ease-in-out infinite;
}
.ap-lead-title{
  margin:0;font-size:clamp(21px,5.4vw,30px);line-height:1.05;letter-spacing:-.03em;font-weight:900;
  color:var(--ap-gold-2);text-shadow:0 1px 0 #734b08,0 0 16px rgba(247,197,55,.35);
}
.ap-lead-close{
  appearance:none;border:0;width:28px;height:28px;border-radius:9px;cursor:pointer;color:rgba(255,242,190,.78);
  background:rgba(255,255,255,.04);box-shadow:0 0 0 1px rgba(247,197,55,.25) inset;font-size:20px;line-height:1;
  transition:transform .18s ease,color .18s ease,box-shadow .18s ease,background .18s ease;
}
.ap-lead-close:hover{
  transform:rotate(90deg) scale(1.05);color:var(--ap-gold-2);background:rgba(247,197,55,.12);
  box-shadow:0 0 0 1px rgba(247,197,55,.68) inset,0 0 12px rgba(247,197,55,.28);
}
.ap-lead-desc{grid-column:1/-1;margin:2px 0 0;color:var(--ap-text);font-size:14.8px;line-height:1.45}
.ap-lead-desc strong{color:var(--ap-gold-2);font-weight:800}
.ap-lead-form{display:grid;gap:11px;margin-top:15px}
.ap-input-wrap{
  position:relative;display:flex;align-items:center;min-height:52px;border-radius:12px;border:1px solid rgba(255,238,161,.18);
  background:linear-gradient(135deg,rgba(247,197,55,.055),transparent 30%),rgba(3,4,8,.78);
  box-shadow:0 0 0 1px rgba(255,255,255,.025) inset,0 9px 20px rgba(0,0,0,.18);
  overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.ap-input-wrap:before{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(247,197,55,.16),transparent);
  transform:translateX(-120%);opacity:0;transition:opacity .18s ease;
}
.ap-input-wrap:focus-within{
  transform:translateY(-1px);border-color:rgba(247,197,55,.9);
  box-shadow:0 0 0 1px rgba(247,197,55,.38) inset,0 0 18px rgba(247,197,55,.18),0 9px 22px rgba(0,0,0,.28);
}
.ap-input-wrap:focus-within:before{opacity:1;animation:apFieldSweep 1.1s ease}
.ap-input-icon{
  width:48px;flex:0 0 48px;display:grid;place-items:center;color:var(--ap-gold);font-size:19px;
  filter:drop-shadow(0 0 8px rgba(247,197,55,.28));
}
.ap-input-wrap input{
  width:100%;min-width:0;border:0;outline:0;color:var(--ap-text);background:transparent;padding:15px 14px 15px 0;
  font:600 15.5px/1.2 var(--ap-font);position:relative;z-index:1;
}
.ap-input-wrap input::placeholder{color:rgba(216,213,203,.52);font-weight:500}
.ap-lead-submit{
  position:relative;appearance:none;border:0;min-height:52px;margin-top:10px;border-radius:13px;cursor:pointer;overflow:hidden;
  color:#151006;font:900 16px/1 var(--ap-font);letter-spacing:-.01em;
  background:linear-gradient(180deg,#fff0a7 0%,#ffd04a 42%,#d89508 100%);
  box-shadow:0 0 0 1px rgba(255,246,191,.65) inset,0 9px 0 rgba(103,62,0,.48),0 0 22px rgba(247,197,55,.34);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.ap-lead-submit:before{
  content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 0 33%,rgba(255,255,255,.66) 45%,transparent 58% 100%);
  transform:translateX(-110%);animation:apButtonShine 2.8s ease-in-out infinite;
}
.ap-lead-submit:hover{
  transform:translateY(-2px);filter:saturate(1.12) brightness(1.05);
  box-shadow:0 0 0 1px rgba(255,246,191,.78) inset,0 11px 0 rgba(103,62,0,.42),0 0 30px rgba(247,197,55,.52);
}
.ap-lead-submit:active{transform:translateY(3px);box-shadow:0 0 0 1px rgba(255,246,191,.78) inset,0 4px 0 rgba(103,62,0,.52),0 0 16px rgba(247,197,55,.32)}
.ap-lead-consent{margin:16px 0 0;color:rgba(247,241,220,.82);font-size:13px;line-height:1.45}
.ap-lead-consent a{color:var(--ap-gold-2);font-weight:800;text-decoration:underline;text-underline-offset:3px;text-shadow:0 0 10px rgba(247,197,55,.24)}
.ap-spark{
  position:absolute;width:3px;height:3px;border-radius:999px;background:var(--ap-gold-2);box-shadow:0 0 12px var(--ap-gold);
  pointer-events:none;opacity:0;animation:apSpark 3s ease-in-out infinite;
}
.ap-spark.s1{left:9%;top:14%;animation-delay:.1s}.ap-spark.s2{right:10%;top:30%;animation-delay:.8s}.ap-spark.s3{left:20%;bottom:16%;animation-delay:1.5s}
@keyframes apBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes apModalIn{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes apScan{0%,100%{opacity:.35;transform:translateX(-12%) scaleX(.7)}50%{opacity:1;transform:translateX(12%) scaleX(1)}}
@keyframes apFloatGift{0%,100%{transform:translateY(0);filter:drop-shadow(0 0 7px rgba(247,197,55,.35))}50%{transform:translateY(-3px);filter:drop-shadow(0 0 14px rgba(247,197,55,.55))}}
@keyframes apFieldSweep{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@keyframes apButtonShine{0%,42%{transform:translateX(-115%)}64%,100%{transform:translateX(120%)}}
@keyframes apSpark{0%,100%{opacity:0;transform:translateY(0) scale(.6)}45%{opacity:.9;transform:translateY(-8px) scale(1)}}
@media(max-width:430px){
  .ap-lead-backdrop{padding:10px;align-items:flex-end}
  .ap-lead-modal{width:100%;padding:22px 18px 20px;border-radius:17px 17px 14px 14px}
  .ap-lead-head{grid-template-columns:40px 1fr 28px;gap:10px}
  .ap-lead-gift{width:38px;height:38px;font-size:19px;border-radius:12px}
  .ap-lead-desc{font-size:14px}.ap-input-wrap{min-height:50px}.ap-input-icon{width:43px;flex-basis:43px}.ap-lead-submit{min-height:50px}
}
@media(prefers-reduced-motion:reduce){
  .ap-lead-backdrop,.ap-lead-modal,.ap-lead-scan,.ap-lead-gift,.ap-lead-submit:before,.ap-spark{animation:none!important}
  .ap-lead-submit,.ap-input-wrap,.ap-lead-close{transition:none!important}
  .ap-uudai-btn{animation:none!important}
}
/* ============================================================
   NÚT 🎁 ƯU ĐÃI — mở popup. Góc TRÁI-DƯỚI (xếp trên nút Gọi/Lên-đầu).
   z-index cao hơn backdrop để khi popup mở, BẤM LẦN NỮA vẫn đóng được.
   ============================================================ */
.ap-uudai-btn{
  position:fixed; left:20px; bottom:150px; z-index:100000;
  display:inline-flex; align-items:center; gap:7px; padding:0 15px 0 12px; height:46px;
  border-radius:999px; cursor:pointer; font-family:inherit; font-weight:800; font-size:14px; color:#ffe891;
  border:1px solid rgba(247,197,55,.82);
  background:radial-gradient(circle at 30% 20%,rgba(255,231,145,.18),transparent 40%),linear-gradient(145deg,#1a1206,#0a0a0a);
  box-shadow:0 10px 26px rgba(0,0,0,.42),0 0 18px rgba(247,197,55,.26);
  animation:apUudaiPulse 2.6s ease-in-out infinite;
}
.ap-uudai-btn .ap-uudai-ic{font-size:19px;line-height:1}
.ap-uudai-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
@keyframes apUudaiPulse{0%,100%{box-shadow:0 10px 26px rgba(0,0,0,.42),0 0 14px rgba(247,197,55,.2)}50%{box-shadow:0 10px 26px rgba(0,0,0,.42),0 0 28px rgba(247,197,55,.52)}}
@media (max-width: 900px){
  /* nâng trên thanh điều hướng đáy, xếp trên nút Lên-đầu (≈80px) */
  .ap-uudai-btn{ left:12px; bottom:calc(140px + env(safe-area-inset-bottom)); height:42px; font-size:13px; padding:0 13px 0 10px; }
}
@media (prefers-reduced-motion: reduce){ .ap-uudai-btn{ animation:none!important } }
/* === 16-premium-widget.css === */
/*
  AP PREMIUM CONTACT WIDGET - Anh Phát Computer
  Bộ nút hỗ trợ/gọi ngay style luxury gaming đen vàng.
  Sửa số điện thoại trong index.html: href="tel:0902298069"
*/
:root {
  --apx-gold: #ffd76b;
  --apx-gold-2: #e7a91a;
  --apx-gold-3: #8f5f09;
  --apx-black: #050505;
  --apx-card: rgba(11, 11, 11, .78);
  --apx-stroke: rgba(255, 214, 107, .28);
  --apx-text: #ffe8aa;
  --apx-muted: rgba(255, 238, 192, .66);
  --apx-radius: 22px;
}
.apx-widget,
.apx-widget * {
  box-sizing: border-box;
}
.apx-widget {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 9990;                /* dưới popup ưu đãi (99999) để popup nổi lên trên */
  width: 318px;
  height: 420px;
  font-family: inherit;         /* dùng font site (Be Vietnam Pro) thay Arial */
  pointer-events: none;
  color: var(--apx-text);
}
.apx-widget a,
.apx-widget button {
  -webkit-tap-highlight-color: transparent;
}
/* Trigger button */
.apx-toggle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 206px;
  height: 58px;
  border: 0;
  padding: 0 20px 0 64px;
  border-radius: 999px;
  cursor: pointer;
  pointer-events: auto;
  color: var(--apx-text);
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 42%),
    radial-gradient(circle at 90% 0%, rgba(255, 219, 117, .20), transparent 40%),
    linear-gradient(135deg, rgba(22, 18, 10, .96), rgba(4, 4, 4, .96));
  box-shadow:
    0 20px 40px rgba(0, 0, 0, .52),
    0 0 0 1px rgba(255, 214, 107, .34),
    0 0 28px rgba(238, 171, 31, .32),
    inset 0 1px rgba(255, 255, 255, .12),
    inset 0 -12px 22px rgba(0, 0, 0, .48);
  transition: transform .25s ease, filter .25s ease;
  overflow: visible;
}
.apx-toggle:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}
.apx-toggle-glow,
.apx-toggle::before,
.apx-toggle::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}
.apx-toggle::before {
  inset: -1px;
  padding: 1px;
  background: linear-gradient(135deg, #fff2a7, #d69a16 42%, #5d3c05 64%, #ffe28b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
}
.apx-toggle::after {
  inset: -7px;
  border: 1px solid rgba(255, 214, 107, .36);
  opacity: 0;
  animation: apxPulseRing 2.3s ease-out infinite;
}
.apx-toggle-glow {
  inset: 9px 12px auto auto;
  width: 8px;
  height: 8px;
  background: #55ff9e;
  box-shadow: 0 0 12px #55ff9e, 0 0 28px rgba(85,255,158,.55);
  z-index: 5;
}
.apx-toggle-content {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 2px;
  text-align: left;
}
.apx-toggle-content strong {
  font-size: 15px;
  line-height: 1;
  letter-spacing: .1px;
  color: #ffe39a;
  text-shadow: 0 0 10px rgba(255, 213, 107, .48);
}
.apx-toggle-content small {
  font-size: 10px;
  line-height: 1;
  color: rgba(255, 239, 198, .68);
  font-weight: 700;
}
.apx-toggle-mascot {
  position: absolute;
  left: -24px;
  bottom: -3px;
  width: 92px;
  height: 92px;
  z-index: 4;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(255, 205, 72, .42));
  transform-origin: 50% 100%;
  animation: apxMascotFloat 4.8s ease-in-out infinite;
}
.apx-toggle-mascot::before {
  content: "";
  position: absolute;
  inset: 24px 10px 0 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 209, 83, .34), transparent 62%);
  filter: blur(8px);
  z-index: -1;
}
.apx-toggle-mascot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.apx-mascot-arm {
  transform-origin: 25.5% 66%;
  animation: apxWave 4.8s ease-in-out infinite;
}
/* Panel */
.apx-panel {
  position: absolute;
  right: 0;
  bottom: 78px;
  width: 318px;
  padding: 16px;
  border-radius: 28px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(18px) scale(.94);
  transform-origin: 80% 100%;
  visibility: hidden;
  transition:
    opacity .32s cubic-bezier(.2,.8,.2,1),
    transform .32s cubic-bezier(.2,.8,.2,1),
    visibility .32s;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 22%, transparent),
    radial-gradient(circle at 12% 4%, rgba(255, 219, 117, .18), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(255, 171, 31, .14), transparent 40%),
    rgba(5, 5, 5, .82);
  border: 1px solid rgba(255, 214, 107, .28);
  box-shadow:
    0 26px 68px rgba(0, 0, 0, .66),
    0 0 48px rgba(202, 141, 16, .17),
    inset 0 1px rgba(255,255,255,.10),
    inset 0 -20px 48px rgba(0,0,0,.38);
  backdrop-filter: blur(18px) saturate(1.12);
  overflow: hidden;
}
.apx-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 241, 176, .65), rgba(255, 214, 107, .12) 38%, rgba(255, 214, 107, .34) 72%, rgba(255, 241, 176, .24));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.apx-panel::after {
  content: "";
  position: absolute;
  top: -52%;
  left: -80%;
  width: 72%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
  transform: rotate(19deg);
  animation: apxPanelShine 6.5s ease-in-out infinite;
  pointer-events: none;
}
.apx-widget.apx-open .apx-panel,
.apx-widget:not(.apx-has-js) .apx-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
}
/* Mở bằng RÊ CHUỘT chỉ trên máy CÓ chuột (desktop). Mobile KHÔNG hover → tránh kẹt mở. */
@media (hover: hover) and (pointer: fine) {
  .apx-widget:hover .apx-panel { opacity: 1; transform: translateY(0) scale(1); visibility: visible; }
}
.apx-panel-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
}
.apx-avatar {
  position: relative;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 215, 95, .22), transparent 48%),
    linear-gradient(135deg, rgba(255, 215, 95, .18), rgba(0,0,0,.88));
  box-shadow:
    inset 0 1px rgba(255,255,255,.12),
    0 0 0 1px rgba(255,214,107,.26),
    0 12px 24px rgba(0,0,0,.36);
  overflow: hidden;
}
.apx-avatar img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  transform: translateY(7px);
  filter: drop-shadow(0 0 8px rgba(255, 211, 80, .42));
}
.apx-avatar i {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #54ff9b;
  box-shadow: 0 0 0 3px rgba(5,5,5,.84), 0 0 10px #54ff9b;
}
.apx-title {
  min-width: 0;
}
.apx-title strong {
  display: block;
  margin-bottom: 5px;
  color: #ffe39a;
  font-size: 16px;
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -.15px;
  text-shadow: 0 0 16px rgba(255, 206, 74, .28);
}
.apx-title span {
  display: block;
  color: rgba(255, 238, 192, .72);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
}
.apx-divider {
  position: relative;
  z-index: 2;
  height: 1px;
  margin: 14px 0 12px;
  background: linear-gradient(90deg, transparent, rgba(255,214,107,.42), transparent);
}
.apx-actions {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
}
.apx-action {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr 22px;
  align-items: center;
  min-height: 66px;
  padding: 9px 10px 9px 8px;
  color: var(--apx-text);
  text-decoration: none;
  border-radius: 20px;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    linear-gradient(135deg, rgba(19, 18, 16, .88), rgba(4,4,4,.72));
  box-shadow:
    0 0 0 1px rgba(255, 214, 107, .18),
    inset 0 1px rgba(255,255,255,.07),
    0 14px 28px rgba(0,0,0,.26);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.apx-action::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 50%, rgba(255, 215, 95, .18), transparent 28%),
    linear-gradient(90deg, rgba(255, 218, 110, .10), transparent 46%);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
  z-index: -1;
}
.apx-action:hover {
  transform: translateY(-2px) translateX(-2px);
  box-shadow:
    0 0 0 1px rgba(255, 214, 107, .42),
    0 0 28px rgba(255, 201, 72, .20),
    inset 0 1px rgba(255,255,255,.11),
    0 18px 32px rgba(0,0,0,.34);
}
.apx-action:hover::before {
  opacity: 1;
}
.apx-action-icon {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  color: #ffde7b;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.22), transparent 18%),
    radial-gradient(circle at 50% 110%, rgba(255, 195, 43, .32), transparent 52%),
    linear-gradient(135deg, rgba(255, 216, 102, .18), rgba(14, 11, 6, .98));
  border: 1px solid rgba(255, 214, 107, .38);
  box-shadow:
    inset 0 1px rgba(255,255,255,.18),
    inset 0 -10px 14px rgba(0,0,0,.38),
    0 0 18px rgba(255, 198, 52, .18);
}
.apx-action-icon::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 20px;
  border: 1px solid rgba(255, 214, 107, .16);
}
.apx-action-icon svg {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 0 6px rgba(255, 215, 107, .42));
}
/* "Nhắn tin cho Anh Phát" = nút ƯU TIÊN → icon VÀNG SÁNG + card viền/glow đậm hơn (nổi hơn nút gọi) */
.apx-action-chat {
  box-shadow:
    0 0 0 1px rgba(255, 214, 107, .5),
    0 0 26px rgba(255, 201, 72, .28),
    inset 0 1px rgba(255,255,255,.1),
    0 16px 30px rgba(0,0,0,.3);
}
.apx-action-chat .apx-action-icon {
  color: #111;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.78), transparent 19%),
    linear-gradient(135deg, #fff0a7, #f2b729 52%, #99660a);
  box-shadow:
    inset 0 1px rgba(255,255,255,.44),
    inset 0 -10px 16px rgba(97, 55, 0, .32),
    0 0 22px rgba(255, 205, 69, .38);
}
/* Nút Gọi: icon glass tiêu chuẩn (thứ yếu so với Nhắn tin), vẫn rung nhẹ */
.apx-action-call .apx-action-icon svg {
  animation: apxIconRing 1.8s ease-in-out infinite;
}
.apx-action-text {
  min-width: 0;
  padding-left: 1px;
}
.apx-action-text strong {
  display: block;
  margin-bottom: 4px;
  color: #ffd76b;
  font-size: 14px;
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -.15px;
  text-shadow: 0 0 8px rgba(255, 205, 74, .28);
}
.apx-action-text small {
  display: block;
  color: rgba(255, 238, 192, .66);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apx-action-arrow {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #ffdd7a;
  background: rgba(255, 214, 107, .08);
  border: 1px solid rgba(255, 214, 107, .18);
  font-size: 23px;
  line-height: 1;
  transition: transform .22s ease, background .22s ease;
}
.apx-action:hover .apx-action-arrow {
  transform: translateX(3px);
  background: rgba(255, 214, 107, .16);
}
.apx-panel-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 214, 107, .055);
  border: 1px solid rgba(255, 214, 107, .12);
  color: rgba(255, 238, 192, .64);
  font-size: 11px;
  font-weight: 750;
}
.apx-live-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #55ff9e;
  box-shadow: 0 0 12px #55ff9e;
}
.apx-close {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 6;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 214, 107, .34);
  background: rgba(5,5,5,.56);
  color: #ffe39a;
  cursor: pointer;
  pointer-events: auto;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 14px rgba(255, 214, 107, .12);
}
.apx-close span {
  position: absolute;
  width: 12px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
}
.apx-close span:first-child { transform: rotate(45deg); }
.apx-close span:last-child { transform: rotate(-45deg); }
.apx-close:hover {
  background: rgba(255, 214, 107, .12);
}
.apx-widget.apx-hidden {
  display: none;
}
@keyframes apxMascotFloat {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50% { transform: translateY(-4px) rotate(-1.2deg) scale(1.015); }
}
@keyframes apxWave {
  0%, 24%, 76%, 100% { transform: rotate(0deg); }
  32% { transform: rotate(15deg); }
  38% { transform: rotate(-13deg); }
  44% { transform: rotate(17deg); }
  50% { transform: rotate(-9deg); }
  56% { transform: rotate(10deg); }
  62% { transform: rotate(0deg); }
}
@keyframes apxPulseRing {
  0% { opacity: .65; transform: scale(.96); }
  100% { opacity: 0; transform: scale(1.24); }
}
@keyframes apxPanelShine {
  0%, 43% { transform: translateX(-60%) rotate(19deg); }
  64%, 100% { transform: translateX(320%) rotate(19deg); }
}
@keyframes apxIconRing {
  0%, 68%, 100% { transform: rotate(0deg) scale(1); }
  73% { transform: rotate(-10deg) scale(1.05); }
  78% { transform: rotate(11deg) scale(1.05); }
  83% { transform: rotate(-7deg) scale(1.03); }
  88% { transform: rotate(5deg) scale(1.02); }
}
@media (max-width: 420px) {
  .apx-widget {
    right: 10px;
    bottom: 14px;
    width: calc(100vw - 20px);
    max-width: 318px;
    height: 400px;
  }
  .apx-panel {
    width: 100%;
    bottom: 74px;
    padding: 14px;
    border-radius: 24px;
  }
  .apx-toggle {
    right: 0;
    width: 196px;
    height: 56px;
  }
  .apx-toggle-mascot {
    width: 86px;
    height: 86px;
    left: -18px;
  }
  .apx-action {
    grid-template-columns: 50px 1fr 18px;
    min-height: 62px;
  }
  .apx-action-icon {
    width: 43px;
    height: 43px;
    border-radius: 16px;
  }
  .apx-action-text strong { font-size: 13px; }
  .apx-action-text small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .apx-widget *, .apx-widget *::before, .apx-widget *::after {
    animation: none !important;
    transition: none !important;
  }
}
/* ============================================================
   TÍCH HỢP vào tinhocanhphat.vn (part nạp SAU 05-responsive → override được)
   ============================================================ */
/* Nút nổi cũ (chat/gọi nhỏ) đã bỏ; ↑ Lên-đầu (chỉ hiện khi cuộn) → góc TRÁI-DƯỚI, khỏi đè widget bên phải */
.float-btn--messenger, .float-btn--phone { display: none !important; }
.float-btn--top { left: 20px; right: auto; bottom: 26px; }
/* Mobile (≤900px có thanh điều hướng đáy .botnav) → NÂNG widget + nút ↑ lên trên thanh đó */
@media (max-width: 900px) {
  .apx-widget { bottom: calc(74px + env(safe-area-inset-bottom)); }
  .float-btn--top { left: 12px; right: auto; bottom: calc(74px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  .apx-widget { right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); }
}