/* ============================================================
   Noti.vn - style riêng của trang Giới thiệu (/about/).
   Nạp SAU ../styles.css và chỉ chứa những gì trang chủ không dùng.
   Token màu, bo góc, bóng đổ, header và footer đều lấy từ styles.css.
   ============================================================ */

/* ---------- Giới thiệu ---------- */

.about-wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

/* Ô lưới mặc định là min-width:auto nên nội dung không xuống dòng được
   sẽ đẩy rộng cả trang. Ép về 0 để phần cắt chữ hoạt động đúng. */
.about-wrap > * { min-width: 0; }

.profile {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.75rem;
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--glass-top), var(--sh-1);
    position: sticky;
    top: calc(var(--head-h) + 24px);
}

.profile-photo {
    display: block;
    margin-bottom: 1.35rem;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-2);
}

.profile-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.profile-name { font-size: 1.4rem; }

.profile-role {
    margin-top: 0.3rem;
    margin-bottom: 1.5rem;
    font-size: 0.88rem;
    color: var(--ink-3);
}

.profile-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.profile-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    padding: 0.7rem 0.85rem;
    border-radius: var(--r-sm);
    transition: background-color var(--t), transform var(--t);
}

.profile-link:hover {
    background: var(--tint);
    transform: translateX(4px);
}

.pl-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--r-sm);
    background: var(--tint);
    color: var(--blue);
}

.pl-icon svg { width: 17px; height: 17px; }

.pl-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pl-text strong {
    font-size: 0.9rem;
    font-weight: 600;
}

.pl-text span {
    font-size: 0.76rem;
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.about-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.bio {
    padding: 1.75rem;
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--glass-top), var(--sh-1);
}

.bio-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.bio-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-3);
}

#shortBio {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--ink-2);
}

.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0.5rem 1rem;
    border-radius: var(--r-pill);
    background: var(--tint);
    color: var(--blue);
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--t), color var(--t), transform var(--t);
}

.copy-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.copy-btn:hover { background: var(--tint-2); transform: translateY(-1px); }
.copy-btn:active { transform: translateY(0); }

.copy-btn.is-copied {
    background: rgba(16, 185, 129, 0.14);
    color: #059669;
}

.copy-btn.is-failed {
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
}

[data-theme="dark"] .copy-btn.is-copied { background: rgba(52, 211, 153, 0.16); color: #34d399; }
[data-theme="dark"] .copy-btn.is-failed { background: rgba(248, 113, 113, 0.16); color: #f87171; }

.about-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.about-tile {
    padding: 1.5rem;
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--glass-top), var(--sh-1);
    transition: transform var(--t-smooth), box-shadow var(--t-smooth);
}

.about-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--glass-top), var(--sh-2);
}

.about-tile h3 {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.about-tile p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ink-2);
}

/* Nút mở phần tiểu sử chi tiết. Hai nhãn nằm sẵn trong DOM, đổi qua lại bằng
   aria-expanded để bản dịch VI/EN không phải xử lý bằng JavaScript. */
.more-btn {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.6rem 1.35rem;
    border-radius: var(--r-pill);
    background: var(--tint);
    color: var(--blue);
    font-size: 0.92rem;
    font-weight: 600;
    transition: background-color var(--t);
}

.more-btn:hover { background: var(--tint-2); }

.more-btn svg {
    width: 16px;
    height: 16px;
    transition: transform var(--t);
}

.more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.more-btn .lbl-less { display: none; }
.more-btn[aria-expanded="true"] .lbl-more { display: none; }
.more-btn[aria-expanded="true"] .lbl-less { display: inline; }

.bio-long {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    animation: rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bio-long article {
    padding: 1.5rem;
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--glass-top), var(--sh-1);
}

.bio-long h3 {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--blue);
}

.bio-long p {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--ink-2);
}

/* ---------- Tài nguyên thương hiệu ---------- */

.assets {
    max-width: var(--maxw);
    margin: 3rem auto 0;
}

.assets-title,
.events-title {
    display: block;
    margin-bottom: 1.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-3);
    text-align: center;
}

.asset-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.asset {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    padding: 1.5rem;
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--glass-top), var(--sh-1);
}

.asset-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 84px;
    padding: 1rem;
    border-radius: var(--r-md);
    overflow: hidden;
}

.asset-preview img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.preview-light { background: #ffffff; }
.preview-dark { background: #0b1220; }

.preview-photo { padding: 0; }

.preview-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.asset-name {
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
}


/* Câu nguyên tắc làm nghề, đặt nổi hơn phần bio còn lại. */
.principle {
    padding: 1.75rem;
    border-radius: var(--r-lg);
    background: var(--tint);
}

.principle .bio-label { display: block; margin-bottom: 0.6rem; color: var(--blue); }

.principle p {
    font-size: 1.05rem;
    line-height: 1.65;
    font-weight: 500;
    color: var(--ink);
}


/* ---------- Sự kiện đã tổ chức ---------- */

.events {
    max-width: var(--maxw);
    margin: 4rem auto 0;
}

.event-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.event {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--glass-top), var(--sh-1);
    overflow: hidden;
    transition: transform var(--t-smooth), box-shadow var(--t-smooth);
}

.event:hover {
    transform: translateY(-6px);
    box-shadow: var(--glass-top), var(--sh-2), var(--glow);
}

/* aspect-ratio giữ sẵn chỗ cho ảnh nên trang không bị giật khi ảnh tải xong. */
.event-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--tint);
    overflow: hidden;
}

.event-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-smooth);
}

/* Sự kiện chưa có ảnh tư liệu: dùng nền gradient thương hiệu thay vì để trống,
   giữ nhịp lưới đều với các thẻ có ảnh. */
.event-media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--grad);
    color: #fff;
}

.event-media--empty svg {
    width: 46px;
    height: 46px;
    opacity: 0.92;
}

/* Thẻ không có link thì bỏ hiệu ứng nhấc lên, tránh gây cảm giác bấm được. */
.event-static { cursor: default; }

.event-static:hover {
    transform: none;
    box-shadow: var(--glass-top), var(--sh-1);
}

.event:hover .event-media img { transform: scale(1.05); }

.event-action {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    box-shadow: var(--glass-top), var(--sh-1);
    color: var(--blue);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--t), transform var(--t);
}

.event:hover .event-action,
.event:focus-visible .event-action {
    opacity: 1;
    transform: none;
}

.event-action svg { width: 17px; height: 17px; }

/* Nút play luôn hiện: nó là dấu hiệu duy nhất cho biết thẻ này là video. */
.event-play {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 56px;
    height: 56px;
    transform: translate(-50%, -50%);
    opacity: 1;
}

.event:hover .event-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
}

.event-play svg {
    width: 24px;
    height: 24px;
    margin-left: 2px;   /* cân thị giác cho hình tam giác */
}

.event-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1.25rem;
}

.event-date {
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--blue);
    font-variant-numeric: tabular-nums;
}

.event-name {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.event-note {
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--ink-3);
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
    .about-wrap {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-width: 760px;
    }

    .profile { position: static; }

    .event-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .profile { padding: 1.25rem; }
    .profile-photo { max-width: 220px; margin-left: auto; margin-right: auto; }
    .profile-name, .profile-role { text-align: center; }
    .profile-link { padding: 0.8rem; }

    .bio, .about-tile, .bio-long article { padding: 1.35rem; }
    .about-tiles { grid-template-columns: 1fr; gap: 0.75rem; }
    .bio-long { grid-template-columns: 1fr; gap: 0.75rem; }
    .principle { padding: 1.35rem; }

    .bio-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .copy-btn { min-height: 44px; }
    .more-btn { align-self: stretch; justify-content: center; }

    .assets { margin-top: 2rem; }
    .asset-grid { grid-template-columns: 1fr; gap: 0.75rem; }

    .asset {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
    }

    .asset-preview { width: 76px; height: 56px; flex-shrink: 0; padding: 0.6rem; }
    .asset-name { flex-grow: 1; min-width: 0; text-align: left; }

    .events { margin-top: 2.5rem; }
    .event-grid { grid-template-columns: 1fr; gap: 1rem; }
    .event-body { padding: 1.1rem; }
    .event-play { width: 48px; height: 48px; }
    .event-play svg { width: 20px; height: 20px; }

    /* Không có hover trên di động nên để nút phóng to hiện sẵn. */
    .event-action { opacity: 1; transform: none; }
}

@media (max-width: 460px) {
    .asset-name { font-size: 0.84rem; }
    .copy-btn { padding: 0.5rem 0.8rem; font-size: 0.8rem; }
}

/* Thiết bị cảm ứng: hiệu ứng hover bị dính lại sau khi chạm. */
@media (hover: none) {
    .about-tile:hover,
    .copy-btn:hover,
    .profile-link:hover,
    .event:hover {
        transform: none;
    }

    .event:hover .event-media img { transform: none; }
    .event-action { opacity: 1; transform: none; }
    .event:hover .event-play { transform: translate(-50%, -50%); }
}