/* ==========================================================================
   GALLERY — chỉ để trình diễn design (khung điện thoại, thanh nav, nút phát lại…). KHÔNG phải app.
   Quy tắc "không hardcode" áp cho labelcue.css; file này được miễn.
   ========================================================================== */


/* ==========================================================================
   KHUNG ĐIỆN THOẠI (chỉ dùng để trình diễn; app thật không có)
   ========================================================================== */
.phone{width:360px;height:780px;border-radius:46px;background:var(--canvas);position:relative;overflow:hidden;
  box-shadow:0 0 0 9px #101B18,0 0 0 10px #2b3a36,0 30px 60px -20px rgba(16,27,24,.45);flex:none;font:var(--t-body);color:var(--ink)}
.sb{position:absolute;top:0;left:0;right:0;height:36px;padding:14px 26px 0;display:flex;justify-content:space-between;font:600 12px/1 var(--font);z-index:30;pointer-events:none}
.sb.light{color:#fff}
.gesture{position:absolute;bottom:7px;left:50%;width:120px;height:4px;border-radius:2px;background:rgba(22,48,42,.35);transform:translateX(-50%);z-index:40}
.gesture.light{background:rgba(255,255,255,.7)}

/* ==========================================================================
   TRANG TRÌNH DIỄN (gallery) — không phải phần của app
   ========================================================================== */
.gallery{font:var(--t-body);background:#E7E3D6;color:var(--ink);padding:0 32px 80px}
.gal-head{position:sticky;top:0;z-index:100;background:rgba(231,227,214,.92);backdrop-filter:blur(12px);padding:14px 0 12px;margin:0 -32px 24px;padding-left:32px;padding-right:32px;border-bottom:1px solid rgba(22,48,42,.12)}
.gal-head h1{font:700 18px/24px var(--font)}
.gal-head nav{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.gal-head nav a{font:600 12px/1 var(--font);padding:7px 11px;border-radius:99px;background:#fff;border:1px solid var(--hairline)}
.gal-sec{margin:36px 0 14px}
.gal-sec h2{font:700 22px/28px var(--font)}.gal-sec p{color:var(--muted);max-width:760px;margin-top:4px}
.gal-row{display:flex;gap:44px;flex-wrap:wrap;align-items:flex-start}
.gal-cell figcaption{margin:22px 4px 0;font:600 13px/18px var(--font);max-width:360px}
.gal-cell figcaption span{display:block;font:400 12px/16px var(--font);color:var(--muted);margin-top:2px}
.sbr{display:flex;gap:5px;align-items:center}
.sbr::before{content:"5G"}
.sbr::after{content:"";width:20px;height:10px;border-radius:3px;border:1.2px solid currentColor;background:linear-gradient(currentColor,currentColor) 1.5px 1.5px/13px 5px no-repeat}

.rel{display:inline-block;font:700 11px/16px var(--font);padding:1px 8px;border-radius:99px;margin-right:6px;vertical-align:1px}
.rel.r1{background:#DCEDE6;color:#17564A}.rel.r2{background:#DDE8F7;color:#2F5E9A}.rel.r3{background:#EEE6F7;color:#6A4A9A}
.dark .gesture{background:rgba(255,255,255,.4)}
.replay{position:absolute;top:10px;right:10px;z-index:90;width:30px;height:30px;border-radius:50%;background:rgba(22,48,42,.55);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .2s}
.phone:hover .replay{opacity:1}
.replay .ic{width:16px;height:16px}

/* ===== BRAND (dùng chung) ===== */
.tile{display:flex;flex-direction:column;gap:10px;align-items:center;font:var(--t-caption);color:var(--muted);text-align:center}
.mask{overflow:hidden;position:relative;background:#16302A;flex:none}
.mask img,.mask svg{position:absolute;inset:0;width:100%;height:100%}
.r-circle{border-radius:50%}.r-squircle{border-radius:32%}.r-round{border-radius:22%}.r-tear{border-radius:50% 50% 50% 12%}
.launcher{width:360px;height:260px;border-radius:32px;padding:26px 22px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px 8px;align-content:start;font:500 11px/14px var(--font);color:#fff;text-align:center}
.launcher.light{background:linear-gradient(160deg,#BFD8CF,#E9E2C8);color:var(--ink)}
.launcher.dark{background:linear-gradient(160deg,#16252B,#0D1518)}
.ph-icon{width:54px;height:54px;border-radius:50%;margin:0 auto 4px;display:grid;place-items:center;background:rgba(255,255,255,.55);color:#2b3a36}
.dark .ph-icon{background:rgba(255,255,255,.14);color:#dfe}
.themed{background:#CFE3DA;color:#16302A}
.dark .themed{background:#9FD1C0;color:#0E211C}
.swatch{width:200px;height:110px;border-radius:24px;display:grid;place-items:center}
/* ===== ẢNH CỬA HÀNG (store.html) — board vẽ đúng kích thước pixel Play yêu cầu, xem thu nhỏ trong gallery.
   scripts/render-store.mjs mở `store.html?only=<id>&lang=<vi|en>` và chụp board 1:1. ===== */
.st-frame{position:relative;flex:none;width:calc(var(--w) * var(--s) * 1px);height:calc(var(--h) * var(--s) * 1px);border-radius:10px;overflow:hidden;box-shadow:0 20px 40px -24px rgba(16,27,24,.5)}
.st-board{position:absolute;left:0;top:0;width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);transform:scale(var(--s));transform-origin:0 0;overflow:hidden;background:var(--canvas);color:var(--ink);font-family:var(--font)}
.st-frame{--s:.34}.st-frame.feature{--w:1024;--h:500;--s:.62}.st-frame.shot{--w:1080;--h:1920;--s:.3}
html[lang=vi] [lang=en],html[lang=en] [lang=vi]{display:none}
.st-only body{padding:0;margin:0;background:var(--canvas)}
.st-only .gal-head,.st-only .gal-sec,.st-only figcaption{display:none}
.st-only figure{margin:0}
.st-only .gal-row{display:block}
.st-only .gal-cell{display:none}.st-only .gal-cell.st-on{display:block}
.st-only .st-frame{--s:1;border-radius:0;box-shadow:none}
.st-only section{margin:0}
.st-board .orb{filter:blur(110px)}
.st-hl{background:linear-gradient(transparent 56%,var(--accent) 56%,var(--accent) 94%,transparent 94%);padding:0 .06em}

/* Ảnh nổi bật 1024×500: Play có thể cắt mép và đặt nút phát giữa ảnh → chữ bên trái, cách mép ≥ 72px. */
.st-feat{position:absolute;left:84px;top:0;bottom:0;width:540px;display:flex;flex-direction:column;justify-content:center;gap:22px}
.st-feat .wm{font-size:76px}
.st-feat-brand{display:flex;align-items:center;gap:22px}
.st-icon{width:112px;height:112px;border-radius:30px;overflow:hidden;flex:none;box-shadow:0 24px 40px -22px rgba(23,86,74,.8)}
.st-icon img{display:block;width:100%;height:100%}
.st-tag{font:600 30px/40px var(--font);color:var(--ink);text-wrap:balance}
.st-pills{display:flex;flex-wrap:wrap;gap:10px}
.st-pills span{font:600 19px/1 var(--font);padding:11px 18px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--hairline);color:var(--ink)}
.st-feat-phone{position:absolute;right:56px;top:46px;width:330px;height:733px;border-radius:44px;overflow:hidden;border:8px solid var(--ink-2);transform:rotate(6deg);box-shadow:0 40px 70px -30px rgba(16,27,24,.7);background:var(--ink-2)}
.st-feat-phone img{display:block;width:100%}

/* Ảnh điện thoại 1080×1920 (Play: cạnh dài ≤ 2× cạnh ngắn): tiêu đề trên, máy tràn mép dưới, cắt thanh trạng thái. */
.st-head{position:absolute;left:90px;right:90px;top:128px;text-align:center}
.st-title{font:800 80px/1.14 var(--font);letter-spacing:-.025em;text-wrap:balance}
.st-sub{margin-top:26px;font:500 38px/1.35 var(--font);color:var(--muted);text-wrap:balance}
.st-device{position:absolute;left:110px;right:110px;top:560px;height:1500px;border-radius:76px;overflow:hidden;border:12px solid var(--ink-2);background:var(--ink-2);box-shadow:0 50px 90px -40px rgba(16,27,24,.75)}
.st-device img{display:block;width:100%;margin-top:-60px}