/* PDL-STAMP © 2026 PDL Digital – https://pdl.vn · phu@pdl.vn · Zalo 0961330088 · PDL-HUB-4DD694/hub-app.css 3E5BFF */
/* hub-app.css – ô tìm kiếm thông minh, lưới mẫu, popup xem thử (desktop/tablet/mobile), palette lệnh */

/* ---------- ô tìm kiếm ---------- */
.finder { position: relative; z-index: 20; margin-bottom: 1.6rem; }
.finder__box { position: relative; display: flex; align-items: center; gap: .4rem; padding: .45rem .55rem .45rem 1rem; border-radius: 22px; background: var(--pdl-surface); border: 1px solid var(--line2); box-shadow: 0 24px 60px -36px rgba(15, 34, 66, .45); transition: box-shadow .35s, border-color .35s; }
.finder__box::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--ang), transparent 0 55%, var(--pdl-navy-500) 72%, var(--pdl-accent) 86%, var(--pdl-accent-strong) 96%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .35s; pointer-events: none; animation: spin 3.2s linear infinite; }
.finder__box:focus-within { border-color: transparent; box-shadow: 0 24px 70px -32px rgba(249, 115, 0, .6); } .finder__box:focus-within::before { opacity: 1; }
@keyframes spin { to { --ang: 360deg; } }
.finder__ico { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; color: var(--ink-on); background: var(--grad); animation: spark 3s ease-in-out infinite; } @keyframes spark { 50% { transform: rotate(14deg) scale(1.08); box-shadow: 0 0 22px rgba(249, 115, 0, .45); } }
.finder input { flex: 1; min-width: 0; padding: .85rem .5rem; border: 0; outline: none; background: transparent; color: var(--ink); font: 500 1.05rem var(--ff); } .finder input::placeholder { color: var(--dim); } .finder input::-webkit-search-cancel-button { display: none; }
.finder__btn { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; border: 0; background: transparent; color: var(--mute); transition: background .2s, color .2s; } .finder__btn:hover { background: rgba(25, 48, 89, .08); color: var(--ink); } .finder__btn[hidden] { display: none; } .finder__btn.is-live { color: #fff; background: var(--pdl-danger); animation: rec 1.2s ease-in-out infinite; } @keyframes rec { 50% { box-shadow: 0 0 0 8px rgba(194, 40, 38, .2); } }
.finder__kbd { margin-right: .4rem; } @media (hover: none), (max-width: 640px) { .finder__kbd { display: none; } }
.sugg { position: absolute; left: 0; right: 0; top: calc(100% + 10px); max-height: min(62vh, 520px); overflow: auto; padding: .45rem; border-radius: 18px; background: rgba(255, 253, 249, .98); backdrop-filter: blur(20px); border: 1px solid var(--line2); box-shadow: 0 30px 80px -20px rgba(15, 34, 66, .30); z-index: 60; animation: suggIn .25s var(--ease); } .sugg[hidden] { display: none; } @keyframes suggIn { from { opacity: 0; transform: translateY(-6px); } }
.sugg__h { padding: .55rem .75rem .3rem; font: 500 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.sugg__i { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: 12px; cursor: pointer; } .sugg__i[aria-selected="true"], .sugg__i:hover { background: var(--pdl-primary-subtle); }
.sugg__i img { width: 44px; height: 30px; border-radius: 7px; object-fit: cover; flex: none; } .sugg__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: none; background: rgba(25, 48, 89, .07); color: var(--o3); font-size: .8rem; }
.sugg__t { flex: 1; min-width: 0; line-height: 1.3; } .sugg__t b { display: block; font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sugg__t small { color: var(--mute); font-size: .78rem; }
.sugg__k { flex: none; font: 500 .66rem var(--mono); padding: .16rem .5rem; border-radius: 99px; border: 1px solid var(--line2); color: var(--mute); } .sugg__k[data-k="n"], .sugg__k[data-k="g"] { color: var(--o3); border-color: rgba(249, 115, 0, .45); } .sugg__k[data-k="f"] { color: var(--o3); border-color: rgba(249, 115, 0, .45); } .sugg__k[data-k="s"] { color: var(--o2); border-color: rgba(46, 93, 174, .5); }
.sugg__n { flex: none; font-size: .76rem; color: var(--dim); }
.finder__ex { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .9rem; font-size: .84rem; color: var(--mute); }
.finder__ex button { padding: .32rem .8rem; border-radius: 99px; border: 1px solid var(--line); background: rgba(25, 48, 89, .03); color: var(--mute); font-size: .82rem; transition: color .2s, border-color .2s, background .2s, transform .25s var(--ease); } .finder__ex button:hover { color: var(--ink); border-color: var(--pdl-navy-300); background: var(--pdl-primary-subtle); transform: translateY(-1px); }
@media (max-width: 700px) { .finder__ex { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); } .finder__ex::-webkit-scrollbar { display: none; } .finder__ex button, .finder__ex span { flex: none; white-space: nowrap; } }
.finder__why { margin-top: 1rem; padding: .95rem 1.1rem; border-radius: 18px; border: 1px dashed var(--line2); background: var(--pdl-accent-subtle); display: grid; gap: .65rem; animation: suggIn .35s var(--ease); } .finder__why[hidden] { display: none; }
.why__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .why__l { font: 500 .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-right: .2rem; }
.cpill { display: inline-flex; align-items: center; gap: .45rem; padding: .28rem .35rem .28rem .7rem; border-radius: 99px; font-size: .84rem; border: 1px solid var(--line2); background: rgba(25, 48, 89, .05); animation: pop .35s var(--ease) both; } .cpill small { font: 500 .64rem var(--mono); text-transform: uppercase; opacity: .75; }
.cpill[data-k="n"], .cpill[data-k="g"] { border-color: rgba(249, 115, 0, .55); background: rgba(249, 115, 0, .12); } .cpill[data-k="f"] { border-color: rgba(249, 115, 0, .55); background: rgba(249, 115, 0, .1); } .cpill[data-k="s"] { border-color: rgba(46, 93, 174, .6); background: rgba(46, 93, 174, .12); } .cpill[data-k="soft"] { border-style: dashed; opacity: .8; }
.cpill button { width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(25, 48, 89, .1); color: var(--ink); font-size: .9rem; line-height: 1; } .cpill button:hover { background: rgba(25, 48, 89, .25); }
.why__sum { font-size: .92rem; color: var(--ink); } .why__sum b { color: var(--o3); } .why__sum span { color: var(--mute); }
.why__act { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; font-size: .84rem; color: var(--mute); } .why__act button { padding: .28rem .75rem; border-radius: 99px; border: 1px solid var(--line2); background: rgba(25, 48, 89, .05); font-size: .82rem; color: var(--ink); } .why__act button:hover { border-color: var(--pdl-navy-300); background: var(--pdl-primary-subtle); }
.why__fix { font-size: .84rem; color: var(--mute); } .why__fix em { color: var(--o3); font-style: normal; font-weight: 600; }

/* ---------- bộ lọc ---------- */
.tools { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .9rem 1.4rem; margin: 1.6rem 0 .8rem; } .tools__r { display: flex; align-items: center; gap: 1rem; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; } .chips--feat { margin-bottom: 1.6rem; }
@media (max-width: 760px) { .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); } .chips::-webkit-scrollbar { display: none; } .chips .fchip { flex: none; } .tools { gap: .6rem; } .tools > .chips { width: calc(100% + 2 * var(--gut)); } }
.fchip { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .9rem; border-radius: 99px; border: 1px solid var(--line); background: rgba(25, 48, 89, .03); color: var(--mute); font-size: .86rem; font-weight: 500; white-space: nowrap; transition: color .2s, border-color .2s, background .2s, transform .25s var(--ease); } .fchip:hover { color: var(--ink); border-color: var(--line2); transform: translateY(-1px); } .fchip em { font-style: normal; font-size: .74rem; opacity: .65; font-family: var(--mono); }
.fchip[aria-pressed="true"] { color: var(--pdl-on-primary); background: var(--pdl-primary); border-color: transparent; font-weight: 600; box-shadow: 0 8px 24px -12px rgba(15, 34, 66, .6); } .chips--feat .fchip[aria-pressed="true"] { background: var(--pdl-accent-subtle); color: var(--pdl-accent-text); border-color: var(--pdl-accent-text); box-shadow: none; }
.chips--feat::before { content: 'Tính năng:'; align-self: center; font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); margin-right: .3rem; flex: none; }
.toggle { display: inline-flex; align-items: center; gap: .6rem; font-size: .88rem; color: var(--mute); cursor: pointer; } .toggle input { position: absolute; opacity: 0; pointer-events: none; } .toggle__sw { position: relative; width: 42px; height: 24px; border-radius: 99px; background: rgba(25, 48, 89, .12); transition: background .3s; flex: none; } .toggle__sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); } .toggle input:checked + .toggle__sw { background: var(--pdl-primary); } .toggle input:checked + .toggle__sw::after { transform: translateX(18px); } .toggle input:focus-visible + .toggle__sw { outline: 2px solid var(--pdl-focus); outline-offset: 3px; }
.count { font: 500 .8rem var(--mono); color: var(--mute); white-space: nowrap; } .count b { color: var(--o3); }

/* ---------- lưới + thẻ mẫu ---------- */
.grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1240px) { .grid { grid-template-columns: repeat(4, 1fr); } }
.card { position: relative; container-type: inline-size; border-radius: 20px; background: var(--pdl-surface); border: 1px solid var(--line); box-shadow: 0 14px 34px -28px rgba(15, 34, 66, .45); overflow: hidden; transform: perspective(900px) translateY(var(--ty, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s ease-out, border-color .3s, box-shadow .3s; }
.card:hover { --ty: -4px; }
.card::before { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(249, 115, 0, .1), transparent 60%); opacity: 0; transition: opacity .3s; } .card:hover::before { opacity: 1; } .card:hover, .card:focus-within { border-color: var(--pdl-navy-300); box-shadow: 0 30px 60px -30px rgba(15, 34, 66, .45); }
.card[hidden], .grid__sep[hidden] { display: none; } .card.is-in { animation: cardIn .55s var(--ease) both; } @keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.card__a { display: block; height: 100%; color: inherit; text-decoration: none !important; }
.card__img { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c, #1c1917); } .card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .card:hover .card__img img { transform: scale(1.08); } .card__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 25, 50, .6), transparent 50%); }
.card__no, .card__badge { position: absolute; top: .65rem; z-index: 2; font: 500 .68rem var(--mono); padding: .18rem .55rem; border-radius: 99px; } .card__no { left: .65rem; background: rgba(10, 25, 50, .7); backdrop-filter: blur(6px); color: var(--mute); } .card__badge { right: .65rem; background: var(--grad); color: var(--ink-on); font-weight: 700; }
.card__body { display: grid; gap: .32rem; padding: .95rem 1.05rem 1.15rem; } .card__grp { font: 500 .66rem var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--o3); }
.card h3 { font-size: 1.08rem; line-height: 1.25; } .card__ind { font-size: .84rem; color: var(--mute); } .card__hook { font-size: .8rem; color: var(--dim); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__mods { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; } .card__mods li { font-size: .68rem; padding: .12rem .5rem; border-radius: 99px; background: var(--pdl-primary-subtle); color: var(--pdl-navy-700); }
.card__quick { position: absolute; z-index: 5; left: 50%; top: calc(31.25cqw - 20px); display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: 99px; border: 0; background: var(--grad); color: var(--ink-on); font-weight: 700; font-size: .84rem; box-shadow: 0 12px 30px -10px rgba(198, 83, 0, .7); opacity: 0; transform: translate(-50%, 10px) scale(.92); transition: opacity .3s, transform .35s var(--ease); } .card:hover .card__quick, .card:focus-within .card__quick, .card__quick:focus-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
@media (hover: none) { .card__quick { opacity: 1; transform: none; left: auto; right: .65rem; top: calc(62.5cqw - 44px); padding: .4rem .8rem; font-size: .76rem; } .card:hover .card__quick { transform: none; } }
.card__why { position: absolute; z-index: 3; left: .6rem; right: .6rem; top: calc(62.5cqw - 2.7rem); display: flex; flex-wrap: wrap; gap: .3rem; pointer-events: none; } .card__why[hidden] { display: none; }
.card__why span { font-size: .66rem; font-weight: 600; padding: .14rem .5rem; border-radius: 99px; background: rgba(10, 25, 50, .72); color: var(--o4); border: 1px solid rgba(255, 146, 77, .55); backdrop-filter: blur(6px); animation: pop .4s var(--ease) both; } .card__why span[data-k="n"] { background: var(--pdl-accent-strong); border-color: var(--pdl-accent-strong); color: #fff; } .card__why span[data-k="r"] { background: rgba(10, 25, 50, .72); border-color: var(--line2); color: var(--mute); }
.card.is-ranked::after { content: ''; position: absolute; left: 0; top: 0; z-index: 6; height: 3px; width: var(--pct, 0%); background: var(--grad-deco); box-shadow: 0 0 12px var(--o1); border-radius: 0 3px 3px 0; transition: width .6s var(--ease); } .card.is-near { opacity: .82; } .card.is-near:hover { opacity: 1; }
.grid__sep { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; margin: .8rem 0 .2rem; font: 500 .78rem var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--o3); } .grid__sep::before, .grid__sep::after { content: ''; flex: 1; height: 1px; background: var(--line2); }
.empty { padding: 3rem 1rem; text-align: center; color: var(--mute); border: 1px dashed var(--line2); border-radius: 20px; } .empty[hidden] { display: none; } .empty button { margin: .3rem .15rem; padding: .35rem .85rem; border-radius: 99px; border: 1px solid var(--line2); background: rgba(25, 48, 89, .05); color: var(--ink); } .empty button:hover { border-color: var(--pdl-navy-300); background: var(--pdl-primary-subtle); }
mark { background: transparent; color: var(--o3); font-weight: 700; } .card mark { color: inherit; box-shadow: inset 0 -.35em 0 rgba(249, 115, 0, .22); }

/* ---------- popup xem thử toàn màn hình ---------- */
.pv { position: fixed; inset: 0; z-index: 1000; display: none; } .pv.is-open { display: block; }
.pv__bg { position: absolute; inset: 0; background: rgba(3, 9, 23, .82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.pv__win { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: radial-gradient(1100px 520px at 50% -12%, rgba(64, 116, 202, .22), transparent 62%), var(--pdl-bg-dark); transform-origin: var(--ox, 50%) var(--oy, 50%); }
.pv.is-open .pv__win { animation: pvIn .6s var(--ease) both; } .pv.is-closing .pv__win { animation: pvOut .38s var(--ease) both; } .pv.is-closing .pv__bg { transition: opacity .38s; opacity: 0; }
@keyframes pvIn { from { transform: scale(.16); opacity: 0; border-radius: 48px; } to { transform: none; opacity: 1; border-radius: 0; } } @keyframes pvOut { to { transform: scale(.16); opacity: 0; border-radius: 48px; } }
.pv__bar { display: flex; align-items: center; gap: .8rem; padding: .6rem clamp(.7rem, 2vw, 1.3rem); border-bottom: 1px solid var(--line); background: rgba(10, 25, 50, .75); backdrop-filter: blur(12px); }
.pv__id { display: flex; align-items: center; gap: .65rem; min-width: 0; flex: 1 1 220px; } .pv__id img { flex: none; filter: drop-shadow(0 0 10px rgba(249, 115, 0, .6)); } .pv__id div { min-width: 0; line-height: 1.25; } .pv__id h2 { font: 700 .98rem var(--ff); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv__id p { font-size: .76rem; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv__dev { display: inline-flex; flex: none; padding: .22rem; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); } .pv__dev button { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .85rem; border: 0; border-radius: 99px; background: transparent; color: var(--mute); font-weight: 600; font-size: .84rem; transition: background .3s, color .3s; } .pv__dev button[aria-checked="true"] { background: var(--grad); color: var(--ink-on); box-shadow: 0 6px 18px -8px rgba(198, 83, 0, .9); } .pv__dev button:not([aria-checked="true"]):hover { color: var(--ink); }
.pv__act { display: flex; align-items: center; gap: .3rem; flex: none; margin-left: auto; }
.ib { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; border: 1px solid transparent; background: transparent; color: var(--mute); transition: background .2s, color .2s, border-color .2s; } .ib:hover { background: rgba(255, 255, 255, .09); color: var(--ink); } .ib[aria-pressed="true"] { color: var(--o3); background: rgba(249, 115, 0, .14); border-color: rgba(249, 115, 0, .4); } .ib[disabled] { opacity: .35; pointer-events: none; } .ib--x { background: rgba(255, 255, 255, .08); color: var(--ink); } .ib--x:hover { background: var(--pdl-danger); }
.pv__nav { display: inline-flex; align-items: center; gap: .15rem; flex: none; } .pv__nav span { font: 500 .72rem var(--mono); color: var(--dim); min-width: 4.2ch; text-align: center; }
.pv__tabs { display: flex; gap: .4rem; padding: .5rem clamp(.7rem, 2vw, 1.3rem); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); background: rgba(10, 25, 50, .5); } .pv__tabs::-webkit-scrollbar { display: none; } .pv__tabs[hidden] { display: none; }
.pv__tabs button { flex: none; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--mute); font-size: .82rem; font-weight: 500; transition: background .25s, color .25s, border-color .25s; } .pv__tabs button i { font: 500 .62rem var(--mono); font-style: normal; opacity: .6; } .pv__tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--o1); background: rgba(249, 115, 0, .16); } .pv__tabs button:hover { color: var(--ink); }
.pv__stage { position: relative; overflow: auto; display: flex; padding: 1rem; min-height: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .03) 1px, transparent 1.5px) 0 0 / 22px 22px; }
.pv__dim { position: absolute; left: 50%; top: .55rem; transform: translateX(-50%); z-index: 3; font: 500 .72rem var(--mono); color: var(--mute); padding: .2rem .7rem; border-radius: 99px; background: rgba(0, 0, 0, .55); border: 1px solid var(--line); pointer-events: none; white-space: nowrap; }
.pv__scale { position: relative; flex: none; margin: auto; width: calc(var(--fw) * var(--s) * 1px); height: calc(var(--fh) * var(--s) * 1px); transition: --fw .55s var(--ease), --fh .55s var(--ease), --s .55s var(--ease), --pad .55s var(--ease), --bar .55s var(--ease), --rad .55s var(--ease); }
.dev { position: absolute; left: 0; top: 0; width: calc(var(--fw) * 1px); height: calc(var(--fh) * 1px); transform: scale(var(--s)); transform-origin: 0 0; padding: calc(var(--pad) * 1px); border-radius: calc(var(--rad) * 1px); background: #1e2735; border: 1px solid var(--line2); box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .95), 0 0 140px -40px rgba(249, 115, 0, .6); display: flex; flex-direction: column; }
.dev__bar { height: calc(var(--bar) * 1px); flex: none; display: flex; align-items: center; gap: 7px; padding: 0 14px; overflow: hidden; } .dev__bar i { width: 10px; height: 10px; border-radius: 50%; background: #424b5a; flex: none; } .dev__bar i:nth-child(1) { background: #ff6b4a; } .dev__bar i:nth-child(2) { background: #FBAD41; } .dev__bar i:nth-child(3) { background: #5fd68a; }
.dev__bar em { flex: 1; max-width: 560px; margin: 0 auto; padding: .15rem .9rem; border-radius: 99px; background: rgba(255, 255, 255, .06); font: 500 12px var(--mono); font-style: normal; color: var(--mute); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translateX(-30px); }
.dev__scr { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #fff; border-radius: calc(var(--rad) * .5px); } .dev__scr iframe { max-width: none; width: 100%; height: 100%; border: 0; background: #fff; opacity: 0; transition: opacity .5s; } .dev__scr.is-ready iframe { opacity: 1; }
.dev__load { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #1d3b71, #0a1932); transition: opacity .4s, visibility .4s; } .dev__scr.is-ready .dev__load { opacity: 0; visibility: hidden; }
.dev__load i { width: 54px; height: 54px; border-radius: 50%; border: 3px solid rgba(249, 115, 0, .2); border-top-color: var(--o1); animation: rot .8s linear infinite; } @keyframes rot { to { transform: rotate(360deg); } }
.dev::after { content: ''; position: absolute; left: 50%; bottom: 7px; width: 34%; height: 5px; margin-left: -17%; border-radius: 4px; background: rgba(255, 255, 255, .35); opacity: 0; } .dev[data-dev="mobile"]::after { opacity: 1; }
.dev[data-dev="mobile"]::before { content: ''; position: absolute; left: 50%; top: 12px; width: 26%; height: 14px; margin-left: -13%; border-radius: 10px; background: #000; z-index: 3; }
.dev--bare { border: 0; box-shadow: none; background: #fff; } .dev--bare::before, .dev--bare::after { display: none !important; }
.pv__stage:has(.dev--bare) .pv__dim { display: none; }
.pv__foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .6rem clamp(.7rem, 2vw, 1.3rem); border-top: 1px solid var(--line); background: rgba(10, 25, 50, .75); font-size: .84rem; }
.pv__hook { flex: 1 1 320px; min-width: 0; color: var(--mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pv__hook b { color: var(--o3); }
.pv__mods { display: flex; flex-wrap: wrap; gap: .3rem; } .pv__mods li { font-size: .7rem; padding: .14rem .55rem; border-radius: 99px; border: 1px solid rgba(249, 115, 0, .4); background: rgba(249, 115, 0, .1); color: var(--o4); }
.pv__keys { margin-left: auto; font: 500 .7rem var(--mono); color: var(--dim); }
.pv__qr { position: absolute; z-index: 20; right: clamp(.7rem, 2vw, 1.3rem); top: 64px; width: 220px; padding: 1rem; border-radius: 18px; background: rgba(15, 34, 66, .98); border: 1px solid var(--line2); box-shadow: 0 30px 80px -20px #000; text-align: center; animation: suggIn .25s var(--ease); } .pv__qr[hidden] { display: none; } .pv__qr canvas, .pv__qr img { margin: 0 auto; border-radius: 10px; background: #fff; padding: 8px; } .pv__qr p { margin-top: .6rem; font-size: .74rem; color: var(--mute); word-break: break-all; line-height: 1.4; } .pv__qr b { display: block; font-size: .82rem; margin-bottom: .6rem; }
@media (max-width: 900px) { .pv__dev button span { display: none; } .pv__dev button { padding: .45rem .7rem; } .pv__keys { display: none; } .pv__id p { display: none; } }
@media (max-width: 640px) { .pv__bar { flex-wrap: wrap; row-gap: .4rem; } .pv__id { flex-basis: calc(100% - 52px); } .pv__nav span { display: none; } .ib--hm { display: none; } .pv__foot { display: none; } .pv__act { margin-left: 0; order: 3; width: 100%; justify-content: space-between; } .pv__dev { order: 2; margin-left: auto; } .pv__stage { padding: .5rem; } .pv__dim { top: .3rem; } }

/* ---------- palette lệnh (Ctrl/Cmd + K) ---------- */
.pal { position: fixed; inset: 0; z-index: 1200; display: none; padding: 12vh 1rem 1rem; } .pal.is-open { display: block; } .pal__bg { position: absolute; inset: 0; background: rgba(15, 34, 66, .45); backdrop-filter: blur(10px); }
.pal__box { position: relative; width: min(680px, 100%); margin-inline: auto; border-radius: 22px; background: rgba(255, 253, 249, .98); border: 1px solid var(--line2); box-shadow: 0 40px 120px -20px rgba(15, 34, 66, .45); overflow: hidden; animation: palIn .35s var(--ease); } @keyframes palIn { from { opacity: 0; transform: translateY(-14px) scale(.97); } }
.pal__in { display: flex; align-items: center; gap: .7rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); } .pal__in svg { color: var(--o3); flex: none; } .pal__in input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ink); font: 500 1.1rem var(--ff); } .pal__in input::placeholder { color: var(--dim); }
.pal__list { max-height: min(56vh, 460px); overflow: auto; padding: .4rem; } .pal__foot { display: flex; gap: 1rem; padding: .55rem 1.1rem; border-top: 1px solid var(--line); font: 500 .68rem var(--mono); color: var(--dim); }
.toast { position: fixed; left: 50%; bottom: 1.6rem; z-index: 1300; transform: translate(-50%, 20px); opacity: 0; padding: .6rem 1.1rem; border-radius: 99px; background: var(--pdl-bg-dark); border: 1px solid var(--pdl-accent); color: var(--ink); font-size: .88rem; box-shadow: 0 14px 40px -10px rgba(15, 34, 66, .5); transition: opacity .3s, transform .4s var(--ease); pointer-events: none; } .toast.is-on { opacity: 1; transform: translate(-50%, 0); }