/* Sân khấu: trang chủ. docs/superpowers/specs/2026-09-29-public-ui-redesign-design.md, mục 5. Mọi luật nằm dưới .stage.
   Cỡ chữ đi qua --s-fs, --s-fs-title, --s-fs-note, --s-fs-tag (web/site.css) để nút "Aa" tới được mọi thành phần; tiêu đề dùng clamp().
   Nhiều luật cũ của landing.css (.landing-hero, .landing-lead, .grade-card…) vẫn chạm vào khối này: các luật dưới đây mạnh hơn và ghi đè. */
.stage .marketing-home,.stage .stage-page{max-width:1180px;margin:auto}

/* Hero */
.stage .stage-hero{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:32px;padding:36px 0 40px}
/* Cân dòng: trên màn hẹp không để một chữ ("hơn,") đứng riêng một dòng trước chỗ xuống dòng cố ý. */
.stage .stage-hero h1{font-size:clamp(28px,4vw,44px);line-height:1.3;letter-spacing:-.5px;font-weight:900;margin:14px 0 16px;text-wrap:balance}
.stage .stage-hero .landing-lead{font-size:calc(var(--s-fs) + 2px);line-height:1.7;max-width:62ch;margin:0;color:var(--s-muted);text-wrap:pretty}
.stage .stage-hero .landing-actions{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0 16px}
.stage .stage-assure{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
/* Nhãn phụ không bấm được ("Dùng ngay trên trình duyệt", "Không cần cài đặt"): nhãn phẳng, không viền mực (viền mực quanh mọi thứ bấm được, spec mục 4) và không nền trắng
   như thẻ Loại bấm được. Đệm 6px 16px thay cho đệm 4px 14px cộng viền 2px: cùng kích thước ngoài như trước, nên bố cục không dịch. */
.stage .stage-assure li{padding:6px 16px;border:0;border-radius:99px;background:#edf6f1;color:var(--s-ink);font-size:var(--s-fs-note);font-weight:800;line-height:1.5}
.stage .stage-hero-art{position:relative;min-width:0;padding:10px;background:var(--s-paper);border:1px solid var(--s-line);border-radius:14px;box-shadow:var(--s-lift)}
/* landing.css giới hạn ảnh hero 410px (245px trên điện thoại) kèm object-fit: ảnh bị thu trong khung rộng. Ở đây ảnh luôn đúng tỉ lệ 560×340. */
.stage .stage-hero-art img{display:block;width:100%;height:auto;max-height:none;border-radius:10px}
/* Đồng hồ thời gian: chỉ có khi LESSON_TIME có giá trị và AI bật (web/home-parts.js). */
.stage .stage-clock{position:absolute;top:-14px;right:-6px;min-width:74px;padding:10px 14px;border:1px solid var(--s-line);border-radius:99px;background:var(--s-sun);font-weight:900;font-size:calc(var(--s-fs) + 2px);line-height:1.4;text-align:center;transform:rotate(-8deg)}

/* Ba bước, "Bạn đang dạy ai?" */
.stage .stage-steps,.stage .stage-levels{padding:28px 0}
.stage .stage-steps h2,.stage .stage-levels h2{font-size:clamp(24px,3vw,32px);line-height:1.3;margin:0 0 6px;font-weight:900}
.stage .stage-sub{margin:0 0 4px;color:var(--s-muted);max-width:62ch;text-wrap:pretty}
.stage .stage-steps ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;list-style:none;margin:18px 0 0;padding:0}
.stage .stage-steps li{position:relative;display:grid;align-content:start;gap:6px;padding:16px 18px}
/* Mũi tên giữa hai thẻ: rộng đúng bằng khoảng cách 32px, nằm giữa khoảng đó; trình đọc màn hình bỏ qua (chữ thay thế rỗng). */
.stage .stage-steps li:not(:last-child)::after{content:'→';content:'→'/'';position:absolute;right:-32px;width:32px;top:50%;transform:translateY(-50%);text-align:center;font-weight:900;font-size:calc(var(--s-fs) + 6px);line-height:1}
.stage .stage-steps strong{font-size:var(--s-fs-title);line-height:1.35}
.stage .stage-steps li>span:last-child{font-size:var(--s-fs-note);line-height:1.55;color:var(--s-muted);text-wrap:pretty}
/* Sáu ô: ba cột trên máy tính (3 + 3), hai cột trên máy tính bảng, một cột trên điện thoại. */
.stage .stage-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin-top:16px}
.stage .stage-tiles .s-tile-text{overflow-wrap:anywhere}

/* Các mục theo lớp giữ nội dung cũ, đổi áo */
.stage .landing-section-heading>p:last-child{font-size:var(--s-fs);color:var(--s-muted);max-width:62ch}
.stage .education-heading{border-bottom:1px solid var(--s-line)}
/* Tên cấp học: management.css cố định 21px, không theo chữ lớn. */
.stage .education-heading h3{font-size:calc(var(--s-fs-title) + 4px)}
.stage .education-heading p,.stage .landing-small{font-size:var(--s-fs-note);color:var(--s-muted)}
.stage .landing-small{max-width:62ch}
.stage .grade-card,.stage .education-group .grade-card{background:#fff;border:1px solid var(--s-line);border-radius:14px;box-shadow:var(--s-lift)}
/* management.css đặt tên thẻ 15px (14px trên điện thoại): nhỏ hơn cả mô tả 16px và không theo chữ lớn. */
.stage .grade-card h4{font-size:var(--s-fs-title);font-weight:900;line-height:1.35}
.stage .grade-card>p:not(.eyebrow){font-size:var(--s-fs);color:var(--s-muted)}
.stage .education-group-wide .grade-card>p:not(.eyebrow){max-width:62ch}
.stage .education-group .grade-card .eyebrow{font-size:var(--s-fs-tag)}
.stage .education-group .grade-card .grade-ideas{font-size:var(--s-fs-note)}
/* management.css xếp thẻ lớp 3 cột từ 701px và 5 cột từ 1101px. Ở đầu mỗi khoảng thẻ quá hẹp nên "Soạn bài lớp 10 ↗" xuống hai dòng
   (đo 30/09 với Nunito: chữ thường tới 710px và 1160px, chữ lớn tới 755px và từ 1101px trở lên). Ít cột hơn ở đầu mỗi khoảng, có chừa dư. */
@media(min-width:701px) and (max-width:729px){.stage .education-group:not(.education-group-wide) .grade-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:701px) and (max-width:799px){.large-text .stage .education-group:not(.education-group-wide) .grade-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1101px) and (max-width:1199px){.stage .education-group:not(.education-group-wide) .grade-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1101px){.large-text .stage .education-group:not(.education-group-wide) .grade-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stage .preparation{border-top:1px solid var(--s-line);border-bottom:1px solid var(--s-line)}
.stage .preparation>div>p:not(.eyebrow),.stage .preparation-steps p{color:var(--s-muted)}
.stage .preparation-steps li{border-bottom-color:var(--s-line)}
.stage .preparation-steps h3{font-size:var(--s-fs-title)}
/* Số 01/02/03: landing.css cố định 24px, không theo chữ lớn. */
.stage .preparation-steps li>span{font-size:calc(var(--s-fs-title) + 7px)}
/* "Theo lớp" của trang chủ cửa hàng (web/store.js storeHomeHtml) */
/* Ba cột ở điện thoại: đệm hẹp để "Lớp 10" nằm một dòng ở 320px khi chữ lớn; nếu vẫn xuống dòng (giãn chữ) thì hai dòng được căn giữa. */
.stage .grade-tile{padding-inline:8px;border:1px solid var(--s-line);border-radius:12px;background:#fff;color:var(--s-ink);font-weight:800;line-height:1.3;text-align:center;box-shadow:var(--s-lift-sm)}

/* Câu hỏi thường gặp. Mũi tên riêng thay cho dấu tam giác của trình duyệt (bị mất khi summary là flex), xoay khi mở. */
.stage .landing-faq details{background:#fff;border:1px solid var(--s-line);border-radius:12px;padding:6px 16px;margin-bottom:10px}
.stage .landing-faq summary{display:flex;align-items:center;gap:12px;min-height:44px;padding:4px 0;font-weight:800;font-size:var(--s-fs);line-height:1.5;list-style:none;cursor:pointer}
.stage .landing-faq summary::-webkit-details-marker{display:none}
.stage .landing-faq summary::before{content:'';flex:none;width:9px;height:9px;margin:0 4px 0 2px;border-right:3px solid var(--s-ink);border-bottom:3px solid var(--s-ink);transform:rotate(-45deg);transition:transform .12s}
.stage .landing-faq details[open] summary::before{transform:rotate(45deg)}
/* Vòng focus quanh cả ô câu hỏi (như ô cấp học), không chồng lên viền ô. Trình duyệt chưa có :has() giữ vòng focus của summary. */
@supports selector(:has(a)){
  .stage .landing-faq summary:focus-visible{outline:none}
  .stage .landing-faq details:has(>summary:focus-visible){outline:3px solid var(--s-ink);outline-offset:3px}
}
.stage .landing-faq details p{margin:4px 0 10px;color:var(--s-muted);max-width:62ch}
.stage .footnote{border-top:1px solid var(--s-line);font-size:var(--s-fs-note);color:var(--s-muted)}

@media(max-width:950px){
  .stage .stage-hero{grid-template-columns:1fr;gap:24px}
  .stage .stage-hero-art{justify-self:center;width:100%;max-width:560px}
  /* Một cột: số bên trái, tên và mô tả bên phải, thẻ thấp hơn. */
  .stage .stage-steps ol{grid-template-columns:1fr;gap:14px}
  .stage .stage-steps li{grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center}
  .stage .stage-steps .s-num{grid-row:span 2}
  .stage .stage-steps li::after{display:none}
}
@media(max-width:600px){
  .stage .stage-hero{padding:20px 0 24px}
  .stage .stage-hero h1{margin:12px 0 16px}
  .stage .stage-hero .landing-actions{gap:10px;margin:20px 0 14px}
  /* management.css xếp thẻ lớp hai cột trên điện thoại (chữ 13px, nút 12px). Chữ Sân khấu từ 16px và nút 44px không vừa hai cột:
     một cột, nhân vật bên trái, nút rộng hết thẻ. */
  .stage .education-group .grade-grid{grid-template-columns:1fr;gap:12px}
  .stage .education-group .grade-card{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:14px;align-items:start;padding:14px 16px}
  .stage .education-group .grade-card>*{grid-column:2}
  .stage .education-group .grade-card .grade-mascot{grid-column:1;grid-row:1/span 3;width:64px;height:64px;margin:0}
  .stage .education-group .grade-card>p:not(.eyebrow){margin-bottom:0}
  .stage .education-group .grade-card .btn{grid-column:1/-1;grid-row:auto;margin-top:14px}
}

/* Cửa hàng trước (docs/superpowers/specs/2026-09-29-public-ui-redesign-design.md, mục 5.4): trang chủ khi cửa hàng hiện mở bằng hero cửa hàng
   (ô tìm lớn, bốn thẻ Loại), rồi sáu ô cấp học, các hàng sản phẩm, "Theo lớp", khối "Muốn tự làm bài giảng?". Hình hero có class riêng
   (store-hero-art) để đồng hồ LESSON_TIME của hero soạn bài không lọt vào đây. Cỡ chữ đi qua --s-fs*; tiêu đề dùng clamp(). */
.stage .store-hero{display:grid;grid-template-columns:1.15fr 1fr;grid-template-areas:"copy art" "kinds kinds";align-items:center;gap:24px 32px;padding:36px 0 12px}
.stage .store-hero-copy{grid-area:copy;min-width:0}
.stage .store-hero h1{font-size:clamp(28px,4vw,44px);line-height:1.3;letter-spacing:-.5px;font-weight:900;margin:14px 0 14px;text-wrap:balance}
.stage .store-hero-lead{font-size:calc(var(--s-fs) + 2px);line-height:1.7;max-width:62ch;margin:0;color:var(--s-muted);text-wrap:pretty}
/* Ô tìm là hành động chính: cao 60px, chữ lớn hơn ô tìm của danh sách. Khung và nút lấy từ .store-search (stage-store.css). */
.stage .store-hero .store-search{max-width:620px;margin:22px 0 0}
.stage .store-hero .store-search input{min-height:60px;font-size:calc(var(--s-fs-title) + 1px)}
.stage #main .store-hero .store-search .btn{padding-inline:28px}
.stage .store-hero-art{grid-area:art;position:relative;min-width:0;padding:10px;background:var(--s-paper);border:1px solid var(--s-line);border-radius:14px;box-shadow:var(--s-lift)}
.stage .store-hero-art img{display:block;width:100%;height:auto;border-radius:10px}
/* Bốn thẻ Loại: thẻ lớn có biểu tượng (spec 6.2), mỗi thẻ là một liên kết lọc cửa hàng. Biểu tượng nằm trên nền cùng màu với ảnh thay thế của loại đó. */
.stage .store-kind-links{grid-area:kinds}
.stage .store-kind-links ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;list-style:none;margin:16px 0 0;padding:0}
.stage .store-kind{display:flex;align-items:center;gap:12px;height:100%;min-height:60px;padding:8px 14px;border:1px solid var(--s-line);border-radius:14px;background:#fff;color:var(--s-ink);font-size:var(--s-fs-title);font-weight:900;line-height:1.3;text-decoration:none;box-shadow:var(--s-lift);transition:transform .12s}
.stage .store-kind:hover{transform:translate(1px,1px);box-shadow:var(--s-lift-sm)}
.stage .store-kind>span:last-child{min-width:0;overflow-wrap:anywhere}
.stage .store-kind-icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--s-line);border-radius:50%;color:var(--s-ink)}
.stage .store-kind-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Các hàng sản phẩm: tiêu đề cùng cỡ với các mục khác của trang; "Xem tất cả" cao từ 44px. */
.stage .store-section-head{align-items:center}
.stage .store-section-head h2{font-size:clamp(24px,3vw,32px);line-height:1.3;font-weight:900}
.stage .store-section-head a{display:inline-flex;align-items:center;flex:none;min-height:44px;padding:0 0 0 8px;color:var(--s-teal-dark);font-size:var(--s-fs);font-weight:800}

/* Khối "Muốn tự làm bài giảng?": một khối trên nền giấy, không còn là hero. Ba bước dùng lại thẻ của .stage-steps. */
.stage .stage-tool{margin:40px 0 24px;padding:28px;background:var(--s-paper);border:1px solid var(--s-line);border-radius:14px;box-shadow:var(--s-lift)}
.stage .stage-tool-head h2{font-size:clamp(24px,3vw,32px);line-height:1.3;margin:10px 0 6px;font-weight:900}
.stage .stage-tool-lead{margin:0;max-width:62ch;color:var(--s-muted);text-wrap:pretty}
.stage .stage-tool .stage-steps{padding:20px 0 0}
.stage .stage-tool .stage-steps h3{font-size:calc(var(--s-fs-title) + 3px);line-height:1.35;margin:0;font-weight:900}
.stage .stage-tool .landing-actions{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0 14px}

@media(max-width:950px){
  /* Hết chỗ cho hình minh họa: bỏ nó, thẻ Loại ngay dưới ô tìm. */
  .stage .store-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "kinds";gap:12px;padding:24px 0 8px}
  .stage .store-hero-art{display:none}
}
@media(max-width:800px){
  /* Bốn thẻ một hàng cần khoảng 180px mỗi thẻ khi chữ lớn ("Tài liệu số" nằm một dòng): từ 801px trở lên. Dưới đó hai cột. */
  .stage .store-kind-links ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media(max-width:700px){
  .stage .store-kind{gap:10px;padding:8px 12px}
  .stage .store-kind-icon{width:36px;height:36px}
}
@media(max-width:380px){
  /* Hai thẻ một hàng chỉ còn khoảng 140px: bớt đệm và biểu tượng để chữ "Khóa học", "Tất cả" còn nằm một dòng khi chữ thường. */
  .stage .store-kind{gap:8px;padding:8px 10px}
  .stage .store-kind-icon{width:32px;height:32px}
  .stage .store-kind-icon svg{width:18px;height:18px}
}
@media(max-width:600px){
  .stage .store-hero{padding-top:20px}
  .stage .store-hero h1{margin:12px 0}
  .stage .store-hero .store-search{margin-top:18px}
  .stage .stage-tool{margin:28px 0 16px;padding:18px 16px}
  .stage .stage-tool .landing-actions{gap:10px;margin:20px 0 12px}
}

/* Trang công khai nhẹ màu: minh họa giữ màu, giấy và điều khiển nhường chỗ cho nội dung. */
.stage .stage-hero,.stage .store-hero{padding-top:48px;padding-bottom:28px}
.stage .stage-hero-art,.stage .store-hero-art{padding:8px;background:#fff;border-radius:18px;box-shadow:0 8px 24px #243c3510;transform:rotate(-2deg)}
.stage .stage-hero-art::before,.stage .store-hero-art::before{content:'';position:absolute;inset:9px 5px -9px 5px;border:1px solid var(--s-line);border-radius:18px;background:var(--s-paper);z-index:-1;transform:rotate(4deg)}
.stage .stage-assure li{padding:4px 0;background:transparent;font-weight:600}
.stage .stage-assure li+li::before{content:'·';margin-right:8px;color:var(--s-teal)}
.stage .stage-steps li{background:var(--s-paper);box-shadow:none}
.stage .stage-steps li:not(:last-child)::after{color:var(--s-teal)}
.stage .s-tile,.stage .store-kind{box-shadow:none}
.stage .store-kind-icon{border:0}
.stage .stage-tool{background:#eef6f0;box-shadow:none}
.stage .landing-faq details{box-shadow:none;background:#fff}
@media(max-width:600px){
  .stage .stage-hero,.stage .store-hero{padding-top:24px;padding-bottom:20px}
  .stage .stage-hero-art{width:calc(100% - 12px);margin:4px 6px}
}

/* Bìa bài thật là trọng tâm hero. Khung 16:9 giữ nguyên ảnh, tên đầy đủ ở aria-label. */
.stage .stage-hero-art,.stage .store-hero-art{padding:12px;background:transparent;border:0;box-shadow:none;transform:none;isolation:isolate}
.stage .stage-hero-art::before,.stage .store-hero-art::before{display:none}
.stage .hero-folio{position:relative;display:block;min-width:0;aspect-ratio:16/9;margin:0;padding:7px;border:1px solid var(--s-line);border-radius:12px;background:#fff;color:var(--s-ink);box-shadow:0 6px 18px #243c3514;text-decoration:none;transform:rotate(-2deg)}
.stage .hero-folio img{display:block;width:100%;height:auto;max-height:none;border-radius:7px;object-fit:contain;aspect-ratio:16/9}
.stage .hero-folio img.is-fallback{background:var(--s-paper);padding:12%}
.stage .hero-folio-name,.stage .hero-sample-label{position:absolute;left:14px;right:14px;bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:4px 8px;border-radius:5px;background:#fff;color:var(--s-ink);font-size:var(--s-fs-note);font-weight:800;line-height:1.5;overflow-wrap:anywhere}
.stage .hero-sample-label{width:fit-content;max-width:calc(100% - 28px)}
.stage .store-hero-art.has-covers{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));aspect-ratio:16/11;align-items:start;gap:0}
.stage .has-covers .hero-folio:first-child{grid-column:2/12;grid-row:1/7}
.stage .has-covers .hero-folio:nth-child(2){grid-column:1/8;grid-row:5/9;transform:rotate(2deg)}
.stage .has-covers .hero-folio:nth-child(3){grid-column:7/13;grid-row:5/9;transform:rotate(-3deg)}
@media(max-width:950px){
  .stage .store-hero{grid-template-areas:"copy" "art" "kinds"}
  .stage .store-hero-art{display:block;width:100%;max-width:560px;justify-self:center}
  .stage .store-hero-art.has-covers{display:grid}
}
@media(max-width:600px){
  .stage .store-hero-art{max-width:420px;padding:10px}
  .stage .hero-folio-name{font-size:var(--s-fs-tag)}
}

.stage .hero-folio:focus-visible{z-index:3;transform:none}

/* Approved public landing: cream paper, three covers, compact level strip,
   product images first, then the optional authoring tool. */
.stage .public-home{max-width:1240px;margin:auto;padding:0 24px 24px}
.stage .public-home .public-hero{grid-template-areas:"copy art";grid-template-columns:1.08fr 1fr;gap:16px;padding:32px 0 18px;align-items:center}
.stage .public-hero h1{font-size:clamp(30px,3.7vw,48px);line-height:1.3;margin:0 0 14px;font-weight:900}
.stage .public-hero .store-hero-lead{font-size:var(--s-fs-title);margin:0 0 22px}
.stage .public-hero .store-hero-art{max-width:540px;min-width:0;justify-self:end}
.stage .public-levels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:4px 0 24px}
.stage .public-levels .s-tile{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:8px 10px;border:0;border-radius:12px;font-size:var(--s-fs);line-height:1.4}
.stage .public-levels .s-tile img{width:32px;height:32px;flex:none}
.stage .public-levels .s-tile{position:relative;justify-content:flex-start;min-height:104px;padding:12px 10px;border:2px solid transparent;border-radius:18px;gap:8px;transition:border-color .12s,background-color .12s}
.stage .public-levels .s-tile strong{min-width:0;line-height:1.35;overflow-wrap:normal;font-weight:800}
.stage .public-levels .level-art{position:relative;display:block;overflow:hidden;width:64px;height:64px;flex:none}
.stage .public-levels .level-art img{position:absolute;width:300%;height:200%;max-width:none;max-height:none;object-fit:fill;left:0;top:0}
.stage .public-levels .level-art-1 img,.stage .public-levels .level-art-4 img{left:-100%}
.stage .public-levels .level-art-2 img,.stage .public-levels .level-art-5 img{left:-200%}
.stage .public-levels .level-art-3 img,.stage .public-levels .level-art-4 img,.stage .public-levels .level-art-5 img{top:-100%}
.stage .public-levels .level-check{position:absolute;top:7px;right:7px;width:20px;height:20px;border-radius:50%;background:var(--s-teal);color:#fff;display:flex;align-items:center;justify-content:center;visibility:hidden}
.stage .public-levels .level-check svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.stage .public-levels .s-tile:hover{border-color:var(--s-control)}
.stage .public-levels .s-tile.is-selected{border-color:var(--s-teal);background:var(--s-b2)}
.stage .public-levels .is-selected .level-check{visibility:visible}
.stage .store-listing .public-levels{margin:18px 0 24px}
.stage .public-showcase .store-section-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;border:0;margin:0 0 12px;padding:0}
.stage .public-showcase h2{margin:0;font-size:clamp(24px,2.6vw,32px);line-height:1.3;font-weight:900}
.stage .public-note{font-size:var(--s-fs-note);color:var(--s-muted);border:1px solid var(--s-line);border-radius:99px;padding:4px 10px}
.stage .public-showcase .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stage .public-showcase .product-card{padding:7px 7px 10px;border-radius:12px;gap:3px}
.stage .public-showcase .product-thumb{border:0}
.stage .public-showcase .product-kind{font-size:var(--s-fs-tag);margin:0}
.stage .public-tool{display:flex;align-items:center;gap:20px;margin:24px 0 12px;padding:16px 24px;border-radius:14px;background:var(--s-paper)}
.stage .public-tool>img{flex:none;width:96px;height:96px}
.stage .public-tool>div{flex:1;min-width:0}
.stage .public-tool h2{margin:0;font-size:clamp(23px,2.4vw,30px);line-height:1.3}
.stage .public-tool p{margin:4px 0 0;font-size:var(--s-fs)}
.stage .public-home .landing-faq{padding:12px 0;display:block}
.stage .public-home .landing-faq h2{font-size:24px;margin:0 0 12px}
.stage .public-home .landing-faq .eyebrow{display:none}
.stage .public-home .landing-faq>div:last-child{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stage .public-home .landing-faq details{margin:0;min-width:0;border-width:1px}
.stage .public-level-info{margin:20px 0;border-top:1px solid var(--s-line);padding-top:12px}
.stage .public-level-info>summary{min-height:44px;cursor:pointer;color:var(--s-teal);font-weight:800}
@media(max-width:950px){
 .stage .public-home .public-hero{grid-template-areas:"copy art";grid-template-columns:1fr 1fr}
 .stage .public-levels{grid-template-columns:repeat(3,minmax(0,1fr))}
 .stage .public-tool{flex-wrap:wrap}
}
@media(max-width:650px){
 .stage .public-home{padding:0 16px 16px}
 .stage .public-home .public-hero{grid-template-areas:"copy" "art";grid-template-columns:minmax(0,1fr);padding-top:24px;gap:12px}
 .stage .public-hero .store-hero-art{justify-self:center;width:100%;max-width:420px}
 .stage .public-levels{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .stage .public-levels .s-tile{min-height:88px;padding:12px 8px;gap:6px;border-radius:14px}
 .stage .public-levels .level-art{width:42px;height:42px}
 .stage .public-showcase .product-grid{grid-template-columns:minmax(0,1fr)}
 .stage .public-tool{gap:12px;padding:16px}
 .stage .public-tool>img{width:64px;height:64px}
 .stage .public-tool .btn{width:100%}
 .stage .public-home .landing-faq>div:last-child{grid-template-columns:minmax(0,1fr)}
}
/* Trên điện thoại, hàng cấp học của cửa hàng cuộn ngang để ô lớp/môn vẫn ở màn đầu. */
@media(max-width:650px){
  .stage .store-listing .public-levels{display:flex;overflow-x:auto;gap:8px;margin:12px 0 16px;padding-bottom:4px;scroll-snap-type:x proximity}
  .stage .store-listing .public-levels .s-tile{flex:0 0 160px;scroll-snap-align:start}
}