/* ═══════════════════════════════════════════════════════════════════════════
   TRANG CHỦ — trang-chu.css   v1.2.0
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --tc-orange:  #ff7200;
    --tc-black:   #111111;
    --tc-white:   #ffffff;
    --tc-text:    #333333;
    --tc-muted:   #666666;
    --tc-border:  #e5e7eb;
    --tc-boxed:   1200px;
    --tc-radius:  12px;
    --tc-shadow:  0 4px 20px rgba(0,0,0,.10);
    --tc-nav-h:   68px;
}

.tc-page { font-size: inherit; font-family: inherit; line-height: inherit; }
.tc-page *, .tc-page *::before, .tc-page *::after { box-sizing: border-box; }
.tc-page a { text-decoration: none; }
.tc-page img { max-width: 100%; display: block; }

.tc-boxed { max-width: var(--tc-boxed); margin: 0 auto; padding: 0 24px; }
.tc-section { padding: 64px 0; }
.tc-section--orange-bg { background-color: rgba(255,114,0,.10); }

.tc-section__title {
    font-size: 40px !important; font-weight: 800;
    text-align: center; margin: 0 0 48px !important;
    line-height: 1.2; letter-spacing: -.5px;
}
.tc-title--black  { color: var(--tc-black); }
.tc-title--orange { color: var(--tc-orange); }
.tc-no-posts { text-align: center; color: var(--tc-muted); padding: 32px 0; }

/* ════════════════════════════════════════════════════════════════
   NAV — styles đã chuyển sang nav-global.css (load toàn trang)
   Chỉ giữ lại sentinel và mobile cover margin cho trang chủ
   ════════════════════════════════════════════════════════════════ */

/* Desktop: nav sticky không chiếm thêm layout, sentinel = 0 */
#tc-nav-sentinel { height: 0; }

/* ════════════════════════════════════════════════════════════════
   SECTION 1 — COVER
   ════════════════════════════════════════════════════════════════ */
.tc-cover { width: 100%; padding: 0 24px; box-sizing: border-box; }
.tc-cover__img {
    max-width: 1200px; margin: 0 auto; height: 280px;
    background-size: cover; background-position: center;
    background-repeat: no-repeat; border-radius: 8px; display: block;
}
.tc-cover__img--empty { background: linear-gradient(135deg,#ff7200,#ff9d4f); }

/* ════════════════════════════════════════════════════════════════
   SECTION 2 — CONTACT
   ════════════════════════════════════════════════════════════════ */
.tc-contact { padding: 48px 0; background: var(--tc-white); }
.tc-contact__inner { display: grid; grid-template-columns: 270px 1fr; gap: 40px; align-items: center; }
.tc-contact__avatar-col { display: flex; justify-content: center; }
.tc-contact__avatar {
    width: 250px; height: 250px; border-radius: 50%; object-fit: cover;
    border: 4px solid var(--tc-orange); box-shadow: 0 0 0 6px rgba(255,114,0,.12); flex-shrink: 0;
}
.tc-contact__avatar--placeholder { width:250px; height:250px; border-radius:50%; background:#e5e7eb; border:4px solid var(--tc-orange); }
.tc-contact__name { font-size: 32px !important; font-weight: 800; color: var(--tc-black); margin: 0 0 10px !important; line-height: 1.2; }
.tc-contact__bio { color: var(--tc-text); line-height: 1.75; margin-bottom: 16px; text-align: justify; }
.tc-bio__toggle { display:inline; margin-left:4px; background:none; border:none; padding:0; color:var(--tc-orange); font-size:inherit; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.tc-bio__toggle:hover { color:#e06500; }

.tc-contact__details { display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; margin:0 0 8px; padding:0; list-style:none; }
.tc-contact__detail-item { display:flex; align-items:center; gap:8px; color:var(--tc-text); }
.tc-contact__detail-item a { color:var(--tc-text); transition:color .2s; }
.tc-contact__detail-item a:hover { color:var(--tc-orange); }
.tc-contact__divider { width:1px; height:22px; background:#d1d5db; flex-shrink:0; }

.tc-icon { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:rgba(255,114,0,.10); color:var(--tc-orange); flex-shrink:0; }
.tc-icon svg { width:15px; height:15px; }

.tc-social-row { display:contents; }
.tc-social {
    width:36px; height:36px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    overflow:hidden; transition:transform .2s,opacity .2s; flex-shrink:0;
    /* Không set background mặc định — để ảnh tải lên hiện màu gốc */
}
.tc-social:hover { transform:translateY(-2px); opacity:.85; }
.tc-social img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
/* Chỉ dùng màu background khi hiển thị chữ fallback (chưa có icon tùy chỉnh) */
.tc-social--facebook .tc-social-letter { background:#1877f2; width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.tc-social--youtube  .tc-social-letter { background:#ff0000; width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.tc-social--tiktok   .tc-social-letter { background:#010101; width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.tc-social-letter { color:#fff; font-weight:700; font-size:14px; line-height:1; }

/* ════════════════════════════════════════════════════════════════
   SECTION 3 & 4 — PROGRAM CARDS
   ════════════════════════════════════════════════════════════════ */
.tc-grid-2x3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tc-program-card { border-radius:var(--tc-radius); overflow:hidden; }
.tc-program-card__link { display:block; position:relative; height:220px; overflow:hidden; border-radius:var(--tc-radius); }
.tc-program-card__bg { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .4s; }
.tc-program-card__bg--empty { background:#c4c4c4; }
.tc-program-card__link:hover .tc-program-card__bg { transform:scale(1.06); }
.tc-program-card__overlay { position:absolute; inset:0; background:rgba(0,0,0,.50); }
.tc-program-card__title { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; margin:0; padding:16px; color:#fff !important; font-size:17px !important; font-weight:700; text-align:center; line-height:1.4; text-shadow:0 1px 4px rgba(0,0,0,.5); z-index:1; }

/* ════════════════════════════════════════════════════════════════
   SECTION 5 — BĐS GRID (dùng class của plugin bat-dong-san)
   ════════════════════════════════════════════════════════════════ */
.tc-bds-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
/* Card styles kế thừa từ plugin — enqueue BDS_URL/assets/css/category.css */

/* ════════════════════════════════════════════════════════════════
   SECTION 6 — GIỚI THIỆU
   ════════════════════════════════════════════════════════════════ */
.tc-intro__inner { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.tc-intro__title { font-size:28px !important; font-weight:800; color:var(--tc-orange) !important; margin:0 0 20px !important; line-height:1.3; }
.tc-intro__desc { color:var(--tc-text); line-height:1.8; }
.tc-intro__desc p { margin-top:0; }
.tc-intro__img { width:100%; object-fit:cover; display:block; }
.tc-intro__img-placeholder { width:100%; height:320px; background:#e5e7eb; }

/* ════════════════════════════════════════════════════════════════
   SECTION 7 — TIN TỨC
   ════════════════════════════════════════════════════════════════ */
.tc-news__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.tc-news__item { background:var(--tc-white); border-radius:var(--tc-radius); overflow:hidden; box-shadow:var(--tc-shadow); transition:transform .25s,box-shadow .25s; display:flex; flex-direction:column; }
.tc-news__item:hover { transform:translateY(-4px); box-shadow:0 8px 30px rgba(0,0,0,.14); }
.tc-news__thumb-link { display:block; overflow:hidden; }
.tc-news__thumb { width:100%; height:200px; object-fit:cover; transition:transform .4s; }
.tc-news__item:hover .tc-news__thumb { transform:scale(1.04); }
.tc-news__body { padding:20px; display:flex; flex-direction:column; flex:1; }
.tc-news__meta { font-size:12px; color:var(--tc-muted); margin-bottom:8px; }
.tc-news__title { font-size:16px !important; font-weight:700; margin:0 0 10px !important; line-height:1.45; }
.tc-news__title a { color:var(--tc-black); transition:color .2s; }
.tc-news__title a:hover { color:var(--tc-orange); }
.tc-news__excerpt { color:var(--tc-muted); line-height:1.65; margin:0 0 16px; flex:1; }
.tc-news__readmore { display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:600; color:var(--tc-orange); margin-top:auto; transition:gap .2s; }
.tc-news__readmore:hover { gap:8px; }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .tc-bds-grid  { grid-template-columns:repeat(2,1fr); }
    .tc-grid-2x3  { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 768px) {
    .tc-section__title { font-size:28px !important; margin-bottom:32px !important; }
    .tc-section { padding:48px 0; }
    .tc-contact__inner { grid-template-columns:1fr; text-align:center; }
    .tc-contact__avatar-col { justify-content:center; }
    .tc-contact__details { justify-content:center; }
    .tc-contact__bio { text-align:left; }
    .tc-grid-2x3  { grid-template-columns:1fr; }
    .tc-bds-grid  { grid-template-columns:1fr 1fr; }
    .tc-news__grid { grid-template-columns:1fr; }
    .tc-intro__inner { grid-template-columns:1fr; gap:32px; }
}

/* Mobile (≤480px): nav ở bottom */
@media (max-width: 480px) {
    .tc-bds-grid   { grid-template-columns: 1fr; }
    .tc-cover__img { height: 180px; }
    /* Nav bottom không che nội dung trên — sentinel = 0 */
    #tc-nav-sentinel { height: 0 !important; }
    /* Padding cuối trang để nav không che section cuối */
    .tc-page { padding-bottom: calc(var(--tc-nav-h) + env(safe-area-inset-bottom, 0px) + 16px); }

    /* Contact details: mỗi item 1 dòng riêng */
    .tc-contact__details {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    /* Ẩn divider dọc (không cần khi xếp dọc) */
    .tc-contact__divider { display: none; }
    /* Social icons thành 1 hàng ngang riêng */
    .tc-social-row {
        display: flex !important;
        flex-direction: row;
        gap: 10px;
        align-items: center;
    }
}