/* ===== TechTide — Single (6 dạng post dùng chung) ===== */
/* Màu lấy đúng từ Content Hub; pill TOC/back-to-top kế thừa biến menu (header.css). */

.tt-single{
	--th-menu: calc(var(--tt-bar-top, 5px) + var(--tt-bar-h, 64px)); /* đáy pill menu ~69px */
}

/* màu theo từng type (khớp .tt-hub-card--<key>) */
.tt-single--rankings        { --c-bg:#fbf3e6; --c-main:#b3701f; --c-light:#f0c48f; }
.tt-single--market-insights { --c-bg:#e6f5f6; --c-main:#1f7d82; --c-light:#9fd6d9; }
.tt-single--growth-studies  { --c-bg:#f1ecfb; --c-main:#6d4fc4; --c-light:#c3aef0; }
.tt-single--news            { --c-bg:#fbecec; --c-main:#bd4a4a; --c-light:#f0b3b3; }
.tt-single--blog            { --c-bg:#edf1fb; --c-main:#4338ca; --c-light:#c7d2fe; }
.tt-single--case-studies    { --c-bg:#e9f6ef; --c-main:#268257; --c-light:#a3ddc0; }

.tt-single__wrap{ padding-block: 30px 84px; }

/* ---------- Breadcrumb ---------- */
.tt-single-bc{
	display:flex; flex-wrap:wrap; align-items:center; gap:6px;
	font-size:.78rem; text-transform:uppercase; letter-spacing:.045em;
}
.tt-single-bc__link{ color:var(--c-main); font-weight:600; text-decoration:none; }
.tt-single-bc__link:hover{ text-decoration:underline; }
.tt-single-bc__sep{ color:var(--tt-ink-soft); opacity:.55; }
.tt-single-bc__cur{
	color:var(--tt-ink-soft); font-weight:500;
	max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- Banner / Hero ---------- */
.tt-single-hero{
	background:var(--c-bg);
	border-radius:24px;
	padding:clamp(26px,4.5vw,52px);
	margin-top:16px;
}
.tt-single-hero__badge{
	display:inline-block; background:#fff; color:var(--c-main);
	font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
	padding:.5em 1.05em; border-radius:999px;
}
.tt-single-hero__title{
	font-size:clamp(1.9rem,4.4vw,3rem); font-weight:700; line-height:1.12;
	letter-spacing:-.015em; color:var(--tt-ink); margin:.55em 0 .7em;
}
.tt-single-au{ display:flex; align-items:center; gap:12px; }
.tt-single-au__avatar{ flex:0 0 auto; display:inline-flex; border-radius:50%; }
.tt-single-au__img{ width:46px; height:46px; border-radius:50%; display:block; }
.tt-single-au__meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.95rem; }
.tt-single-au__name{ color:var(--c-main); font-weight:600; text-decoration:none; }
.tt-single-au__name:hover{ text-decoration:underline; }
.tt-single-au__dot{ color:var(--tt-ink-soft); opacity:.6; }
.tt-single-au__date{ color:var(--tt-ink-soft); }

/* ---------- Lưới 2 cột ---------- */
.tt-single-grid{
	display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:48px;
	align-items:start; margin-top:40px;
}

/* ---------- Sidebar ---------- */
.tt-single-side{
	position:sticky; top:calc(var(--th-menu) + 24px); align-self:start;
	display:flex; flex-direction:column; gap:26px;
	max-height:calc(100vh - var(--th-menu) - 48px);
}
.tt-side-ai, .tt-side-sub, .tt-side-share{ flex:0 0 auto; }

/* AI buttons */
.tt-side-ai{ display:flex; flex-direction:column; gap:10px; }
.tt-ai-btn{
	display:flex; align-items:center; gap:12px; padding:12px 14px;
	border:1px solid var(--tt-line); border-radius:14px; background:#fff; text-decoration:none;
	transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.tt-ai-btn:hover{ border-color:var(--c-main); background:var(--c-bg); transform:translateY(-1px); }
.tt-ai-btn__ic{ flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:#10a37f; color:#fff; }
.tt-ai-btn__ic--claude{ background:#d97757; }
.tt-ai-btn__ic svg{ width:22px; height:22px; }
.tt-ai-btn__tx{ min-width:0; }
.tt-ai-btn__t{ display:block; font-weight:600; font-size:.95rem; color:var(--tt-ink); line-height:1.2; }
.tt-ai-btn__s{ display:block; font-size:.8rem; color:var(--tt-ink-soft); margin-top:2px; }

/* TOC desktop */
.tt-toc{ display:none; border-top:1px solid var(--tt-line); padding-top:18px; min-height:0; }
.tt-toc.is-ready{ display:flex; flex-direction:column; flex:0 1 auto; min-height:0; }
.tt-toc__head{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--tt-ink-soft); margin-bottom:12px; flex:0 0 auto; }
.tt-toc__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; border-left:2px solid var(--tt-line); flex:1 1 auto; min-height:0; overflow-y:auto; }
.tt-toc__list::-webkit-scrollbar{ width:4px; }
.tt-toc__list::-webkit-scrollbar-track{ background:transparent; }
.tt-toc__list::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.18); border-radius:4px; }
.tt-toc__list a{
	display:block; padding:5px 0 5px 14px; margin-left:-2px; border-left:2px solid transparent;
	color:var(--tt-ink-soft); text-decoration:none; font-size:.9rem; line-height:1.35;
	transition:color .15s ease, border-color .15s ease;
}
.tt-toc__list a:hover{ color:var(--tt-ink); }
.tt-toc__list a.is-active{ color:var(--c-main); border-left-color:var(--c-main); font-weight:600; }
.tt-toc__item--sub a{ padding-left:26px; font-size:.85rem; }

/* Subscribe */
.tt-side-sub{ border-top:1px solid var(--tt-line); padding-top:22px; }
.tt-side-sub__title{ font-size:1.12rem; font-weight:700; line-height:1.3; letter-spacing:-.01em; color:var(--tt-ink); margin:0 0 16px; }
.tt-sub{ position:relative; }
.tt-sub__row{
	display:flex; align-items:center; gap:8px; background:#f3f3f5;
	border:1px solid transparent; border-radius:999px; padding:0 16px;
	transition:border-color .15s ease, background .15s ease;
}
.tt-sub__row:focus-within{ border-color:var(--c-main); background:#fff; }
.tt-sub__ic{ display:inline-flex; color:var(--tt-ink-soft); }
.tt-sub__ic svg{ width:20px; height:20px; }
.tt-sub__input{ flex:1; min-width:0; border:0; background:transparent; padding:13px 0; font:inherit; font-size:.95rem; color:var(--tt-ink); outline:none; }
.tt-sub__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.tt-sub__btn{
	margin-top:10px; width:100%; border:0; border-radius:999px; padding:14px 20px;
	background:var(--tt-ink); color:#fff; font:inherit; font-weight:600; font-size:.95rem; cursor:pointer;
	transition:background .18s ease, transform .18s ease;
}
.tt-sub__btn:hover{ background:#000; transform:translateY(-1px); }
.tt-sub__btn:disabled{ opacity:.55; cursor:default; transform:none; }
.tt-sub__msg{ margin:10px 2px 0; font-size:.85rem; line-height:1.4; }
.tt-sub__msg.is-ok{ color:var(--c-main); }
.tt-sub__msg.is-err{ color:#bd4a4a; }

/* Share */
.tt-side-share{ display:flex; align-items:center; gap:14px; border-top:1px solid var(--tt-line); padding-top:20px; }
.tt-side-share__label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--tt-ink-soft); }
.tt-share{ display:flex; gap:8px; }
.tt-share__btn{
	width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
	border:1px solid var(--tt-line); background:#fff; color:var(--tt-ink); cursor:pointer; text-decoration:none;
	transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.tt-share__btn:hover{ background:var(--c-main); border-color:var(--c-main); color:#fff; }
.tt-share__btn svg{ width:17px; height:17px; }
.tt-share__copy svg:last-child{ display:none; }
.tt-share__copy.is-copied{ background:var(--c-main); border-color:var(--c-main); color:#fff; }
.tt-share__copy.is-copied svg:first-child{ display:none; }
.tt-share__copy.is-copied svg:last-child{ display:block; }

/* ---------- TOC pill (mobile, sticky dưới menu — kiểu menu) ---------- */
.tt-toc-m{ display:none; position:relative; }
.tt-toc-m__bar{
	position:relative; z-index:2;
	width:100%; display:flex; align-items:center; gap:10px; padding:12px 16px;
	border:0; border-radius:var(--tt-bar-radius, 16px);
	background:var(--tt-pill-bg, rgba(255,255,255,.51));
	-webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
	box-shadow:var(--tt-shadow); cursor:pointer; font:inherit; color:var(--tt-ink);
	transition:border-radius .2s ease, box-shadow .2s ease;
}
/* khi mở: bo góc dưới của pill vuông lại + bỏ shadow để dính liền panel thành 1 khối */
.tt-toc-m.is-open .tt-toc-m__bar{ border-bottom-left-radius:0; border-bottom-right-radius:0; box-shadow:none; }
.tt-toc-m__ic{ display:inline-flex; color:var(--c-main); }
.tt-toc-m__ic svg{ width:20px; height:20px; }
.tt-toc-m__label{ flex:1; min-width:0; text-align:left; font-weight:600; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tt-toc-m__chev{ display:inline-flex; color:var(--tt-ink-soft); transition:transform .25s ease; }
.tt-toc-m.is-open .tt-toc-m__chev{ transform:rotate(180deg); }
.tt-toc-m__panel{
	position:absolute; top:100%; left:0; right:0; z-index:1; overflow:hidden; max-height:0;
	background:var(--tt-pill-bg, rgba(255,255,255,.51));
	-webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
	border-radius:0 0 var(--tt-bar-radius, 16px) var(--tt-bar-radius, 16px);
	box-shadow:var(--tt-shadow);
	transition:max-height .28s ease;
}
.tt-toc-m.is-open .tt-toc-m__panel{ max-height:62vh; overflow-y:auto; }
.tt-toc-m__inner, .tt-toc-m__list{ list-style:none; margin:0; padding:0; }
.tt-toc-m__list{ padding:8px; }
.tt-toc-m__list a{ display:block; padding:10px 12px; border-radius:10px; color:var(--tt-ink); text-decoration:none; font-size:.95rem; }
.tt-toc-m__list a:hover, .tt-toc-m__list a.is-active{ background:var(--c-bg); color:var(--c-main); }
.tt-toc-m__item--sub a{ padding-left:26px; font-size:.9rem; color:var(--tt-ink-soft); }

/* ---------- Back to top (CHỈ mobile/tablet ≤1024px, giữa-phải màn hình) ---------- */
.tt-totop{
	position:fixed; right:18px; top:50%; z-index:880;   /* top:50% chỉ là dự phòng; JS đặt lại = 15px dưới đáy TOC mở */
	width:46px; height:46px; border-radius:50%; display:none; place-items:center;
	border:1px solid var(--tt-line); background:rgba(255,255,255,.9);
	-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:var(--tt-shadow);
	color:var(--tt-ink); cursor:pointer;
	opacity:0; visibility:hidden; transform:translateX(8px);
	transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.tt-totop.is-on{ opacity:1; visibility:visible; transform:none; }
.tt-totop:hover{ background:#fff; }
.tt-totop svg{ width:22px; height:22px; }

/* ---------- Typography nội dung (bổ sung cho .single sẵn có) ---------- */
.tt-single__content{ font-size:1.125rem; line-height:1.7; color:#2c2c2c; min-width:0; overflow-wrap:break-word; }
.tt-single__content > *:first-child{ margin-top:0; }
.tt-single__content h2{ font-size:1.6rem; line-height:1.25; color:var(--tt-ink); margin:1.8em 0 .55em; }
.tt-single__content h3{ font-size:1.28rem; line-height:1.3; color:var(--tt-ink); margin:1.5em 0 .5em; }
.tt-single__content h4{ font-size:1.1rem; color:var(--tt-ink); margin:1.3em 0 .4em; }
.tt-single__content :where(h2,h3,h4){ scroll-margin-top:calc(var(--th-menu) + 24px); }
.tt-single__content p{ margin:0 0 1.1em; }
.tt-single__content ul, .tt-single__content ol{ margin:0 0 1.2em; padding-left:1.4em; }
.tt-single__content li{ margin:.4em 0; }
.tt-single__content li::marker{ color:var(--c-main); }
.tt-single__content img{ border-radius:12px; margin:1.4em 0; max-width:100%; height:auto; }
.tt-single__content iframe, .tt-single__content video, .tt-single__content embed, .tt-single__content object{ max-width:100%; }
.tt-table-wrap{ max-width:100%; }
.tt-single__content figure{ margin:1.6em 0; }
.tt-single__content figcaption{ font-size:.85rem; color:var(--tt-ink-soft); text-align:center; margin-top:.6em; }
.tt-single__content blockquote{ margin:1.6em 0; padding:.3em 0 .3em 1.2em; border-left:3px solid var(--c-main); color:var(--tt-ink); font-style:italic; }
.tt-single__content hr{ border:0; border-top:1px solid var(--tt-line); margin:2em 0; }
.tt-single__content code{ background:var(--c-bg); padding:.15em .4em; border-radius:6px; font-family:var(--tt-font-mono); font-size:.9em; }
.tt-single__content pre{ background:#0f1117; color:#e6e6e6; padding:18px 20px; border-radius:12px; overflow-x:auto; margin:1.5em 0; }
.tt-single__content pre code{ background:transparent; padding:0; color:inherit; }

/* ---------- Mobile ---------- */
@media (max-width:1024px){
	.tt-single-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:28px; margin-top:24px; }
	.tt-single-side{ display:contents; }              /* tách các phần thành item của lưới để sắp lại thứ tự */
	.tt-side-ai{ order:1; }                            /* 2 nút AI ngay dưới hero */
	.tt-side-sub{ order:2; }                           /* ô subscribe ngay dưới hero */
	.tt-single__content{ order:3; overflow-x:clip; }   /* chỉ table (trong .tt-table-wrap) cuộn ngang; phần còn lại fit màn hình */
	.tt-side-share{ order:4; }                         /* share cuối bài */
	.tt-toc.is-ready{ display:none; }                  /* TOC desktop ẩn, dùng pill */
	.tt-toc-m.is-ready{ display:block; position:sticky; top:calc(var(--th-menu) + 20px); z-index:850; margin:18px 0 0; }
	.tt-single__content :where(h2,h3,h4){ scroll-margin-top:calc(var(--th-menu) + 90px); }
	.tt-single-hero{ border-radius:18px; }
	.tt-single__content{ font-size:1.06rem; }
	.tt-totop{ display:grid; }                          /* back-to-top chỉ hiện ở mobile/tablet */
}
@media (max-width:600px){
	.tt-single__wrap{ padding-block:22px 64px; }
	.tt-single-hero{ border-radius:16px; }
	.tt-single-hero__title{ font-size:1.65rem; }
	.tt-single__content h2{ font-size:1.4rem; }
	.tt-single__content h3{ font-size:1.18rem; }
	.tt-totop{ right:14px; }
}

/* ===== Anchor text trong bài đổi theo màu type ===== */
.tt-single .hentry a{ color:var(--c-main); }
.tt-single .hentry a:hover{ color:color-mix(in srgb, var(--c-main) 72%, #000); }

/* ===== Bảng đổi màu theo type (override màu indigo cố định của blog-content) ===== */
.tt-single .hentry table thead th{ background:var(--c-bg); color:var(--c-main); border-bottom-color:var(--c-light); }
.tt-single .hentry table tbody tr:nth-child(even){ background:color-mix(in srgb, var(--c-bg) 42%, #fff); }
.tt-single .hentry table tbody tr:hover{ background:color-mix(in srgb, var(--c-bg) 68%, #fff); }
.tt-single .hentry table a{ color:var(--c-main); }
.tt-single .tt-table-wrap{ border-color:color-mix(in srgb, var(--c-light) 55%, #fff); }

/* ===== Related posts (4 thẻ/hàng — banner card mặc định theo type) ===== */
.tt-related{ border-top:1px solid var(--tt-line); padding-block:56px 76px; }
.tt-related__title{ font-size:clamp(1.5rem,3vw,2rem); font-weight:700; letter-spacing:-.01em; color:var(--tt-ink); margin:0 0 .35em; }
.tt-related__des{ font-size:1.05rem; line-height:1.6; color:var(--tt-ink-soft); margin:0 0 2rem; max-width:62ch; }
.tt-related__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }

.tt-related__card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--tt-line); border-radius:14px; overflow:hidden; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tt-related__card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px -12px rgba(26,26,46,.18); border-color:var(--c-light); }

.tt-related__banner{ position:relative; height:132px; display:flex; align-items:center; justify-content:center; background:var(--c-bg); border-bottom:1px solid var(--tt-line); }
.tt-related__banner > svg{ width:52px; height:52px; }
.tt-related__badge{ position:absolute; left:18px; bottom:0; transform:translateY(50%); background:#fff; border:1px solid var(--tt-line); border-radius:999px; padding:3px 12px; font-size:12.5px; font-weight:500; line-height:1.4; color:var(--tt-ink); }

.tt-related__body{ display:flex; flex-direction:column; flex:1 1 auto; gap:14px; padding:26px 20px 20px; }
.tt-related__h{ font-size:1.05rem; font-weight:600; line-height:1.3; color:var(--tt-ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tt-related__card:hover .tt-related__h{ color:var(--c-main); }

.tt-related__meta{ margin-top:auto; display:flex; align-items:center; gap:8px; font-size:.85rem; }
.tt-related__avatar{ width:30px; height:30px; border-radius:50%; object-fit:cover; flex:0 0 auto; display:block; }
.tt-related__who{ font-weight:600; color:var(--tt-ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tt-related__date{ flex:0 0 auto; color:var(--tt-ink-soft); white-space:nowrap; }
.tt-related__date::before{ content:"\00B7"; margin-right:8px; opacity:.6; }

@media (max-width:1024px){
	.tt-related__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
	.tt-related{ padding-block:40px 56px; }
	.tt-related__grid{ grid-template-columns:1fr; gap:18px; }
	.tt-related__banner{ height:120px; }
}