.pt-wrap{--pt-cell:clamp(38px, 4.2vw, 60px);--pt-gap:2px;container-type:inline-size;overflow-x:auto;margin:var(--vjol-space-4) 0}.pt-toolbar{display:flex;flex-wrap:wrap;gap:var(--vjol-space-3);align-items:center;margin-bottom:var(--vjol-space-4)}.pt-search input{padding:var(--vjol-space-2) var(--vjol-space-3);border:1px solid var(--vjol-color-border);border-radius:var(--vjol-radius-md);font:inherit;min-width:250px}.pt-legend{display:flex;flex-wrap:wrap;gap:var(--vjol-space-2);font-size:var(--vjol-fs-xs)}.pt-legend__item{padding:2px 8px;border-radius:var(--vjol-radius-sm);border:1px solid;line-height:1.4}.pt-cell--nonmetal,.pt-legend__item--nonmetal{background:#d1fae5;border-color:#10b981;color:#065f46}.pt-cell--noble-gas,.pt-legend__item--noble-gas{background:#ede9fe;border-color:#8b5cf6;color:#5b21b6}.pt-cell--alkali,.pt-legend__item--alkali{background:#fee2e2;border-color:#ef4444;color:#991b1b}.pt-cell--alkaline-earth,.pt-legend__item--alkaline-earth{background:#ffedd5;border-color:#f97316;color:#9a3412}.pt-cell--metalloid,.pt-legend__item--metalloid{background:#fef3c7;border-color:#eab308;color:#854d0e}.pt-cell--post-transition,.pt-legend__item--post-transition{background:#e0e7ff;border-color:#6366f1;color:#3730a3}.pt-cell--transition,.pt-legend__item--transition{background:#dbeafe;border-color:#3b82f6;color:#1e40af}.pt-cell--lanthanide,.pt-legend__item--lanthanide{background:#fce7f3;border-color:#ec4899;color:#9d174d}.pt-cell--actinide,.pt-legend__item--actinide{background:#fae8ff;border-color:#a855f7;color:#6b21a8}.pt-cell--halogen,.pt-legend__item--halogen{background:#cffafe;border-color:#06b6d4;color:#155e75}.pt-cell--unknown,.pt-legend__item--unknown{background:#f3f4f6;border-color:#9ca3af;color:#374151}.pt-grid,.pt-fblock{display:grid;gap:var(--pt-gap)}.pt-grid{grid-template-columns:repeat(18,var(--pt-cell));grid-template-rows:repeat(7,var(--pt-cell));min-width:max-content}.pt-fblock{grid-template-columns:3fr repeat(14,var(--pt-cell));grid-template-rows:repeat(2,var(--pt-cell));margin-top:var(--vjol-space-3);min-width:max-content}.pt-fblock::before{content:"Họ Lantan & Actini";grid-column:1;grid-row:1 / 3;align-self:center;text-align:right;padding-right:var(--vjol-space-3);font-size:var(--vjol-fs-xs);color:var(--vjol-color-text-muted)}.pt-fblock .pt-cell{grid-column:calc(var(--col, 1) + 1)}.pt-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1px;border:1px solid;border-radius:var(--vjol-radius-sm);font:inherit;cursor:pointer;transition:transform 0.1s,box-shadow 0.1s,opacity 0.2s;line-height:1;text-align:center;overflow:hidden}.pt-cell:hover,.pt-cell:focus-visible{transform:scale(1.08);z-index:5;box-shadow:0 4px 12px rgba(0,0,0,.2);outline:0}.pt-cell.is-dim{opacity:.15;pointer-events:none}.pt-cell__z{font-size:clamp(8px, 1cqi, 10px);opacity:.7}.pt-cell__sym{font-size:clamp(14px, 2.2cqi, 22px);font-weight:700;margin:2px 0}.pt-cell__name{font-size:clamp(7px, 0.9cqi, 9px)}.pt-cell__mass{font-size:clamp(7px, 0.9cqi, 9px);opacity:.6}@container (max-width:700px){.pt-cell__name,.pt-cell__mass{display:none}}.pt-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--vjol-space-4)}.pt-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.5)}.pt-modal__panel{position:relative;background:var(--vjol-color-bg);border-radius:var(--vjol-radius-lg);padding:var(--vjol-space-6);max-width:480px;width:100%;box-shadow:0 20px 40px rgba(0,0,0,.3)}.pt-modal__close{position:absolute;top:var(--vjol-space-2);right:var(--vjol-space-3);background:transparent;border:0;font-size:28px;cursor:pointer;line-height:1;color:var(--vjol-color-text-muted)}.pt-modal__close:hover{color:var(--vjol-color-text)}.pt-detail__head{display:grid;grid-template-columns:auto auto 1fr;gap:var(--vjol-space-3);align-items:center;padding:var(--vjol-space-4);border-radius:var(--vjol-radius-md);margin-bottom:var(--vjol-space-4);border:1px solid}.pt-detail__z{font-size:14px;opacity:.7}.pt-detail__sym{font-size:48px;font-weight:700}.pt-detail__name{font-size:24px;margin:0}.pt-detail__category{grid-column:1 / -1;font-size:var(--vjol-fs-sm);opacity:.7}.pt-detail__info{display:grid;grid-template-columns:max-content 1fr;gap:var(--vjol-space-2) var(--vjol-space-4);margin:0}.pt-detail__info dt{color:var(--vjol-color-text-muted);font-size:var(--vjol-fs-sm)}.pt-detail__info dd{margin:0}