/*
 * Teacher Detail Profile — Bright & Comfortable
 * Clean white · Sky-blue accent · Sarabun + Inter
 */

@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Inter:wght@400;500;600;700&display=swap');

/* ══════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════ */
:root {
    /* Page background — warm white, not grey */
    --c-bg:           #f6f8ff;
    --c-bg2:          #edf1fb;
    --c-surface:      #ffffff;
    --c-surface2:     #f0f5ff;
    --c-border:       #dce6f5;
    --c-border-soft:  #eaf0fb;

    /* Text — soft dark-blue, not pure black */
    --c-text:         #1e2a45;
    --c-text-2:       #3f5070;
    --c-muted:        #6b80a0;
    --c-light:        #9eb0c8;

    /* Primary — bright sky-blue */
    --c-blue:         #2785e8;
    --c-blue-d:       #1a6fd0;
    --c-blue-bg:      #e8f3ff;
    --c-blue-border:  #b6d8ff;

    /* Secondary — soft teal */
    --c-teal:         #0ea5c8;
    --c-teal-bg:      #e0f7fc;
    --c-teal-border:  #8de8f8;

    /* Accents */
    --c-gold:         #e8a520;
    --c-gold-bg:      #fff8e6;
    --c-gold-border:  #fbe09a;
    --c-green:        #0fa870;
    --c-green-bg:     #e6faf3;
    --c-green-border: #8de8c5;
    --c-violet:       #845ef7;
    --c-violet-bg:    #f2eeff;
    --c-violet-border:#c8b4fd;

    /* Hero — bright sky gradient (light!) */
    --hero-grad:       linear-gradient(135deg, #2785e8 0%, #1aa8d6 50%, #0ec9c0 100%);
    --hero-grad-light: linear-gradient(135deg, #e8f3ff 0%, #d6f0fb 50%, #d0f8f5 100%);

    /* Radius */
    --r-sm:   8px;
    --r-md:   14px;
    --r-lg:   20px;
    --r-xl:   26px;
    --r-full: 999px;

    /* Shadows — very soft, barely visible */
    --shadow-sm:  0 1px 4px rgba(30,42,80,.05), 0 4px 16px rgba(39,133,232,.05);
    --shadow-md:  0 2px 12px rgba(30,42,80,.07), 0 12px 36px rgba(39,133,232,.08);
    --shadow-lg:  0 4px 24px rgba(30,42,80,.09), 0 24px 56px rgba(39,133,232,.1);

    /* Transitions */
    --ease:     cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --dur-fast: .15s;
    --dur-base: .2s;
    --dur-slow: .32s;
}

/* ══════════════════════════════════════════
   BASE
══════════════════════════════════════════ */
.td-body {
    background: var(--c-bg);
    font-family: 'Sarabun', 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: var(--c-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Very light sky wash on the page background */
.td-body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 55% at 10% -5%, rgba(39,133,232,.06) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 90% 110%, rgba(14,201,192,.04) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ══════════════════════════════════════════
   TOP BANNER
══════════════════════════════════════════ */
.td-banner {
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--c-border);
    padding: 5.5rem 0 0;
    position: relative;
    z-index: 10;
}

.td-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 980px;
    margin: 0 auto;
    padding: .65rem 1.5rem .75rem;
}

.td-back-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--c-muted);
    font-size: .87rem;
    font-weight: 600;
    text-decoration: none;
    padding: .38rem .8rem;
    border-radius: var(--r-sm);
    transition: color var(--dur-base) var(--ease),
                background var(--dur-base) var(--ease);
}

.td-back-link i {
    font-size: .76rem;
    transition: transform var(--dur-base) var(--ease);
}

.td-back-link:hover {
    color: var(--c-blue);
    background: var(--c-blue-bg);
    text-decoration: none;
}

.td-back-link:hover i { transform: translateX(-4px); }

.td-banner__label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--c-light);
    letter-spacing: .07em;
    text-transform: uppercase;
}

/* ══════════════════════════════════════════
   MAIN WRAPPER
══════════════════════════════════════════ */
.td-main {
    position: relative;
    z-index: 1;
    max-width: 980px;
    margin: 2rem auto 5rem;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* ══════════════════════════════════════════
   PROFILE HERO CARD
══════════════════════════════════════════ */
.td-profile-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    background: var(--c-surface);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    border: 1px solid var(--c-border);
    position: relative;
    animation: td-rise .5s var(--ease-out) both;
}

/* Thin top accent line */
.td-profile-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--hero-grad);
    z-index: 2;
}

/* Photo column — light sky gradient instead of dark navy */
.td-profile-photo {
    background: var(--hero-grad-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    position: relative;
    overflow: hidden;
    border-right: 1px solid var(--c-border);
}

/* Decorative rings */
.td-profile-photo::before,
.td-profile-photo::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(39,133,232,.08);
}
.td-profile-photo::before { width: 210px; height: 210px; bottom: -70px; right: -60px; }
.td-profile-photo::after  { width: 130px; height: 130px; top: -40px; left: -35px; }

.td-profile-photo img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 165px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top center;
    border-radius: var(--r-md);
    border: 3px solid #fff;
    box-shadow: 0 6px 24px rgba(39,133,232,.18), 0 2px 8px rgba(0,0,0,.08);
    transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}

.td-profile-photo img:hover {
    transform: scale(1.03) translateY(-2px);
    box-shadow: 0 12px 36px rgba(39,133,232,.22), 0 4px 12px rgba(0,0,0,.1);
}

/* Info column */
.td-profile-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .7rem;
    padding: 2.25rem 2.25rem 2rem;
}

/* Academic badge */
.td-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .28rem .9rem;
    border-radius: var(--r-full);
    background: var(--c-blue-bg);
    border: 1px solid var(--c-blue-border);
    color: var(--c-blue);
    font-size: .77rem;
    font-weight: 700;
    width: fit-content;
    letter-spacing: .025em;
    box-shadow: 0 2px 8px rgba(39,133,232,.12);
}

.td-profile-badge i { font-size: .68rem; color: var(--c-teal); }

/* Name — plain strong color (bright + readable) */
.td-profile-name {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.05rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--c-text);
    letter-spacing: -.02em;
}

.td-profile-name-en {
    margin: 0;
    font-size: .97rem;
    color: var(--c-muted);
    font-weight: 400;
    font-style: italic;
}

/* Research profile links */
.td-profile-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--c-border-soft);
    margin-top: .1rem;
}

.td-profile-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .34rem .85rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-border);
    background: #fff;
    color: var(--c-text-2);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-base) var(--ease),
                color var(--dur-base) var(--ease),
                background var(--dur-base) var(--ease),
                box-shadow var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease);
}

.td-profile-link img {
    width: 17px; height: 17px;
    object-fit: contain;
    border-radius: 2px;
}

.td-profile-link:hover {
    border-color: var(--c-blue-border);
    color: var(--c-blue);
    background: var(--c-blue-bg);
    box-shadow: 0 4px 14px rgba(39,133,232,.14);
    transform: translateY(-2px);
    text-decoration: none;
}

/* ══════════════════════════════════════════
   PHOTO MODAL
══════════════════════════════════════════ */

/* Clickable cursor on profile photo */
.td-profile-img-clickable {
    cursor: zoom-in;
}

/* Modal overlay */
.td-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s var(--ease), visibility .28s var(--ease);
}

.td-modal.is-open {
    opacity: 1;
    visibility: visible;
}

/* Frosted backdrop */
.td-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 18, 35, .72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Modal box — size driven by image, constrained to viewport */
.td-modal__box {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .85rem;
    padding: 1.25rem;
    max-width: 96vw;       /* no fixed px cap — fills viewport width */
    max-height: 96vh;
    transform: scale(.88);
    transition: transform .3s var(--ease);
}

.td-modal.is-open .td-modal__box {
    transform: scale(1);
}

/* Close button */
.td-modal__close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: var(--c-text);
    font-size: .95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    transition: background var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
    z-index: 2;
}

.td-modal__close:hover {
    background: var(--c-blue);
    color: #fff;
    transform: scale(1.1) rotate(90deg);
}

/* Image wrapper */
.td-modal__img-wrap {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 72px rgba(0,0,0,.45);
    line-height: 0;
}

/* The image itself — natural size, constrained to viewport */
.td-modal__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 92vw;          /* constrain wide images */
    max-height: calc(94vh - 5rem); /* leave room for caption + padding */
    object-fit: contain;
    border-radius: 14px;
}

/* Caption */
.td-modal__caption {
    font-size: .88rem;
    font-weight: 600;
    color: rgba(255,255,255,.8);
    text-align: center;
    letter-spacing: .01em;
    line-height: 1.4;
}

/* ══════════════════════════════════════════
   STICKY TAB NAV
══════════════════════════════════════════ */
.td-tabs {
    display: flex;
    gap: .3rem;
    padding: .45rem .55rem;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: sticky;
    top: 88px;   /* = site navbar height (5.5rem) */
    z-index: 40;
    animation: td-rise .4s .08s var(--ease-out) both;
}

.td-tabs::-webkit-scrollbar { display: none; }

.td-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex-shrink: 0;
    padding: .45rem 1rem;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    color: var(--c-muted);
    font-size: .87rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}

.td-tab i {
    font-size: .75rem;
    transition: transform var(--dur-base) var(--ease);
}

.td-tab:hover {
    color: var(--c-blue);
    background: var(--c-blue-bg);
    border-color: var(--c-blue-border);
    text-decoration: none;
}

.td-tab:hover i { transform: scale(1.18); }

/* Active tab — bright blue fill */
.td-tab.is-active {
    background: var(--hero-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 12px rgba(39,133,232,.28);
    text-decoration: none;
}

.td-tab.is-active i { color: rgba(255,255,255,.85); }

/* ══════════════════════════════════════════
   SECTION CARDS
══════════════════════════════════════════ */
.td-section {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    scroll-margin-top: 150px;  /* navbar (88px) + tabs (~46px) + gap */
    scroll-padding-top: 150px;
    transition: box-shadow var(--dur-base) var(--ease),
                border-color var(--dur-base) var(--ease);
    animation: td-rise .4s var(--ease-out) both;
}

.td-section:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--c-blue-border);
}

.td-section:nth-child(1) { animation-delay: .05s; }
.td-section:nth-child(2) { animation-delay: .10s; }
.td-section:nth-child(3) { animation-delay: .15s; }
.td-section:nth-child(4) { animation-delay: .20s; }
.td-section:nth-child(5) { animation-delay: .25s; }

@keyframes td-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Section header */
.td-section__head {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.4rem;
    background: linear-gradient(to right, var(--c-bg) 0%, #fff 60%);
    border-bottom: 1px solid var(--c-border-soft);
    position: relative;
}

/* Left color bar */
.td-section__head::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 0 3px 3px 0;
}

.td-section[data-section="1"] .td-section__head::before { background: linear-gradient(to bottom, #2785e8, #60b4ff); }
.td-section[data-section="2"] .td-section__head::before { background: linear-gradient(to bottom, #e8a520, #fcd270); }
.td-section[data-section="3"] .td-section__head::before { background: linear-gradient(to bottom, #0fa870, #50dba0); }
.td-section[data-section="4"] .td-section__head::before { background: linear-gradient(to bottom, #845ef7, #b89afd); }
.td-section[data-section="5"] .td-section__head::before { background: linear-gradient(to bottom, #0ea5c8, #50d5ee); }

/* Section icon */
.td-section__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
    transition: transform var(--dur-base) var(--ease);
}

.td-section:hover .td-section__icon { transform: scale(1.08) rotate(-3deg); }

.td-icon--blue   { background: var(--c-blue-bg);   color: var(--c-blue);   border: 1px solid var(--c-blue-border); }
.td-icon--gold   { background: var(--c-gold-bg);   color: var(--c-gold);   border: 1px solid var(--c-gold-border); }
.td-icon--green  { background: var(--c-green-bg);  color: var(--c-green);  border: 1px solid var(--c-green-border); }
.td-icon--purple { background: var(--c-violet-bg); color: var(--c-violet); border: 1px solid var(--c-violet-border); }
.td-icon--teal   { background: var(--c-teal-bg);   color: var(--c-teal);   border: 1px solid var(--c-teal-border); }

.td-section__title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--c-text);
    line-height: 1.3;
}

.td-section__sub {
    font-size: .71rem;
    color: var(--c-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: .08rem;
}

/* Section body */
.td-section__body { padding: 1.4rem 1.5rem; }

/* Empty state */
.td-empty {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--c-light);
    font-size: .9rem;
    margin: 0;
}

.td-empty::before {
    content: '—';
    font-weight: 700;
    color: var(--c-border);
}

/* ══════════════════════════════════════════
   EDUCATION — matches td-olist style
══════════════════════════════════════════ */

.td-edu-body { padding: 1.25rem; }

/* Group spacing */
.td-edu-group { margin-bottom: 1.4rem; }
.td-edu-group:last-child { margin-bottom: 0; }

/* ── Group header: small uppercase label, same as section divider */
.td-edu-group__header {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 0 .5rem !important;
    margin-bottom: .35rem;
    border-bottom: 1px solid var(--c-border-soft) !important;
}

.td-edu-group__icon { display: none; }

.td-edu-group__label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    text-decoration: none;
}

/* ── Sub-level wrapper (ปริญญาโท / ปริญญาเอก) — indent slightly */
.td-edu-sublevel {
    background: none !important;
    border: none !important;
    padding: .25rem 0 .25rem 1.25rem;   /* indent sublevel under group */
    margin-bottom: .5rem;
}
.td-edu-sublevel:last-child { margin-bottom: 0; }

.td-edu-sublevel--master,
.td-edu-sublevel--doctor {
    background: none !important;
    border: none !important;
}

.td-edu-sublevel__head {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .2rem;
    font-size: .76rem;
    font-weight: 700;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 0;
    border-bottom: none;
}

.td-edu-sublevel--master .td-edu-sublevel__head,
.td-edu-sublevel--doctor .td-edu-sublevel__head { color: var(--c-muted); }

.td-edu-sublevel__head i { display: none; }
.td-edu-sublevel__en    { display: none; }

/* ── Item list — same gap as td-olist, with indent */
.td-edu-cards {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding-left: 1rem;   /* indent items under group/sublevel header */
}

/* ── Each item — SAME style as td-olist li */
.td-edu-card,
.td-edu-card--bachelor,
.td-edu-card--master,
.td-edu-card--doctor {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .65rem .75rem;
    border-radius: var(--r-sm);
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    transition: background var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}

.td-edu-card:hover,
.td-edu-card--bachelor:hover,
.td-edu-card--master:hover,
.td-edu-card--doctor:hover {
    background: var(--c-blue-bg) !important;
    transform: translateX(3px) !important;
    border: none !important;
}

/* Dot → gradient square badge, same as td-olist li::before */
.td-edu-card__dot,
.td-edu-card--bachelor .td-edu-card__dot,
.td-edu-card--master   .td-edu-card__dot,
.td-edu-card--doctor   .td-edu-card__dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--hero-grad);
    box-shadow: 0 2px 6px rgba(39,133,232,.25);
    margin-top: .5rem;
}

.td-edu-card__body { display: flex; flex-direction: column; gap: 0; }

/* Item text — same as td-olist li */
.td-edu-card__name {
    font-size: .95rem;
    font-weight: 400;
    color: var(--c-text);
    line-height: 1.7;
}

.td-edu-card__tag { display: none; }

/* ══════════════════════════════════════════
   AWARDS & EXPERTISE — ordered list
══════════════════════════════════════════ */
.td-olist {
    list-style: none;
    padding: 0; margin: 0;
    counter-reset: ol-counter;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.td-olist li {
    counter-increment: ol-counter;
    display: flex;
    gap: .85rem;
    padding: .65rem .75rem;
    border-radius: var(--r-sm);
    font-size: .95rem;
    color: var(--c-text);
    line-height: 1.7;
    align-items: flex-start;
    transition: background var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}

.td-olist li:hover {
    background: var(--c-blue-bg);
    transform: translateX(3px);
}

.td-olist li::before {
    content: counter(ol-counter);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 7px;
    background: var(--hero-grad);
    color: #fff;
    font-size: .71rem;
    font-weight: 800;
    margin-top: .18rem;
    box-shadow: 0 2px 6px rgba(39,133,232,.25);
}

/* ══════════════════════════════════════════
   PUBLICATIONS
══════════════════════════════════════════ */
.td-pub-body { display: flex; flex-direction: column; gap: .9rem; }

.td-pub-group {
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: box-shadow var(--dur-base) var(--ease),
                border-color var(--dur-base) var(--ease);
}
.td-pub-group:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--c-blue-border);
}

.td-pub-group__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1.1rem;
    background: linear-gradient(to right, var(--c-bg2), #fff);
    border-bottom: 1px solid var(--c-border-soft);
    flex-wrap: wrap;
}

.td-pub-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 7px;
    background: var(--hero-grad);
    color: #fff;
    font-size: .69rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(39,133,232,.25);
}

.td-pub-group__title {
    font-weight: 700;
    font-size: .92rem;
    color: var(--c-text);
}

.td-pub-group__en {
    font-size: .77rem;
    color: var(--c-muted);
    font-weight: 500;
}

.td-pub-group__body { padding: .65rem 1.1rem; }

.td-pub-item {
    display: flex;
    gap: .7rem;
    padding: .55rem .4rem;
    border-bottom: 1px solid var(--c-border-soft);
    align-items: flex-start;
    font-size: .93rem;
    line-height: 1.7;
    border-radius: var(--r-sm);
    transition: background var(--dur-fast) var(--ease);
}
.td-pub-item:last-child { border-bottom: none; }
.td-pub-item:hover { background: var(--c-blue-bg); }

.td-pub-item__idx {
    flex-shrink: 0;
    color: var(--c-light);
    font-size: .78rem;
    font-weight: 700;
    min-width: 2.2rem;
    padding-top: .15rem;
    font-family: 'Inter', sans-serif;
}

.td-pub-item__text {
    color: var(--c-text);
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

/* Fund badge */
.td-fund-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .65rem;
    border-radius: var(--r-full);
    background: var(--c-gold-bg);
    border: 1px solid var(--c-gold-border);
    color: var(--c-gold);
    font-size: .73rem;
    font-weight: 700;
    width: fit-content;
}
.td-fund-badge i { font-size: .65rem; }

/* ══════════════════════════════════════════
   CONTACT
══════════════════════════════════════════ */
.td-contact-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .95rem;
    color: var(--c-text);
    padding: .6rem .75rem;
    border-radius: var(--r-sm);
    transition: background var(--dur-fast) var(--ease);
}
.td-contact-row:hover { background: var(--c-blue-bg); }

.td-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: var(--r-sm);
    background: var(--c-teal-bg);
    border: 1px solid var(--c-teal-border);
    color: var(--c-teal);
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(14,165,200,.12);
    transition: transform var(--dur-base) var(--ease);
}
.td-contact-row:hover .td-contact-icon { transform: scale(1.08); }

/* ══════════════════════════════════════════
   RESPONSIVE — Tablet
══════════════════════════════════════════ */
@media (max-width: 768px) {
    .td-main {
        padding: 0 1rem;
        margin-top: 1.5rem;
        gap: .9rem;
    }
    .td-tabs {
        position: static;
        border-radius: var(--r-md);
    }
    .td-section__body { padding: 1.2rem; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — Mobile
══════════════════════════════════════════ */
@media (max-width: 640px) {
    .td-banner { padding-top: 4.75rem; }

    .td-profile-card {
        grid-template-columns: 1fr;
        border-radius: var(--r-lg);
    }

    .td-profile-photo {
        padding: 2rem 1.5rem 1.75rem;
        border-right: none;
        border-bottom: 1px solid var(--c-border);
    }

    .td-profile-photo img { max-width: 140px; }

    .td-profile-info {
        padding: 1.5rem 1.4rem 1.75rem;
        gap: .6rem;
    }

    .td-profile-name { font-size: 1.55rem; }

    .td-main {
        padding: 0 .85rem;
        margin-top: 1.2rem;
        gap: .8rem;
    }

    .td-section__head { padding: .9rem 1rem; }
    .td-section__body { padding: 1rem; }

    .td-tabs {
        padding: .4rem .5rem;
        gap: .2rem;
    }
    .td-tab {
        padding: .4rem .75rem;
        font-size: .82rem;
    }

    .td-pub-group__body { padding: .6rem .85rem; }
    .td-pub-body { gap: .7rem; }
}