/* Sân khấu: trang sản phẩm do máy chủ dựng (Task 6). Mọi luật nằm dưới body.stage / .stage. Xem docs/superpowers/specs/2026-09-29-public-ui-redesign-design.md. */
/* Cỡ chữ đi qua các biến --s-fs* của site.css (không viết px cho chữ) để nút "Aa" tới được trang này; đơn vị em theo chữ thân nên cũng lớn theo. */

/* Dải xem trước chỉ quản trị viên thấy, nằm trên header: luật dùng chung với ứng dụng ở web/site.css. */

/* Khung trang: <main class="store-product"> (store.css không còn luật của trang sản phẩm; các luật còn dùng đã chuyển về đây). */
.stage .store-product{max-width:1180px;margin:auto;padding:20px 16px 40px}
.stage .store-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin-bottom:6px;font-size:var(--s-fs-note)}
.stage .store-breadcrumb a{display:inline-flex;align-items:center;min-height:44px;color:var(--s-teal-dark);font-weight:700}

.stage .product-detail{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start;gap:28px;max-width:1180px;margin:0 auto;padding:10px 0 24px}

/* Hình lớn: khung 16:9 theo tỉ lệ, ảnh nằm trọn trong khung (không cắt) dù ảnh cao, rộng hay hỏng, nên trang không dịch khi ảnh về. */
.stage .product-media{position:relative;margin:0;border:2px solid var(--s-ink);border-radius:14px;background:var(--s-paper);box-shadow:var(--s-lift);overflow:hidden;aspect-ratio:16/9;align-self:start}
.stage .product-media img,.stage .product-zoom{display:block;width:100%;height:100%}
.stage .product-media img{object-fit:contain}
/* Nhân vật thay ảnh (chưa có ảnh, hoặc ảnh hỏng thì JS thêm lớp này): luôn giữa khung dù nằm trực tiếp trong khung hay trong nút phóng to. */
.stage .product-media img.is-fallback{position:absolute;left:50%;top:50%;width:auto;height:72%;aspect-ratio:1;transform:translate(-50%,-50%)}
.stage .product-media:has(.is-fallback){background:var(--s-b1)}
.stage .product-zoom{position:relative;padding:0;border:0;background:none;cursor:zoom-in}
/* Nhãn dán báo hình phóng to được. Chỉ khi nút đang bật: máy chủ dựng nút tắt, store-page.js bật nó từ 901px rộng và 590px cao (từ đó hộp phóng to
   mới lớn hơn hình trong trang). Nút tắt (điện thoại, máy tính bảng dọc, cửa sổ thấp, không có JavaScript, ảnh hỏng) không có nhãn dán và không hứa phóng to. */
.stage .product-zoom::before{content:"Phóng to";position:absolute;right:10px;bottom:10px;padding:3px 12px;border:2px solid var(--s-ink);border-radius:99px;background:var(--s-sun);color:var(--s-ink);font-size:var(--s-fs-note);font-weight:800;line-height:1.5}
/* Khung có overflow:hidden cắt vòng focus ở ngoài (offset 3px): vòng nằm trong khung, mực ngoài, dải trắng, mực trong, để thấy trên ảnh sáng lẫn tối. */
.stage .product-zoom:focus-visible{outline-offset:-3px}
.stage .product-zoom:focus-visible::after{content:"";position:absolute;inset:3px;border:3px solid #fff;box-shadow:inset 0 0 0 2px var(--s-ink);pointer-events:none}
.stage .product-zoom:disabled{cursor:default;opacity:1} /* button:disabled của styles.css làm mờ: đây chỉ là hình, không phải nút hỏng */
.stage .product-zoom:disabled::before{display:none}

.stage .product-summary{min-width:0;overflow-wrap:anywhere}
.stage .product-summary h1{font-size:clamp(26px,3vw,36px);line-height:1.3;font-weight:900;margin:10px 0}
.stage .product-where{margin:0 0 10px;font-size:var(--s-fs);font-weight:700;color:var(--s-muted)}
.stage .product-lead{margin:0 0 14px;max-width:62ch;font-size:var(--s-fs-title);line-height:1.6}
.stage .product-offers h2{margin:18px 0 8px;font-size:1.25em;font-weight:900;line-height:1.3}
.stage .product-soon{margin:8px 0 0;color:var(--s-muted);font-weight:800}
.stage .offer-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px}
.stage .offer-list li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;min-height:56px;padding:10px 14px;border:2px solid var(--s-ink);border-radius:12px;background:#fff;font-size:var(--s-fs)}
.stage .offer-name{flex:1 1 120px;min-width:0;overflow-wrap:anywhere;font-weight:800}
.stage .offer-price{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:2px 8px;min-width:0;margin-left:auto;overflow-wrap:anywhere}
.stage .offer-price strong{color:var(--s-accent);font-size:var(--s-fs-title);font-weight:900}
.stage .offer-price .is-free{color:var(--s-teal-dark)}
.stage .offer-price s{color:var(--s-muted);font-size:var(--s-fs-note)}
.stage .offer-list small{flex-basis:100%;color:var(--s-muted);font-size:var(--s-fs-note)}
.stage .product-notice{margin:14px 0 0;padding:10px 14px;border:2px dashed var(--s-ink);border-radius:12px;background:var(--s-paper);font-weight:700}

/* overflow-wrap:break-word, không phải anywhere: chữ chỉ bị bẻ giữa từ khi một từ dài hơn cả khung. `anywhere` còn làm cỡ tối thiểu của ô bảng chỉ một ký tự, nên bảng nhiều cột
   trên điện thoại bị bẻ từng chữ ("Tu/ần") và không bao giờ cần cuộn; với break-word các từ giữ nguyên và bảng cuộn ngang trong chính nó. */
/* max-width chỉ để giữ độ dài dòng: khối nằm sát trái, thẳng hàng với đường dẫn và hình (cùng mép trái khung trang); canh giữa làm nó bắt đầu lệch tới 164px ở 1280px. */
.stage .product-content{max-width:820px;margin:8px 0 40px;font-size:var(--s-fs-title);line-height:1.7;overflow-wrap:break-word}
.stage .product-content :is(p,li,blockquote){max-width:62ch}
.stage .product-content :is(h2,h3,h4){margin:1.4em 0 .5em;line-height:1.3;font-weight:900}
/* Nội dung do HocAI soạn: ảnh không rộng hơn khối, bảng rộng cuộn trong chính nó (trang không cuộn ngang). */
.stage .product-content img{max-width:100%;height:auto}
.stage .product-content table{border-collapse:collapse;display:block;max-width:100%;overflow-x:auto}
.stage .product-content :is(th,td){border:1px solid var(--line);padding:6px 10px}

/* Hộp phóng to: <dialog> gốc, Esc đóng, phần còn lại của trang bị khóa khi mở. Chiều rộng xác định để hình luôn được phóng lên, kể cả ảnh nhỏ. */
.stage .product-lightbox{width:100%;max-width:min(96vw,1100px);max-height:calc(100% - 16px);padding:12px;border:2px solid var(--s-ink);border-radius:14px;background:var(--s-paper);color:var(--s-ink);box-shadow:var(--s-lift)}
.stage .product-lightbox:not([open]){display:none}
.stage .product-lightbox[open]{display:grid;gap:10px;overflow:auto}
.stage .product-lightbox::backdrop{background:rgb(37 60 55 / .78)} /* nền màu mực phẳng; site.css bỏ blur của styles.css cho mọi hộp thoại Sân khấu */
.stage .product-lightbox .btn{justify-self:end}
.stage .product-lightbox img{display:block;width:100%;height:auto;max-height:calc(100vh - 130px);max-height:calc(100dvh - 130px);object-fit:contain;border-radius:8px;background:#fff}

.stage .store-missing{max-width:560px;margin:48px auto;text-align:center}
.stage .store-missing img{display:block;width:140px;height:140px;margin:0 auto 12px}
.stage .store-missing h1{margin:0 0 10px;font-size:clamp(26px,3vw,36px);line-height:1.3;font-weight:900}
.stage .store-missing p{max-width:62ch;margin:0 auto 20px}

.stage .footnote{max-width:1180px;margin:0 auto;padding:18px 16px 28px;font-size:var(--s-fs-note);color:var(--s-muted)}

@media(max-width:900px){.stage .product-detail{grid-template-columns:1fr}}
/* Trang này chỉ có hai liên kết: lưới năm cột của header.css (cho 5–6 nút của ứng dụng) bẻ "Cửa hàng" thành hai dòng ở 320px. */
@media(max-width:800px){body.stage .app-header.site-header .nav{grid-template-columns:repeat(2,max-content);justify-content:start;gap:4px 8px}body.stage .app-header.site-header .nav a{white-space:nowrap;padding-inline:8px}}