/* ============================================================
   TechTide — Content Hub
   --th-menu = đáy pill menu (fixed): bar-top(5)+bar-h(64)=69px.
   ============================================================ */
.tt-hub{
	--th-ink:#1a1a2e; --th-soft:#52525b; --th-mut:#6b7280; --th-line:#e5e7eb; --th-indigo:#4f46e5;
	--c-bg:#eef0fd; --c-main:#4f46e5; --c-light:#c7d2fe;  /* accent mặc định (author/fallback) — override bởi .tt-hub--{type} */
	--th-menu: calc(var(--tt-bar-top, 5px) + var(--tt-bar-h, 64px));
	--th-gap: 16px;        /* khe dưới menu */
	--th-searchbar: 62px;  /* cao ô search = 52 + padding 10 -> Showing dính liền */
	color:var(--th-ink); font-family:"DM Sans", sans-serif;
}
.tt-hub *{ box-sizing:border-box; }

/* ----------------------------- HERO ----------------------------- */
.tt-hub-hero{ background:#fff; }
.tt-hub-hero__inner{ max-width:1280px; margin-inline:auto; padding:clamp(40px,7vw,84px) clamp(16px,4vw,24px) clamp(24px,4vw,40px); text-align:left; }
.tt-hub-hero__eyebrow{ margin:0 0 .5rem; font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--th-indigo); }
.tt-hub-hero__title{ margin:0 0 .65rem; color:var(--th-ink); font-size:clamp(2rem,4.6vw,3rem); line-height:1.12; font-weight:700; letter-spacing:-.01em; }
.tt-hub-hero__lead{ margin:0; color:var(--th-soft); font-size:clamp(1rem,1.6vw,1.15rem); line-height:1.65; max-width:720px; }
.tt-hub-hero__lead p{ margin:0 0 .6rem; }
.tt-hub-hero__lead :last-child{ margin-bottom:0; }

/* ----------------------------- LAYOUT (2 cột: filter | main) ----------------------------- */
.tt-hub-layout{
	max-width:1280px; margin-inline:auto;
	padding:clamp(16px,2.5vw,24px) clamp(16px,4vw,24px) clamp(56px,8vw,96px);
	display:grid; grid-template-columns:240px minmax(0,1fr);
	column-gap:32px; align-items:start;
}

/* ----------------------------- FILTER (cột trái, sticky, 1 khung bo) ----------------------------- */
.tt-hub-filter{
	align-self:start;
	position:sticky; top:calc(var(--th-menu) + var(--th-gap)); z-index:5;
	background:#fff; border:1px solid var(--th-line); border-radius:12px; overflow:hidden;
	display:flex; flex-direction:column;
	max-height:calc(100vh - var(--th-menu) - var(--th-gap)*2); /* cột luôn nằm trọn 1 màn hình */
}
.tt-hub-filter__top{ flex:0 0 auto; background:#fff; padding:16px 20px 12px; border-bottom:1px solid var(--th-line); }
.tt-hub-filter__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px; }
.tt-hub-filter__headleft{ display:flex; align-items:center; gap:4px; }
.tt-hub-filter__title{ margin:0; font-size:1.05rem; font-weight:700; color:var(--th-ink); }
.tt-hub-filter__master{ display:none; width:28px; height:28px; align-items:center; justify-content:center; border:0; background:none; color:var(--th-mut); cursor:pointer; border-radius:6px; }
.tt-hub-filter__master svg{ transition:transform .2s ease; }
.tt-hub-filter.is-open .tt-hub-filter__master svg{ transform:rotate(180deg); }
.tt-hub-filter__clear{ border:0; background:none; padding:0; font:inherit; font-size:.82rem; color:var(--c-main); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.tt-hub-filter__group{ margin:10px -20px -12px; padding:10px 20px; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--th-ink); background:#f3f4f6; border-top:1px solid var(--th-line); } /* band xam: keo full mep; line duoi = border-bottom cua __top / __label */

/* Body cuộn — thanh trượt mảnh: thumb đen, track xám */
.tt-hub-filter__body{
	padding:6px 20px 12px;
	flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; /* thân ăn phần còn lại của cột, cuộn bên trong */
}
.tt-hub-filter__body::-webkit-scrollbar{ width:4px; }
.tt-hub-filter__body::-webkit-scrollbar-track{ background:transparent; }
.tt-hub-filter__body::-webkit-scrollbar-thumb{ background:#1a1a2e; border-radius:999px; }
.tt-hub-filter__body::-webkit-scrollbar-thumb:hover{ background:#000; }

.tt-hub-fgroup{ border-top:1px solid #f0f0f3; }
.tt-hub-fgroup:first-child{ border-top:0; }
.tt-hub-frow{ display:flex; align-items:center; gap:6px; padding:3px 0; }
.tt-hub-frow__label{ flex:1; font-size:.95rem; font-weight:600; color:var(--th-ink); padding:6px 0; }
.tt-hub-toggle{ flex:0 0 auto; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border:0; background:none; color:var(--th-mut); cursor:pointer; border-radius:6px; transition:background .15s ease,color .15s ease; }
.tt-hub-toggle:hover{ background:#f3f4f6; color:var(--th-ink); }
.tt-hub-toggle svg{ transition:transform .2s ease; }
.tt-hub-fgroup.is-open > .tt-hub-frow .tt-hub-toggle svg{ transform:rotate(180deg); }
.tt-hub-sub{ list-style:none; margin:0 0 6px; padding:0 0 2px 6px; display:flex; flex-direction:column; gap:1px; }
.tt-hub-sub[hidden]{ display:none; }

.tt-hub-check{ display:flex; align-items:flex-start; gap:9px; padding:6px 8px; margin:0 -8px; border-radius:8px; cursor:pointer; transition:background .15s ease; }
.tt-hub-check:hover{ background:#f7f7fb; }
.tt-hub-check--type{ flex:1; }
.tt-hub-typebox, .tt-hub-termbox, .tt-hub-authorbox{
	flex:0 0 auto; width:18px; height:18px; margin-top:1px; border:1.5px solid #cbd0db; border-radius:5px; background:#fff;
	appearance:none; -webkit-appearance:none; cursor:pointer; position:relative; transition:background .15s ease,border-color .15s ease;
}
.tt-hub-typebox:checked, .tt-hub-termbox:checked, .tt-hub-authorbox:checked{ background:var(--c-main); border-color:var(--c-main); }
.tt-hub-typebox:checked::after, .tt-hub-termbox:checked::after, .tt-hub-authorbox:checked::after{ content:""; position:absolute; left:5px; top:1.5px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.tt-hub-termbox:disabled{ opacity:.55; cursor:not-allowed; }
.tt-hub-typebox:focus-visible, .tt-hub-termbox:focus-visible, .tt-hub-authorbox:focus-visible{ outline:2px solid var(--c-main); outline-offset:2px; }
.tt-hub-check__label{ display:flex; align-items:baseline; gap:7px; font-size:.93rem; line-height:1.4; color:var(--th-ink); }
.tt-hub-check--type .tt-hub-check__label{ font-weight:400; }
.tt-hub-check--cat .tt-hub-check__label,
.tt-hub-check--author .tt-hub-check__label{ font-weight:400; }
/* số đếm: bold cho rõ (không ngoặc) */
.tt-hub-check__count{ color:var(--th-soft); font-size:.85rem; font-weight:700; font-variant-numeric:tabular-nums; }

/* ----------------------------- MAIN (search + Showing/pagination + grid; sticky thật) ----------------------------- */
.tt-hub-main{ min-width:0; display:flex; flex-direction:column; }

/* Ô search: full-width, sticky, icon/X tím */
.tt-hub-search{ position:sticky; top:calc(var(--th-menu) + var(--th-gap)); z-index:7; background:#fff; padding:0 0 10px; }
.tt-hub-search__box{ position:relative; width:100%; }
.tt-hub-search__icon{ position:absolute; left:16px; top:0; bottom:0; display:flex; align-items:center; justify-content:center; color:var(--c-main); pointer-events:none; }
.tt-hub-search__icon svg{ display:block; }
.tt-hub-search__input{
	width:100%; height:52px; display:block; background:#fff; color:var(--th-ink);
	font-family:"DM Sans", sans-serif; font-size:16px; line-height:normal;
	border:1.5px solid var(--th-line); border-radius:50px; padding:0 46px;
	transition:border-color .2s ease, box-shadow .2s ease; appearance:none; -webkit-appearance:none;
}
.tt-hub-search__input::placeholder{ color:#9ca3af; }
.tt-hub-search__input:focus{ outline:none; border-color:var(--c-main); box-shadow:0 0 0 4px color-mix(in srgb, var(--c-main) 16%, transparent); }
.tt-hub-search__input::-webkit-search-cancel-button,
.tt-hub-search__input::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; display:none; }
.tt-hub-search__clear{ position:absolute; right:8px; top:0; bottom:0; margin:auto 0; width:34px; height:34px; border:0; border-radius:50%; background:transparent; color:var(--c-main); display:none; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease,color .15s ease; }
.tt-hub-search__clear:hover{ background:var(--c-bg); color:color-mix(in srgb, var(--c-main) 78%, #000); }
.tt-hub-search.has-value .tt-hub-search__clear{ display:flex; }

/* Showing + pagination cùng hàng, sticky ngay dưới ô search */
.tt-hub-mainhead{ position:sticky; top:calc(var(--th-menu) + var(--th-gap) + var(--th-searchbar)); z-index:6; background:#fff; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 0 14px; }
.tt-hub-count{ margin:0; color:var(--th-mut); font-size:.92rem; }
.tt-hub-count strong{ color:var(--th-ink); font-weight:700; }
.tt-hub-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; transition:opacity .18s ease; }
.tt-hub-grid.is-loading{ opacity:.45; pointer-events:none; }

/* ----------------------------- CARD ----------------------------- */
.tt-hub-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--th-line); border-radius:12px; overflow:hidden; text-decoration:none; color:inherit; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; --c-bg:#eef2f7; --c-main:#475569; --c-light:#cbd5e1; }
.tt-hub-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px -12px rgba(26,26,46,.18); border-color:#d7dbe6; }
.tt-hub-card:focus-visible{ outline:2px solid var(--th-indigo); outline-offset:2px; }
.tt-hub-card__banner{ position:relative; height:160px; display:flex; align-items:center; justify-content:center; background:var(--c-bg); border-bottom:1px solid var(--th-line); }
.tt-hub-card__badge{ position:absolute; left:20px; bottom:0; transform:translateY(50%); background:#fff; border:1px solid var(--th-line); border-radius:999px; padding:4px 13px; font-size:13px; font-weight:500; line-height:1.4; color:var(--th-ink); }
.tt-hub-card__body{ display:flex; flex-direction:column; flex:1 1 auto; gap:12px; padding:30px 24px 22px; }
.tt-hub-card__title{ margin:0; font-size:1.2rem; font-weight:600; line-height:1.3; color:var(--th-ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tt-hub-card__excerpt{ margin:0; color:var(--th-soft); font-size:.95rem; line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.tt-hub-card__tags{ list-style:none; margin:2px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.tt-hub-card__tag{ border:1px solid var(--c-light); color:var(--c-main); background:#fff; border-radius:999px; padding:4px 12px; font-size:12.5px; font-weight:500; line-height:1.4; }
.tt-hub-card__meta{ margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:16px; color:var(--th-mut); font-size:.9rem; padding-top:4px; }
.tt-hub-card__metaitem{ display:inline-flex; align-items:center; gap:6px; }
.tt-hub-card__metaitem svg{ flex:0 0 auto; }
.tt-hub-card__avatar{ width:24px; height:24px; border-radius:50%; object-fit:cover; flex:0 0 auto; display:block; }

.tt-hub-card--rankings{ --c-bg:#fbf3e6; --c-main:#b3701f; --c-light:#f0c48f; }
.tt-hub-card--market-insights{ --c-bg:#e6f5f6; --c-main:#1f7d82; --c-light:#9fd6d9; }
.tt-hub-card--growth-studies{ --c-bg:#f1ecfb; --c-main:#6d4fc4; --c-light:#c3aef0; }
.tt-hub-card--news{ --c-bg:#fbecec; --c-main:#bd4a4a; --c-light:#f0b3b3; }
.tt-hub-card--blog{ --c-bg:#edf1fb; --c-main:#4338ca; --c-light:#c7d2fe; }
.tt-hub-card--case-studies{ --c-bg:#e9f6ef; --c-main:#268257; --c-light:#a3ddc0; }

/* Accent theo type cho cả trang (search/X/filter/pagination ăn theo --c-main) */
.tt-hub--rankings{ --c-bg:#fbf3e6; --c-main:#b3701f; --c-light:#f0c48f; }
.tt-hub--market-insights{ --c-bg:#e6f5f6; --c-main:#1f7d82; --c-light:#9fd6d9; }
.tt-hub--growth-studies{ --c-bg:#f1ecfb; --c-main:#6d4fc4; --c-light:#c3aef0; }
.tt-hub--news{ --c-bg:#fbecec; --c-main:#bd4a4a; --c-light:#f0b3b3; }
.tt-hub--blog{ --c-bg:#edf1fb; --c-main:#4338ca; --c-light:#c7d2fe; }
.tt-hub--case-studies{ --c-bg:#e9f6ef; --c-main:#268257; --c-light:#a3ddc0; }

/* ----------------------------- EMPTY ----------------------------- */
.tt-hub-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:193px; gap:6px; padding:40px 24px; border:1px dashed var(--th-line); border-radius:12px; color:var(--th-mut); }
.tt-hub-empty[hidden]{ display:none; }
.tt-hub-empty__icon{ color:#c2c7d2; margin-bottom:4px; }
.tt-hub-empty__title{ margin:0; font-size:1.15rem; font-weight:600; color:var(--th-ink); }
.tt-hub-empty__text{ margin:0; font-size:.95rem; }

/* ----------------------------- PAGINATION ----------------------------- */
.tt-hub-pagination{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; column-gap:8px; row-gap:8px; margin:0; }
.tt-hub-pagination:empty{ display:none; }
.tt-hub-page{ min-width:38px; height:38px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; background:#fff; color:var(--th-ink); font-family:"DM Sans", sans-serif; font-size:15px; font-weight:500; border:1px solid var(--th-line); border-radius:8px; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease; }
.tt-hub-page:hover{ border-color:var(--c-main); color:var(--c-main); }
.tt-hub-page.is-active{ background:var(--c-main); border-color:var(--c-main); color:#fff; cursor:default; }
.tt-hub-page.is-disabled,.tt-hub-page[disabled]{ opacity:.4; pointer-events:none; }
.tt-hub-page--nav{ color:var(--th-soft); }
.tt-hub-ellipsis{ min-width:22px; text-align:center; color:var(--th-mut); }

/* ----------------------------- HERO SOCIAL (author LinkedIn) ----------------------------- */
.tt-hub-hero__social{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; margin-top:18px; border-radius:10px; background:#eef0fd; color:#4f46e5; text-decoration:none; transition:background .15s ease, color .15s ease, transform .15s ease; }
.tt-hub-hero__social:hover{ background:#4f46e5; color:#fff; transform:translateY(-2px); }
.tt-hub-hero__social svg{ display:block; }

/* ----------------------------- RESPONSIVE ----------------------------- */
@media (max-width:1024px){
	.tt-hub-layout{ grid-template-columns:1fr; row-gap:14px; }

	/* MOBILE: bỏ sticky hết — mọi thứ kéo lên là mất hẳn sau menu */
	.tt-hub-filter{ position:static; border-radius:12px; display:block; max-height:none; }   /* bo tròn như desktop; bỏ cap chiều cao */
	.tt-hub-search{ position:static; padding:0; margin-bottom:14px; }
	.tt-hub-mainhead{ position:static; flex-direction:column; align-items:flex-start; gap:8px; padding:0 0 16px; }
	.tt-hub-pagination{ justify-content:flex-start; }

	/* filter thu gọn; mở mới xổ; body cuộn riêng nếu quá dài */
	.tt-hub-filter__master{ display:inline-flex; }
	.tt-hub-filter__top{ cursor:pointer; }                 /* bấm cả thanh filter để xổ/thu */
	.tt-hub-filter__body{ display:none; max-height:58vh; }
	.tt-hub-filter.is-open .tt-hub-filter__body{ display:block; }

	.tt-hub-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
	.tt-hub-grid{ grid-template-columns:1fr; }
}

/* ----------------------------- TOPICS (trong sidebar filter, duoi Content type) ----------------------------- */
.tt-hub-topics{ margin:12px -20px 0; }
.tt-hub-topics__label{ margin:0; padding:10px 20px; border-top:1px solid var(--th-line); border-bottom:1px solid var(--th-line); } /* band: 2 gach cham 2 mep cot */
.tt-hub-topics__search{ position:relative; margin:12px 20px 10px; }
.tt-hub-topics__icon{ position:absolute; left:10px; top:0; bottom:0; display:flex; align-items:center; color:var(--c-main); pointer-events:none; }
.tt-hub-topics__icon svg{ display:block; }
.tt-hub-topics__input{ width:100%; height:34px; padding:0 10px 0 32px; border:1px solid var(--th-line); border-radius:8px; font-family:"DM Sans", sans-serif; font-size:16px; color:var(--th-ink); background:#fff; } /* 16px = iOS khong zoom, giong search all content */
.tt-hub-topics__input::placeholder{ color:#9ca3af; }
.tt-hub-topics__input:focus{ outline:none; border-color:var(--c-main); }
.tt-hub-topics__input::-webkit-search-cancel-button,
.tt-hub-topics__input::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; display:none; }
.tt-hub-topics__list{ list-style:none; margin:0 20px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.tt-hub-topics__list li{ margin:0; }
.tt-hub-topics__list li[hidden]{ display:none; }
.tt-hub-topic{ display:inline-flex; align-items:baseline; gap:6px; padding:5px 12px; background:#fff; border:1px solid var(--th-line); border-radius:999px; font-size:.86rem; line-height:1.35; color:var(--th-ink); text-decoration:none; transition:border-color .15s ease, background .15s ease; }
.tt-hub-topic .tt-hub-check__count{ font-size:.78rem; }
.tt-hub-topic:hover{ border-color:var(--th-ink); }
.tt-hub-topic.is-active{ background:var(--th-ink); border-color:var(--th-ink); color:#fff; }
.tt-hub-topic.is-active .tt-hub-check__count{ color:rgba(255,255,255,.72); }
.tt-hub-topics__none{ margin:4px 20px 0; font-size:.85rem; color:var(--th-mut); }