/* ============================================================
   TechTide — Front page V2 (assets/css/front.css)
   v1.0-TT (27/09/2026): style cho front-page.php bản publication (mockup C2 duyệt 27/09).
   Nạp KÈM home.css (modal + form dùng chung), mọi class mới prefix tt-fp- và scope .tt-fp
   nên không lem sang trang khác. Màu 5 hub khớp bảng màu content-hub.css.
   Nền hero: canvas mây chấm (front.js) + lớp veil sáng; tôn trọng reduced motion phía JS.
   ============================================================ */

.tt-fp{ --fp-rank:#b3701f; --fp-mi:#1f7d82; --fp-gs:#6d4fc4; --fp-news:#bd4a4a; --fp-blog:#4338ca; }

/* ===================== HERO ===================== */
.tt-fp-hero{
	position:relative; overflow:hidden; background:#fcfcfd;
	padding:calc(var(--tt-bar-top, 5px) + var(--tt-bar-h, 64px) + clamp(48px, 8vw, 88px)) 0 clamp(52px, 7vw, 80px);
}
.tt-fp-hero__tide{ position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; }
.tt-fp-hero__veil{
	position:absolute; inset:0; z-index:1; pointer-events:none;
	background:
		radial-gradient(70% 55% at 50% 30%, rgba(252,252,253,.96), rgba(252,252,253,.55) 60%, rgba(252,252,253,0) 100%),
		radial-gradient(46% 52% at 86% 74%, rgba(247,236,206,.4), rgba(247,236,206,0) 70%),
		linear-gradient(rgba(252,252,253,.25), rgba(252,252,253,.9));
}
.tt-fp-hero__in{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; }

.tt-fp-eyebrow{
	font-family:var(--tt-font-body); font-size:.72rem; font-weight:600; letter-spacing:.12em;
	text-transform:uppercase; color:var(--tt-ink); margin:0 0 1.35rem;
	display:inline-flex; align-items:center; gap:9px;
	border:1px solid var(--tt-line); background:rgba(255,255,255,.75); border-radius:999px; padding:8px 16px;
}
.tt-fp-eyebrow i{ width:7px; height:7px; background:var(--tt-ink); transform:rotate(45deg); flex:0 0 auto; }

.tt-fp .tt-fp-hero__title{
	font-size:clamp(2.6rem, 6vw, 4.25rem); font-weight:300; line-height:1.05;
	letter-spacing:-.03em; margin:0; max-width:17ch;
}
.tt-fp-hero__sub{ color:rgba(0,0,0,.56); font-size:clamp(1rem, 1.4vw, 1.125rem); line-height:1.65; max-width:56ch; margin:1.35rem 0 0; }

/* Ô subscribe hero: đè biến thể lên .tt-sub gốc (footer.css) */
.tt-fp .tt-sub--hero{ --c-main:var(--tt-ink); margin-top:2rem; width:min(460px, 100%); text-align:left; }
.tt-fp .tt-sub--hero .tt-sub__row{ box-shadow:0 14px 34px -22px rgba(0,0,0,.4); padding-left:16px; }
.tt-fp .tt-sub--hero .tt-sub__btn--txt{
	width:auto; height:auto; border-radius:999px; padding:11px 22px;
	font:inherit; font-size:.88rem; font-weight:600; line-height:1;
}
.tt-fp .tt-sub--hero .tt-sub__msg.is-ok{ color:#1a7f4b; }
.tt-fp .tt-sub--hero .tt-sub__msg.is-err{ color:#bd4a4a; }

.tt-fp-hero__alt{ margin:1rem 0 0; font-size:.85rem; color:var(--tt-ink-soft); }
.tt-fp-hero__plink{
	background:none; border:0; padding:0 0 1px; margin:0; font:inherit; font-weight:600; color:var(--tt-ink);
	border-bottom:1px solid var(--tt-line); cursor:pointer; transition:border-color .15s ease;
}
.tt-fp-hero__plink:hover{ border-color:var(--tt-ink); }
.tt-fp-hero__plink:focus-visible{ outline:2px solid var(--tt-accent); outline-offset:3px; border-radius:3px; }

/* ===================== LEADERBOARD (slot visual lớn) ===================== */
.tt-fp-board{
	width:min(880px, 100%); margin:clamp(2.5rem, 5vw, 3.5rem) auto 0; text-align:left;
	background:#fff; border:1px solid var(--tt-line); border-radius:18px; overflow:hidden;
	box-shadow:0 40px 90px -48px rgba(10,10,10,.4);
}
.tt-fp-board__head{
	display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px;
	padding:16px 22px; border-bottom:1px solid var(--tt-line); background:var(--tt-bg-soft);
}
.tt-fp-board__title{ font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.tt-fp-board__title i{ font-style:normal; color:var(--fp-rank); }
.tt-fp-board__tag{ font-size:.72rem; font-weight:600; color:var(--tt-ink-soft); border:1px solid var(--tt-line); background:#fff; border-radius:999px; padding:3px 10px; }

.tt-fp-board__tabs{ display:flex; gap:6px; padding:12px 16px 0; flex-wrap:wrap; }
.tt-fp-btab{
	border:1px solid transparent; background:transparent; border-radius:999px; padding:7px 15px;
	font:inherit; font-size:.85rem; font-weight:500; color:var(--tt-ink-soft); cursor:pointer;
	transition:background .15s ease, color .15s ease, border-color .15s ease;
}
@media (hover:hover){ .tt-fp-btab:hover{ color:var(--tt-ink); } }
.tt-fp-btab.is-on{ background:#fbf3e6; border-color:#f0c48f; color:var(--fp-rank); font-weight:600; }
.tt-fp-btab:focus-visible{ outline:2px solid var(--tt-accent); outline-offset:2px; }

.tt-fp-bpanel{ padding:6px 6px 4px; }
.tt-fp-bpanel[hidden]{ display:none; }
.tt-fp-brow{
	display:grid; grid-template-columns:36px 34px minmax(0,1fr) auto; align-items:center; gap:12px;
	padding:12px 16px; border-radius:12px; text-decoration:none; color:inherit; transition:background .15s ease;
}
@media (hover:hover){ .tt-fp-brow:hover{ background:var(--tt-bg-soft); } }
.tt-fp-brow:focus-visible{ outline:2px solid var(--tt-accent); outline-offset:2px; }
.tt-fp-brow__rank{ font-weight:300; font-size:1.2rem; color:var(--tt-ink-soft); font-variant-numeric:tabular-nums; }
.tt-fp-brow__fav{
	width:32px; height:32px; border-radius:8px; border:1px solid var(--tt-line); overflow:hidden;
	display:grid; place-items:center; font-size:.8rem; font-weight:700; background:var(--tt-bg-soft);
}
.tt-fp-brow__fav img{ width:20px; height:20px; display:block; }
.tt-fp-brow__name{ font-size:.96rem; font-weight:600; line-height:1.3; min-width:0; }
.tt-fp-brow__name span{ display:block; font-size:.76rem; font-weight:500; color:var(--tt-ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tt-fp-brow__score{ display:flex; align-items:center; gap:10px; }
.tt-fp-brow__bar{ width:64px; height:5px; border-radius:99px; background:#efeff2; overflow:hidden; }
.tt-fp-brow__bar i{ display:block; height:100%; border-radius:99px; background:var(--tt-ink); }
.tt-fp-brow__num{ font-size:.9rem; font-weight:700; font-variant-numeric:tabular-nums; min-width:2.4ch; text-align:right; }

.tt-fp-board__foot{
	display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px;
	padding:12px 22px 14px; border-top:1px solid var(--tt-line); font-size:.82rem; color:var(--tt-ink-soft);
}
.tt-fp-board__foot a{ font-weight:600; color:var(--tt-ink); display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.tt-fp-board__foot svg{ width:14px; height:14px; }

/* ===================== BADGE SỐ ===================== */
.tt-fp-stats{ border-top:1px solid var(--tt-line); background:#fff; }
.tt-fp-stats__grid{ display:grid; grid-template-columns:repeat(4, 1fr); }
.tt-fp-stat{ padding:clamp(1.5rem, 3vw, 2.2rem) clamp(1rem, 2.5vw, 2rem); border-left:1px solid var(--tt-line); }
.tt-fp-stat:first-child{ border-left:0; padding-left:0; }
.tt-fp-stat b{
	display:block; font-size:clamp(1.9rem, 3.4vw, 2.75rem); font-weight:300; letter-spacing:-.02em;
	line-height:1.05; font-variant-numeric:tabular-nums;
}
.tt-fp-stat span{ display:block; margin-top:.5rem; font-size:.85rem; color:var(--tt-ink-soft); line-height:1.5; max-width:24ch; }

/* ===================== SECTION CHUNG ===================== */
.tt-fp-section{ border-top:1px solid var(--tt-line); padding:clamp(2.75rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem); }
.tt-fp-sechead{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:1.7rem; }
.tt-fp-sechead h2{ font-size:clamp(1.5rem, 2.8vw, 2rem); font-weight:600; letter-spacing:-.01em; line-height:1.15; margin:0; }
.tt-fp-sechead a{ font-size:.9rem; font-weight:500; color:var(--tt-ink-soft); border-bottom:1px solid var(--tt-line); padding-bottom:2px; text-decoration:none; transition:color .15s ease, border-color .15s ease; }
.tt-fp-sechead a:hover{ color:var(--tt-ink); border-color:var(--tt-ink); }

/* ===================== LATEST: chip + lưới ===================== */
.tt-fp-chips{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:1.7rem; }
.tt-fp-chipbtn{
	border:1px solid var(--tt-line); background:#fff; border-radius:999px; padding:8px 18px;
	font:inherit; font-size:.88rem; font-weight:500; color:var(--tt-ink); cursor:pointer;
	transition:background .15s ease, border-color .15s ease, color .15s ease;
}
@media (hover:hover){ .tt-fp-chipbtn:hover{ border-color:var(--tt-ink); } }
.tt-fp-chipbtn.is-on{ background:var(--tt-ink); border-color:var(--tt-ink); color:#fff; }
.tt-fp-chipbtn:focus-visible{ outline:2px solid var(--tt-accent); outline-offset:2px; }

.tt-fp-igrid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.tt-fp-icard{
	position:relative; display:flex; flex-direction:column; gap:.6rem; min-width:0;
	background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:20px 20px 18px;
	text-decoration:none; color:inherit; transition:transform .18s ease, box-shadow .18s ease;
}
.tt-fp-icard::before{ content:""; position:absolute; left:20px; right:20px; top:0; height:3px; border-radius:0 0 4px 4px; background:var(--tc, var(--tt-ink)); }
@media (hover:hover){ .tt-fp-icard:hover{ transform:translateY(-4px); box-shadow:0 14px 30px -12px rgba(26,26,46,.18); } }
.tt-fp-icard:focus-visible{ outline:2px solid var(--tt-accent); outline-offset:2px; }
.tt-fp-icard[hidden]{ display:none; }
.tt-fp-icard--news{ --tc:var(--fp-news); } .tt-fp-icard--rank{ --tc:var(--fp-rank); }
.tt-fp-icard--mi{ --tc:var(--fp-mi); } .tt-fp-icard--gs{ --tc:var(--fp-gs); } .tt-fp-icard--blog{ --tc:var(--fp-blog); }
.tt-fp-chip{
	align-self:flex-start; display:inline-flex; padding:3px 11px; border:1px solid var(--tt-line);
	border-radius:999px; background:#fff; font-size:11.5px; font-weight:600; letter-spacing:.06em;
	text-transform:uppercase; color:var(--tc, var(--tt-ink));
}
.tt-fp-icard__h{ margin:.15rem 0 0; font-size:1.08rem; font-weight:600; line-height:1.32; letter-spacing:normal; }
@media (hover:hover){ .tt-fp-icard:hover .tt-fp-icard__h{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; } }
.tt-fp-icard p{ margin:0; color:var(--tt-ink-soft); font-size:.9rem; line-height:1.6; }
.tt-fp-meta{ margin-top:auto; padding-top:.5rem; font-size:.83rem; color:var(--tt-ink-soft); }

/* ===================== DATA & RESEARCH ===================== */
.tt-fp-data{ background:var(--tt-bg-soft); }
.tt-fp-data__grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.tt-fp-dcard{
	position:relative; overflow:hidden; display:block; background:#fff; border:1px solid var(--tt-line);
	border-radius:14px; padding:clamp(1.5rem, 3vw, 2.25rem); text-decoration:none; color:inherit;
	transition:transform .18s ease, box-shadow .18s ease;
}
.tt-fp-dcard::before{
	content:""; position:absolute; inset:0; z-index:0;
	background-image:linear-gradient(rgba(10,10,10,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(10,10,10,.045) 1px, transparent 1px);
	background-size:28px 28px;
	-webkit-mask-image:linear-gradient(180deg, transparent 26%, #000 82%); mask-image:linear-gradient(180deg, transparent 26%, #000 82%);
}
.tt-fp-dcard > *{ position:relative; z-index:1; }
@media (hover:hover){ .tt-fp-dcard:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -12px rgba(26,26,46,.14); } }
.tt-fp-dcard:focus-visible{ outline:2px solid var(--tt-accent); outline-offset:2px; }
.tt-fp-dcard .tt-fp-eyebrow{ border:0; background:none; padding:0; margin:0 0 .4rem; gap:0; }
.tt-fp-eyebrow--mi{ color:var(--fp-mi); }
.tt-fp-dcard h3{ margin:.4rem 0 1.2rem; font-size:1.3rem; font-weight:600; letter-spacing:-.01em; line-height:1.25; }
.tt-fp-figs{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; border-top:1px solid var(--tt-line); padding-top:1.15rem; }
.tt-fp-fig b{ display:block; font-size:clamp(1.5rem, 2.6vw, 2rem); font-weight:300; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
.tt-fp-fig span{ display:block; margin-top:.35rem; font-size:.8rem; color:var(--tt-ink-soft); line-height:1.45; }
.tt-fp-dcard__ex{ margin:0; color:var(--tt-ink-soft); font-size:.95rem; line-height:1.6; border-top:1px solid var(--tt-line); padding-top:1.15rem; }
.tt-fp-dcard__link{ display:inline-flex; align-items:center; gap:7px; margin-top:1.3rem; font-size:.9rem; font-weight:600; }
.tt-fp-dcard__link svg{ width:15px; height:15px; }

/* ===================== RESPONSIVE ===================== */
@media (max-width:1024px){
	.tt-fp-igrid{ grid-template-columns:repeat(2, 1fr); }
	.tt-fp-data__grid{ grid-template-columns:1fr; }
	.tt-fp-stats__grid{ grid-template-columns:1fr 1fr; }
	.tt-fp-stat{ border-left:0; padding-left:0; border-top:1px solid var(--tt-line); }
	.tt-fp-stats__grid .tt-fp-stat:nth-child(-n+2){ border-top:0; }
	.tt-fp-brow{ grid-template-columns:30px 32px minmax(0,1fr) auto; gap:10px; padding:11px 12px; }
}
@media (max-width:640px){
	.tt-fp-igrid{ grid-template-columns:1fr; }
	.tt-fp-brow__bar{ width:44px; }
	.tt-fp-eyebrow{ letter-spacing:.09em; }
}