/* Footer web khách — phương án B (design/footer/FOOTER_SPEC.md). Khối footer DUY NHẤT: không thêm .shop-footer/footer{} ở file khác. */
:root{--fb-bg-1:#3c1e15;--fb-bg-2:#28140f;--fb-rule:#c3833f;--fb-text:#fff4df;--fb-soft:#e3bd86;--fb-dim:#c9a27a;--fb-line:rgba(233,183,106,.22);--fb-paper:#fffdf8;--fb-ink:#462318;--fb-muted:#82624e;--fb-orange:#a95127;--fb-orange-dark:#7d381e;--fb-card-line:#ebd8bd}
/* BUG-FT-01: Safari iOS tô vùng ngoài trang (kéo quá đáy, sau thanh công cụ) bằng màu nền body trộn lên nền html.
   → body nền trong suốt, giữ kem bằng background-image (chỉ phủ hộp body, không lan ra canvas) → vùng ngoài trang = nâu html.
   footer.js thêm html.fb-canvas-light khi footer chưa vào màn hình → đầu/giữa trang vẫn kem như cũ (thanh trạng thái, kéo quá đỉnh). */
html{background:var(--fb-bg-2)}
html.fb-canvas-light{background:var(--cream)}
html.fb-canvas-light:has(>body.catalog-page,>body.detail-page,>body.account-page){background:#fffaf1}
/* Safari iOS 26 lấy màu thanh công cụ từ phần tử fixed sát mép: giỏ hàng kem (đóng = chỉ đẩy ra ngoài bằng transform) làm thanh dưới vẫn kem.
   Đóng thì ẩn hẳn (visibility trễ .3s để vẫn thấy hiệu ứng trượt ra). */
.cart-panel{visibility:hidden;transition:transform .3s,visibility 0s .3s}
.cart-panel.open{visibility:visible;transition:transform .3s,visibility 0s}
.backdrop{visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.backdrop.visible{visibility:visible;transition:opacity .3s,visibility 0s}
body{background-color:transparent;background-image:linear-gradient(var(--cream),var(--cream))}
body.catalog-page,body.detail-page,body.account-page{background-color:transparent;background-image:linear-gradient(#fffaf1,#fffaf1)}

.fb{display:block;margin-top:clamp(40px,6vw,72px);padding:0;background:none;color:var(--fb-ink);font-family:'DM Sans',sans-serif;letter-spacing:-.01em}
.fb *,.fb *::before,.fb *::after{box-sizing:border-box}
.fb a{color:inherit}
.fb-visit{position:relative;z-index:1;padding:0 clamp(16px,4vw,48px)}
.fb-card{max-width:1180px;margin:0 auto -72px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);border:1px solid var(--fb-card-line);border-radius:28px;overflow:hidden;background:var(--fb-paper);box-shadow:0 18px 40px rgba(74,37,24,.10)}
.fb-copy{padding:clamp(24px,4vw,48px)}
.fb-eyebrow{margin:0 0 10px;color:var(--fb-orange);font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.fb-copy h2{margin:0;color:var(--fb-ink);font:700 clamp(28px,3.2vw,40px)/1.05 Fraunces,Georgia,serif;letter-spacing:-.03em}
.fb-facts{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:12px}
.fb-facts li{display:grid;grid-template-columns:22px 1fr;gap:10px;color:var(--fb-ink);font-size:15px;line-height:1.45}
.fb-facts svg{width:20px;height:20px;margin-top:1px;color:var(--fb-orange)}
.fb-facts small{display:block;color:var(--fb-muted);font-size:13px}
.fb-open{display:inline-flex;align-items:center;gap:6px;margin-left:6px;padding:2px 9px;border-radius:999px;background:#e7f0e1;color:#3d5a2e;font-size:12px;font-weight:800;vertical-align:1px;white-space:nowrap}
.fb-open[hidden]{display:none}
.fb-open::before{content:'';width:7px;height:7px;border-radius:50%;background:#4f8a3a}
.fb-open.is-closed{background:#f3e3d3;color:var(--fb-orange-dark)}.fb-open.is-closed::before{background:#b9512f}
.fb-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fb-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 18px;border:1px solid #bb9065;border-radius:999px;background:var(--fb-paper);color:#542819;font-size:15px;font-weight:800;text-decoration:none;white-space:nowrap;transition:background .2s}
.fb .fb-btn{color:#542819}
.fb-btn svg{width:20px;height:20px;flex:0 0 auto}
.fb .fb-btn.primary{grid-column:1/-1;border-color:var(--fb-orange);background:var(--fb-orange);color:#fff}
.fb .fb-btn.primary:hover{background:var(--fb-orange-dark)}
.fb-btn:not(.primary):hover{background:#fff3e2}
.fb a:focus-visible{outline:2px solid #d99b3d;outline-offset:2px}
.fb-map{position:relative;min-height:380px;background:#f3dfbd}
.fb-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.85) sepia(.1)}
.fb-qr{position:absolute;top:16px;right:16px;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:14px;background:rgba(255,253,248,.96);box-shadow:0 8px 20px rgba(74,37,24,.18);color:var(--fb-ink);font-size:12px;line-height:1.3}
.fb-qr img{width:64px;height:64px;border-radius:6px;background:#fff}
.fb-qr b{display:block;font-size:13px}

.fb-dark{padding:calc(72px + 40px) clamp(20px,5vw,48px) 0;border-top:4px solid var(--fb-rule);background:linear-gradient(122deg,var(--fb-bg-1),var(--fb-bg-2));color:var(--fb-text)}
.fb-grid{max-width:1180px;margin:0 auto;padding-bottom:36px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,.8fr);gap:40px}
.fb .fb-brand{display:inline-flex;align-items:center;gap:14px;color:var(--fb-text);text-decoration:none}
.fb-brand img{width:56px;height:56px;border-radius:50%;background:#4a2518;object-fit:cover}
.fb-brand strong{display:block;font:700 26px/1 Fraunces,Georgia,serif}
.fb-brand small{display:block;margin-top:6px;color:#e8bc74;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.fb-tag{max-width:340px;margin:16px 0 18px;color:var(--fb-dim);font-size:14px;line-height:1.55}
.fb-social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.fb .fb-social a{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--fb-line);border-radius:50%;background:rgba(255,250,240,.06);color:var(--fb-text);transition:background .2s,color .2s}
.fb .fb-social a:hover{background:var(--fb-text);color:var(--fb-bg-1)}
.fb-social svg{width:20px;height:20px}
.fb-social .fb-glyph{stroke:var(--fb-bg-1)}
.fb-social a:hover .fb-glyph{stroke:var(--fb-text)}
.fb-col h3{margin:0 0 12px;color:var(--fb-soft);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.fb-col ul{list-style:none;margin:0;padding:0}
.fb .fb-col a{display:flex;align-items:center;min-height:40px;color:var(--fb-text);font-size:15px;text-decoration:none}
.fb .fb-col a:hover{color:#e7b35e}
.fb-col a.hl{font-weight:800}
.fb-col a.hl::after{content:'→';margin-left:8px;color:var(--fb-soft)}
/* Thông tin doanh nghiệp + link chính sách (thông báo Bộ Công Thương, 19/10/2026) */
.fb-legal{max-width:1180px;margin:0 auto;padding:18px 0;display:grid;gap:10px;border-top:1px solid var(--fb-line);color:var(--fb-dim);font-size:12px;line-height:1.65}
.fb-policy{display:flex;flex-wrap:wrap;gap:0 20px}
.fb .fb-policy a{display:inline-flex;align-items:center;min-height:36px;color:var(--fb-text);font-size:13px;text-decoration:none}
.fb .fb-policy a:hover{color:#e7b35e}
.fb-company{margin:0}
.fb .fb-company a{color:var(--fb-dim);text-decoration:none}
.fb-bottom{max-width:1180px;margin:0 auto;padding:16px 0 calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;border-top:1px solid var(--fb-line);color:var(--fb-dim);font-size:12px}
.fb .fb-bottom a{color:var(--fb-dim);text-decoration:none}
.fb .fb-bottom a:hover{color:var(--fb-text)}

/* Tablet 640–1023 */
@media(max-width:1023px){
  .fb-card{grid-template-columns:1fr}
  .fb-map{min-height:280px}
  .fb-grid{grid-template-columns:1fr 1fr;gap:28px}
  .fb-about{grid-column:1/-1}
}
/* QR Zalo chỉ hiện ≥768px (trên điện thoại không quét được mã của chính máy mình) */
@media(max-width:767px){.fb-qr{display:none}}
/* Mobile < 640 */
@media(max-width:639px){
  .fb-visit{padding:0 12px}
  .fb-card{margin-bottom:-56px;border-radius:22px}
  .fb-copy{padding:24px 20px 20px}
  .fb-btn{min-height:50px;padding:0 12px;font-size:14px}
  .fb-map{min-height:200px}
  .fb-dark{padding-top:calc(56px + 32px)}
  .fb-grid{gap:24px 16px}
  .fb .fb-col a{min-height:44px;font-size:14px}
  .fb-policy{gap:0 16px}
  .fb .fb-policy a{min-height:44px}
  .fb-bottom{flex-direction:column}
  .fb .fb-bottom a{display:inline-flex;align-items:center;min-height:44px;margin-top:-12px}
}

/* Nút CHAT nổi: ẩn khi footer vào màn hình (footer đã có Gọi/Zalo). Không ẩn khi khung chat đang mở. */
.lunpet-chat{transition:opacity .2s,transform .2s,visibility 0s}
body.footer-in-view .lunpet-chat:not(.open){opacity:0;transform:translateY(16px);visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s,visibility 0s .2s}
/* Header dính trên mobile: trượt lên khi tới footer (footer.js chỉ bật khi header đã dính và menu mobile đang đóng) */
@media(max-width:760px){
  .header{transition:transform .25s}
  body.footer-tuck-header .header{transform:translateY(-100%)}
}
@media(prefers-reduced-motion:reduce){.lunpet-chat,.header,.fb-btn,.fb .fb-social a{transition:none!important}}

/* Tải app LÙNPET (16/10/2026): khối footer .fb-app (footer.js chèn khi cờ App Store bật) + khối trang chủ .lp-app-promo (index.html, hidden tới khi bật).
   Badge App Store: file chính thức của Apple, không đổi màu/không cắt, cao ≥40px, chừa khoảng trống quanh badge. */
.fb-app{margin-top:24px;max-width:380px;display:flex;align-items:center;gap:16px;padding:14px;border:1px solid var(--fb-line);border-radius:16px;background:rgba(255,250,240,.06)}
.fb-app-qr{flex:none;width:88px;height:88px;padding:0;border-radius:8px;background:#fff;image-rendering:pixelated}
.fb-app-copy{min-width:0}
.fb-app-copy b{display:block;color:var(--fb-text);font-size:15px}
.fb-app-copy span{display:block;margin:2px 0 10px;color:var(--fb-dim);font-size:13px;line-height:1.45}
.fb .fb-app-badge{display:inline-block;line-height:0}
.fb-app-badge img{height:40px;width:auto;display:block}
.fb .fb-app-btn{display:none;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;border-radius:12px;background:var(--fb-text);color:var(--fb-bg-1);font-weight:800;font-size:15px;text-decoration:none}
.fb-app-btn svg{width:20px;height:20px}
@media(max-width:767px){
  .fb-app{max-width:none;padding:0;border:0;background:none}
  .fb-app-qr,.fb-app-copy{display:none}
  .fb .fb-app-btn{display:flex}
}
.lp-app-promo{background:var(--lp-cream,#f8f1e6)}
.lp-app-promo-in{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:center}
.lp-app-promo-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.lp-app-promo-list li{position:relative;padding-left:28px;font-size:16px;line-height:1.5;color:var(--lp-ink-2,#4b3428)}
.lp-app-promo-list li::before{content:"";position:absolute;left:4px;top:.55em;width:12px;height:7px;border-left:2.5px solid var(--lp-ok,#2f7a45);border-bottom:2.5px solid var(--lp-ok,#2f7a45);transform:rotate(-45deg)}
.lp-app-promo-cta{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.lp-app-promo-badge{display:inline-block;padding:4px 0;line-height:0}
.lp-app-promo-badge img{height:48px;width:auto;display:block}
.lp-app-promo-btn{display:none!important}
.lp-main .lp-app-promo-more{font-weight:700;color:var(--lp-orange-d,#8a3b1b);text-decoration:none}
.lp-app-promo-qr{margin:0;justify-self:center;padding:16px;background:#fff;border:1px solid var(--lp-line,#eadfce);border-radius:18px;box-shadow:0 10px 30px rgba(42,20,13,.08);text-align:center}
.lp-app-promo-qr img{display:block;width:160px;height:160px;image-rendering:pixelated}
.lp-app-promo-qr figcaption{margin-top:8px;font-size:13px;font-weight:600;color:var(--lp-muted,#76604f)}
@media(max-width:767px){
  .lp-app-promo-qr,.lp-app-promo-badge{display:none}
  .lp-app-promo-btn{display:inline-flex!important}
}
@media(min-width:768px){.lp-app-promo-in{grid-template-columns:minmax(0,1fr) auto;gap:48px}}