/* ============================================================
   Periodic Table — bảng tuần hoàn tương tác
   Grid 18 cột × 7 hàng + f-block 2 hàng × 14 cột
   ============================================================ */

.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;
}

/* Categories — colors shared bởi cell + legend */
.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,0.2);
    outline: 0;
}
.pt-cell.is-dim {
    opacity: 0.15;
    pointer-events: none;
}

.pt-cell__z { font-size: clamp(8px, 1cqi, 10px); opacity: 0.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: 0.6; }

@container (max-width: 700px) {
    .pt-cell__name,
    .pt-cell__mass { display: none; }
}

/* Modal */
.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,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,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: 0.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: 0.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; }