/* ===== Tab cửa hàng v2 — card kể chuyện linh thú, cùng hệ màu/chữ với style.css ===== */

/* Chuyển cảnh: shop-mode = xem cửa hàng; bỏ class = trình thiết kế 3D.
   Thanh tab LUÔN hiện ở cả 2 chế độ để khách biết đường chuyển mục. */
body.shop-mode #app{display:none}
body:not(.shop-mode) #shopView,
body:not(.shop-mode) #shopCartBar{display:none}
body.immersive #shopTabs{display:none} /* trừ chế độ toàn màn hình ⛶ */
/* Trình 3D nằm dưới thanh tab sticky (~55px) -> trừ ra để không dư thanh cuộn */
body:not(.shop-mode) #panel{max-height:calc(100vh - 55px)}
@media (min-width:861px){body:not(.shop-mode) #viewport{min-height:calc(100vh - 55px)}}

/* Thanh tab trên cùng */
#shopTabs{position:sticky;top:0;z-index:44;display:flex;align-items:center;gap:10px;
  padding:10px 14px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.tabs-logo{width:34px;height:34px;flex:none}
#shopTabBtns{display:flex;gap:6px;flex:1;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#shopTabBtns::-webkit-scrollbar{display:none}
.tab-btn{flex:none;padding:9px 18px;border:none;border-radius:999px;background:transparent;
  font-family:'Baloo 2',cursive;font-weight:700;font-size:.95rem;color:var(--ink-2);cursor:pointer;
  transition:background .18s,color .18s}
.tab-btn.active{background:var(--tc,var(--ink));color:var(--tct,#fff);box-shadow:0 4px 12px -3px color-mix(in srgb,var(--tc,#000) 55%,transparent)}
.tab-btn:not(.active):hover{background:#f0ecd8;color:var(--ink)}
.tab-btn:active{transform:scale(.96)}
/* Nút giỏ hàng góc phải (luôn hiện, có badge số lượng) */
.nav-cart{position:relative;flex:none;width:44px;height:44px;border:none;border-radius:50%;background:transparent;
  color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .16s}
.nav-cart:hover{background:#f0ecd8}
.nav-cart:active{transform:scale(.94)}
.nav-cart-count{position:absolute;top:1px;right:1px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--pink);color:#fff;font-size:.68rem;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #fff}
.nav-cart-count.empty{display:none}

/* Khung nội dung */
#shopView{max-width:1080px;margin:0 auto;padding:16px 16px 120px}
.shop-head{margin:8px 2px 16px}
.shop-head h2{font-family:'Baloo 2',cursive;font-weight:800;font-size:1.85rem;line-height:1.08;color:var(--ink);
  display:inline-block;letter-spacing:-.3px}
.shop-head p{color:var(--ink-2);font-size:.88rem;margin-top:3px;max-width:52ch}
/* Dải tin cậy — icon tròn màu (kiểu Board.fun) */
.trust-row{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:14px}
.trust{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:var(--ink)}
.tr-ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.tr-ic svg{width:18px;height:18px}
.tr-green{background:#e4f7ee;color:#1f9e6f}
.tr-blue{background:#e7efff;color:var(--blue)}
.tr-orange{background:#fdeedd;color:#d97314}

/* Lưới card kể chuyện: mobile 1 cột thoáng, desktop 2-3 cột */
.p-grid{display:grid;grid-template-columns:1fr;gap:16px;max-width:480px;margin:0 auto}
@media (min-width:700px){.p-grid{grid-template-columns:1fr 1fr;max-width:none}}
@media (min-width:1024px){.p-grid{grid-template-columns:1fr 1fr 1fr}}

.p-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(21,20,15,.06);border-radius:20px;
  overflow:hidden;box-shadow:0 6px 20px -8px rgba(21,20,15,.14);
  transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s;
  animation:cardIn .45s cubic-bezier(.22,.61,.36,1) both;animation-delay:var(--d,0ms)}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.p-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px -12px rgba(21,20,15,.2)}
/* Ảnh sản phẩm là hình cắt nền (khánh dài) -> contain để KHÔNG bị cắt mất hình, nền dịu tôn sản phẩm */
.p-img{position:relative;aspect-ratio:1/1;background:radial-gradient(circle at 50% 40%,#ffffff 0%,#f3efe0 82%);
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:14px;cursor:zoom-in}
.p-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .35s ease}
.p-card:hover .p-img img{transform:scale(1.05)}
/* gợi ý bấm xem lớn */
.p-img::after{content:'⤢ Xem lớn';position:absolute;bottom:10px;right:10px;background:rgba(21,20,15,.72);color:#fff;
  font-size:.7rem;font-weight:700;padding:5px 10px;border-radius:999px;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none}
.p-card:hover .p-img::after{opacity:1;transform:translateY(0)}
.p-name{cursor:pointer}
.p-img.ph{font-size:3.4rem;background:linear-gradient(135deg,#f3efe0,#ece6d2)}
.p-body{display:flex;flex-direction:column;gap:8px;padding:13px 15px 15px;flex:1}
.p-name{font-family:'Baloo 2',cursive;font-weight:800;font-size:1.12rem;line-height:1.25;color:var(--ink)}
.p-desc{font-size:.82rem;color:#6b6558;line-height:1.55}
.p-desc.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.p-badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:5px 11px;border-radius:999px;
  background:#fdeef1;color:#c24962;font-size:.74rem;font-weight:700}

/* Nút chọn phiên bản Thường / Khắc tên — to, rõ, giá ngay trên nút */
.p-variants{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.v-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:11px 8px;cursor:pointer;
  border:1.6px solid var(--line);border-radius:13px;background:#fff;
  font-family:inherit;color:var(--ink-2);transition:border-color .16s,background .16s,color .16s}
.v-lb{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:700;line-height:1.15;white-space:nowrap}
.v-lb svg{flex:none}
.v-btn b{font-family:'Baloo 2',cursive;font-weight:800;font-size:1rem;color:var(--ink);font-variant-numeric:tabular-nums}
.v-btn.active{border-color:var(--pink);background:#fdf2f5;color:#c24962}
.v-btn.active b{color:var(--pink)}
.v-btn:not(.active):hover{border-color:#f0c8d3;background:#fffafb}
.v-btn:active{transform:scale(.97)}

/* Ô nhập tên khắc — inline trong card */
.engrave-row.hidden{display:none}
.engrave-row input{width:100%;padding:10px 13px;border:1.6px solid #f0c8d3;border-radius:12px;
  font-family:inherit;font-size:16px;outline:none;background:#fffafb}
.engrave-row input:focus{border-color:var(--pink)}
.err-shake{animation:shake .4s;border-color:#e05a5a !important}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

.p-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:4px}
.p-price{font-family:'Baloo 2',cursive;font-weight:800;font-size:1.22rem;color:var(--blue);font-variant-numeric:tabular-nums}
.p-add{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:14px;background:var(--mint);color:#fff;
  font-family:'Baloo 2',cursive;font-weight:800;font-size:.9rem;padding:11px 16px;cursor:pointer;
  box-shadow:0 4px 12px -3px rgba(50,201,146,.6);transition:transform .12s,filter .16s}
.p-add:hover{filter:brightness(1.05)}
.p-add:active{transform:scale(.96)}
.p-empty{grid-column:1/-1;text-align:center;color:var(--ink-2);font-size:.86rem;padding:36px 0}

/* Skeleton chờ tải danh mục */
.skel-card{height:320px;border-radius:20px;background:linear-gradient(100deg,#f3efe0 40%,#faf7ec 50%,#f3efe0 60%);
  background-size:200% 100%;animation:shimmer 1.2s infinite linear}
@keyframes shimmer{to{background-position:-200% 0}}

/* Dải Phụ liệu "Mua kèm" — gom card ảnh trong khung kem bo tròn (kiểu "Included with purchase") */
.addon-sec{margin-top:30px;background:var(--cream);border-radius:22px;padding:18px 16px 14px}
.addon-head{font-family:'Baloo 2',cursive;font-weight:800;font-size:1.12rem;color:var(--ink);margin-bottom:12px}
.addon-head span{font-family:'Be Vietnam Pro',sans-serif;font-weight:500;font-size:.78rem;color:var(--ink-2)}
.addon-row{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 2px 8px}
.addon-row::-webkit-scrollbar{display:none}
.addon-card{flex:none;display:flex;align-items:center;gap:10px;background:#fff;border:none;
  border-radius:15px;padding:9px 11px;min-width:200px;box-shadow:0 3px 10px -4px rgba(21,20,15,.12)}
.addon-img{width:46px;height:46px;flex:none;border-radius:10px;object-fit:cover;background:#f6f2e6;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;overflow:hidden}
.addon-img img{width:100%;height:100%;object-fit:cover}
.addon-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.addon-info b{font-size:.8rem;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addon-info span{font-size:.78rem;color:var(--pink);font-weight:700}
.addon-add{flex:none;width:34px;height:34px;border:none;border-radius:50%;background:var(--pink);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 0 #c74763}
.addon-add:active{transform:translateY(2px);box-shadow:none}

/* Hero tab Clicker — mở trình thiết kế 3D */
.design-hero{display:flex;align-items:center;gap:14px;width:100%;max-width:480px;margin:0 auto 18px;padding:18px;
  border:none;border-radius:22px;cursor:pointer;text-align:left;color:#fff;
  background:var(--purple);box-shadow:0 14px 30px -10px rgba(109,19,236,.5);transition:transform .18s,box-shadow .18s}
@media (min-width:700px){.design-hero{max-width:none}}
.design-hero:hover{transform:translateY(-3px);box-shadow:0 20px 38px -12px rgba(109,19,236,.55)}
.design-hero:active{transform:translateY(0)}
.dh-art{display:flex;gap:4px;flex:none}
.dh-key{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.92);color:#2c3550;
  font-family:'Baloo 2',cursive;font-weight:800;font-size:1.05rem;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.14)}
.dh-key.k2{transform:translateY(5px);background:#ffd9e2;color:#c24962}
.dh-key.k3{transform:translateY(10px);background:#d9f2e5;color:#2e7d55}
.dh-text{flex:1;display:flex;flex-direction:column;gap:2px}
.dh-text b{font-family:'Baloo 2',cursive;font-weight:800;font-size:1.12rem}
.dh-text span{font-size:.8rem;opacity:.93}
.dh-go{flex:none;font-family:'Baloo 2',cursive;font-weight:700;font-size:.85rem;
  background:rgba(255,255,255,.24);border-radius:999px;padding:9px 15px}

/* Thanh giỏ hàng dính đáy (dưới .modal z-50 để form chốt đơn phủ lên) */
#shopCartBar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:45;
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;
  background:var(--ink);color:#fff;box-shadow:0 10px 30px rgba(20,26,44,.35);
  max-width:560px;margin:0 auto}
#shopCartBar.hidden{display:none}
.scb-info{flex:1;display:flex;flex-direction:column;cursor:pointer;min-width:0;padding-left:6px}
.scb-info b{font-family:'Baloo 2',cursive;font-size:.95rem;white-space:nowrap;display:flex;align-items:center;gap:7px}
.scb-info span{font-size:.7rem;opacity:.75}
.scb-checkout{flex:none;border:none;border-radius:999px;background:var(--pink);color:#fff;
  font-family:'Baloo 2',cursive;font-weight:700;font-size:.9rem;padding:10px 18px;cursor:pointer;box-shadow:0 2px 0 #c74763}
.scb-checkout:active{transform:translateY(2px);box-shadow:none}

/* Sheet xem giỏ (tận dụng .modal/.modal-box của style.css) */
#shopCartSheet h3{display:flex;align-items:center;gap:8px}
#shopCartSheet .cart-line{display:flex;align-items:center;gap:10px;background:#faf7ec;border:1px solid var(--line);
  border-radius:12px;padding:8px;margin-bottom:8px}
#shopCartSheet .cl-thumb{width:50px;height:50px;flex:none;border-radius:9px;object-fit:cover;background:#f3efe0;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem}
#shopCartSheet .cl-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#shopCartSheet .cl-info b{font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#shopCartSheet .cl-info span{font-size:.8rem;color:var(--pink);font-weight:600}
#shopCartSheet .cl-qty{display:flex;align-items:center;gap:7px;flex:none}
#shopCartSheet .cl-qty button{width:28px;height:28px;border:none;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer;font-size:.9rem}
#shopCartSheet .cl-qty b{font-size:.85rem;min-width:16px;text-align:center}
#shopCartSheet .cl-del{border:none;background:#fbeaec;color:#c0392b;border-radius:8px;width:28px;height:28px;cursor:pointer;flex:none}
#shopCartSheet .sheet-total{display:flex;justify-content:space-between;font-family:'Baloo 2',cursive;font-weight:800;
  font-size:1rem;padding:10px 2px;border-top:1px dashed var(--line);margin-top:6px}
#shopCartSheet .sheet-ship{font-size:.76rem;color:var(--ink-2);text-align:right;margin:-6px 2px 8px}

/* ===== Modal xem chi tiết sản phẩm — ảnh lớn + album vuốt/‹ › ===== */
#pDetail{background:rgba(21,20,15,.62)}
body.pd-open{overflow:hidden}
.pd-box{position:relative;background:#fff;border-radius:26px;width:min(1080px,96vw);max-height:94vh;overflow:hidden;
  display:grid;grid-template-columns:1.2fr .8fr;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);
  animation:pdIn .3s cubic-bezier(.22,.61,.36,1)}
@keyframes pdIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.pd-stage{position:relative;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 42%,#fff,#f3efe0 92%);padding:28px;min-height:440px}
.pd-img{position:relative;width:100%;height:100%;min-height:360px;display:flex;align-items:center;justify-content:center;margin:0;cursor:zoom-in}
.pd-img img{max-width:100%;max-height:74vh;object-fit:contain;transition:transform .3s ease}
.pd-img.zoomed{overflow:hidden;cursor:zoom-out}
.pd-img.zoomed img{transform:scale(2.5);cursor:zoom-out;transition:transform .2s ease}
.pd-ph{font-size:6rem}
/* Nút phóng to góc phải-dưới ảnh */
.pd-zoom{position:absolute;bottom:14px;right:14px;z-index:2;width:44px;height:44px;border-radius:50%;border:none;
  background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.2);color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .16s,color .16s,transform .12s}
.pd-zoom:hover{transform:scale(1.06)}
.pd-zoom:active{transform:scale(.92)}
.pd-zoom.active{background:var(--blue);color:#fff}
.pd-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:none;
  background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.18);color:var(--ink);font-size:1.7rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:2;transition:transform .12s,background .16s,color .16s}
.pd-nav:hover{background:var(--ink);color:#fff}
.pd-nav:active{transform:translateY(-50%) scale(.9)}
.pd-prev{left:14px}.pd-next{right:14px}
.pd-x{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:50%;border:none;
  background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.18);color:var(--ink);font-size:1rem;cursor:pointer}
.pd-x:hover{background:var(--ink);color:#fff}
.pd-info{padding:26px 26px 24px;display:flex;flex-direction:column;gap:13px;overflow-y:auto}
.pd-dots{display:flex;gap:6px;flex-wrap:wrap}
.pd-dots span{width:7px;height:7px;border-radius:999px;background:var(--line);transition:all .2s}
.pd-dots span.on{background:var(--blue);width:22px}
.pd-name{font-family:'Baloo 2',cursive;font-weight:800;font-size:1.75rem;color:var(--ink);line-height:1.08}
.pd-desc{font-size:.92rem;color:#5f5a4e;line-height:1.6}
.pd-variants{display:flex;gap:8px}
.pd-variants .v-btn{flex:1}
.pd-engrave.hidden{display:none}
.pd-engrave input{width:100%;padding:11px 14px;border:1.6px solid #f0c8d3;border-radius:12px;font-family:inherit;font-size:16px;outline:none;background:#fffafb}
.pd-engrave input:focus{border-color:var(--pink)}
.pd-price{font-family:'Baloo 2',cursive;font-weight:800;font-size:1.5rem;color:var(--blue);font-variant-numeric:tabular-nums}
.pd-foot{margin-top:auto;display:flex;align-items:center;gap:14px}
.pd-add{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:16px;
  background:var(--mint);color:#fff;font-family:'Baloo 2',cursive;font-weight:800;font-size:1rem;padding:15px;cursor:pointer;
  box-shadow:0 8px 20px -5px rgba(50,201,146,.6);transition:filter .16s,transform .12s}
.pd-add:hover{filter:brightness(1.05)}
.pd-add:active{transform:scale(.98)}
@media (max-width:760px){
  .pd-box{grid-template-columns:1fr;width:94vw;max-height:90vh;overflow-y:auto}
  .pd-stage{min-height:0;padding:16px}
  .pd-img img{max-height:42vh}
  .pd-name{font-size:1.42rem}
  .pd-nav{width:40px;height:40px;font-size:1.5rem}
}

@media (prefers-reduced-motion:reduce){
  .p-card{animation:none}
  .p-card:hover{transform:none}
  .p-card:hover .p-img img{transform:none}
  .skel-card{animation:none}
  .pd-box{animation:none}
}