:root {
  --tn-primary:#2563eb;
  --tn-primary-dark:#1d4ed8;
  --tn-primary-soft:#eff6ff;
  --tn-green:#16a34a;
  --tn-green-soft:#f0fdf4;
  --tn-red:#dc2626;
  --tn-text:#172033;
  --tn-muted:#64748b;
  --tn-border:#e2e8f0;
  --tn-background:#f8fafc;
  --tn-surface:#fff;
  --tn-dark:#0f172a;
}

* { box-sizing:border-box; }
/* overflow-x:clip (not hidden, inherited from common.css) so .tn-sidebar's position:sticky keeps working */
html { scroll-behavior:smooth; overflow-x:clip; }
body { margin:0; overflow-x:clip; font-family:"Inter",sans-serif; color:var(--tn-text); background:var(--tn-surface); }
a { text-decoration:none; }
img { max-width:100%; }

/* NAVBAR */
.tn-navbar { min-height:78px; border-bottom:1px solid rgba(226,232,240,.9); background:rgba(255,255,255,.96); backdrop-filter:blur(14px); }
.tn-navbar-brand { color:var(--tn-text); font-size:22px; font-weight:800; letter-spacing:-.6px; }
.tn-brand-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:var(--tn-primary); color:#fff; font-size:17px; }
.tn-navbar .nav-link { padding:9px 12px!important; color:#475569; font-size:14px; font-weight:600; }
.tn-navbar .nav-link:hover, .tn-navbar .nav-link.active { color:var(--tn-primary); }

.tn-btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:11px 19px; border:1px solid var(--tn-primary); border-radius:10px; background:var(--tn-primary); color:#fff; font-size:14px; font-weight:700; transition:.2s; }
.tn-btn-primary:hover { border-color:var(--tn-primary-dark); background:var(--tn-primary-dark); color:#fff; transform:translateY(-1px); }

.tn-btn-secondary { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:11px 19px; border:1px solid var(--tn-border); border-radius:10px; background:#fff; color:var(--tn-text); font-size:14px; font-weight:700; transition:.2s; }
.tn-btn-secondary:hover { border-color:#94a3b8; color:var(--tn-text); }

/* HERO */
.tn-blog-hero { padding:70px 0 55px; border-bottom:1px solid var(--tn-border); background:var(--tn-background); }
.tn-blog-label { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid #bfdbfe; border-radius:100px; background:var(--tn-primary-soft); color:var(--tn-primary); font-size:13px; font-weight:700; }
.tn-blog-title { max-width:760px; margin:17px 0 16px; font-size:48px; line-height:1.08; font-weight:800; letter-spacing:-2px; }
.tn-blog-copy { max-width:700px; margin:0; color:var(--tn-muted); font-size:17px; line-height:1.7; }

/* LANGUAGE TOGGLE */
.tn-lang-toggle { display:flex; align-items:center; gap:8px; margin-top:20px; }
.tn-lang-toggle-link { display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border:1px solid var(--tn-border); border-radius:100px; background:#fff; color:#475569; font-size:13px; font-weight:700; transition:.2s; }
.tn-lang-toggle-link:hover { border-color:#bfdbfe; background:var(--tn-primary-soft); color:var(--tn-primary); }
.tn-lang-toggle-link.active { border-color:var(--tn-primary); background:var(--tn-primary); color:#fff; }

/* CATEGORY NAVIGATION */
.tn-category-nav { border-bottom:1px solid var(--tn-border); background:#fff; }
.tn-category-scroll { display:flex; align-items:center; gap:9px; overflow-x:auto; padding:17px 0; scrollbar-width:none; }
.tn-category-scroll::-webkit-scrollbar { display:none; }

.tn-category-nav-link { flex:0 0 auto; padding:9px 14px; border:1px solid var(--tn-border); border-radius:100px; background:#fff; color:#475569; font-size:13px; font-weight:600; white-space:nowrap; transition:.2s; }
.tn-category-nav-link:hover { border-color:#bfdbfe; background:var(--tn-primary-soft); color:var(--tn-primary); }
.tn-category-nav-link.active { border-color:var(--tn-primary); background:var(--tn-primary); color:#fff; }

/* MAIN */
.tn-blog-main { padding:68px 0 95px; }
.tn-blog-section-title { margin:0 0 25px; font-size:26px; font-weight:800; letter-spacing:-.7px; }

/* FEATURED BLOG */
.tn-featured-blog { overflow:hidden; margin-bottom:38px; border:1px solid var(--tn-border); border-radius:22px; background:#fff; }

.tn-featured-image-wrap { position:relative; display:block; width:100%; overflow:hidden; background:#e2e8f0; }
.tn-featured-image { display:block; width:100%; height:auto; }

.tn-featured-badge { position:absolute; top:17px; left:17px; display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:100px; background:#fff; color:var(--tn-primary); font-size:12px; font-weight:700; box-shadow:0 5px 18px rgba(15,23,42,.12); }

.tn-featured-content { padding:29px 31px 31px; }

.tn-blog-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-bottom:12px; color:#94a3b8; font-size:12px; font-weight:600; }
.tn-blog-meta span { display:inline-flex; align-items:center; gap:6px; }

.tn-post-category { display:inline-flex!important; align-items:center; gap:6px; padding:5px 9px; border-radius:7px; background:var(--tn-primary-soft); color:var(--tn-primary)!important; font-size:11px; font-weight:700; }

.tn-featured-title { max-width:720px; margin:0 0 12px; font-size:28px; line-height:1.3; font-weight:800; letter-spacing:-.7px; }
.tn-featured-title a { color:var(--tn-text); }
.tn-featured-title a:hover { color:var(--tn-primary); }

.tn-featured-copy { max-width:760px; margin:0 0 18px; color:var(--tn-muted); font-size:15px; line-height:1.75; }

/* STANDARD BLOG CARD */
.tn-blog-card { display:grid; grid-template-columns:290px minmax(0,1fr); align-items:center; overflow:hidden; margin-bottom:23px; padding:17px 0 17px 17px; border:1px solid var(--tn-border); border-radius:18px; background:#fff; transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease; }

.tn-blog-card:hover { border-color:#cbd5e1; transform:translateY(-2px); box-shadow:0 15px 34px rgba(15,23,42,.06); }

/* Small listing image: preserve complete uploaded image */
.tn-blog-image-wrap { position:relative; display:block; width:100%; overflow:hidden; border-radius:14px; background:#f8fafc; }

.tn-blog-image { display:block; width:100%; height:auto; }

.tn-blog-card-content { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:20px 26px; }

.tn-blog-card-title { margin:0 0 10px; font-size:21px; line-height:1.4; font-weight:750; }
.tn-blog-card-title a { color:var(--tn-text); }
.tn-blog-card-title a:hover { color:var(--tn-primary); }

.tn-blog-excerpt { margin:0 0 16px; color:var(--tn-muted); font-size:14px; line-height:1.7; }

.tn-blog-read { display:inline-flex; align-items:center; gap:7px; width:max-content; color:var(--tn-primary); font-size:13px; font-weight:700; }
.tn-blog-read i { font-size:11px; transition:transform .2s; }
.tn-blog-read:hover i { transform:translateX(3px); }

/* SIDEBAR */
.tn-sidebar { position:sticky; top:100px; }

.tn-sidebar-box { margin-bottom:22px; padding:23px; border:1px solid var(--tn-border); border-radius:18px; background:#fff; }

.tn-sidebar-title { margin:0 0 18px; font-size:17px; font-weight:800; }

/* SEARCH */
.tn-search { position:relative; }

.tn-search input { width:100%; height:48px; padding:0 45px 0 15px; border:1px solid var(--tn-border); border-radius:10px; outline:0; background:#fff; color:var(--tn-text); font-size:14px; }

.tn-search input::placeholder { color:#94a3b8; }

.tn-search input:focus { border-color:#93c5fd; box-shadow:0 0 0 3px rgba(37,99,235,.08); }

.tn-search button { position:absolute; top:0; right:0; width:45px; height:48px; border:0; background:transparent; color:var(--tn-primary); }

/* SIDEBAR BLOG */
.tn-side-blog { display:flex; gap:12px; padding:13px 0; border-bottom:1px solid #edf2f7; }
.tn-side-blog:first-of-type { padding-top:0; }
.tn-side-blog:last-child { padding-bottom:0; border-bottom:0; }

.tn-side-thumb { width:78px; height:65px; flex:0 0 78px; overflow:hidden; border-radius:9px; background:#e2e8f0; }
.tn-side-thumb img { display:block; width:100%; height:100%; object-fit:cover; }

.tn-side-blog-content { min-width:0; }

.tn-side-blog-content a { display:-webkit-box; overflow:hidden; color:var(--tn-text); font-size:13px; line-height:1.45; font-weight:700; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

.tn-side-blog-content a:hover { color:var(--tn-primary); }

.tn-side-date { display:block; margin-top:5px; color:#94a3b8; font-size:11px; }

/* SIDEBAR CATEGORIES */
.tn-sidebar-categories { display:flex; flex-direction:column; }

.tn-sidebar-category { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid #edf2f7; color:#475569; font-size:13px; font-weight:600; }

.tn-sidebar-category:first-child { padding-top:0; }
.tn-sidebar-category:last-child { padding-bottom:0; border-bottom:0; }
.tn-sidebar-category:hover { color:var(--tn-primary); }

.tn-category-name { display:flex; align-items:center; gap:9px; }
.tn-category-name i { width:19px; color:#94a3b8; text-align:center; }
.tn-sidebar-category:hover i { color:var(--tn-primary); }

.tn-category-count { min-width:28px; padding:3px 7px; border-radius:100px; background:#f1f5f9; color:#64748b; font-size:10px; font-weight:700; text-align:center; }

/* APP CTA */
.tn-app-sidebar { border:0; background:var(--tn-dark); color:#fff; }

.tn-app-sidebar-icon { display:grid; place-items:center; width:48px; height:48px; margin-bottom:17px; border-radius:13px; background:rgba(255,255,255,.1); color:#fff; font-size:21px; }

.tn-app-sidebar h3 { margin:0 0 9px; font-size:20px; font-weight:800; }

.tn-app-sidebar p { margin:0 0 19px; color:#cbd5e1; font-size:13px; line-height:1.65; }

.tn-app-sidebar .tn-btn-primary { width:100%; border-color:#fff; background:#fff; color:var(--tn-dark); }

.tn-app-sidebar .tn-btn-primary:hover { background:#f8fafc; color:var(--tn-dark); }

/* WEB CTA */
.tn-web-sidebar { border-color:#bfdbfe; background:var(--tn-primary-soft); }

.tn-web-sidebar-icon { display:grid; place-items:center; width:46px; height:46px; margin-bottom:16px; border-radius:12px; background:#fff; color:var(--tn-primary); font-size:19px; }

.tn-web-sidebar h3 { margin:0 0 8px; font-size:19px; font-weight:800; }

.tn-web-sidebar p { margin:0 0 18px; color:var(--tn-muted); font-size:13px; line-height:1.65; }

.tn-web-sidebar .tn-btn-secondary { width:100%; border-color:#bfdbfe; color:var(--tn-primary); }

/* PAGINATION */
.tn-pagination { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:34px; }

.tn-page-link { display:grid; place-items:center; min-width:40px; height:40px; padding:0 12px; border:1px solid var(--tn-border); border-radius:9px; background:#fff; color:#475569; font-size:13px; font-weight:700; }

.tn-page-link:hover, .tn-page-link.active { border-color:var(--tn-primary); background:var(--tn-primary); color:#fff; }

/* FOOTER */
.tn-footer { padding:62px 0 30px; border-top:1px solid var(--tn-border); }

.tn-footer-heading { margin-bottom:14px; font-size:14px; font-weight:700; }

.tn-footer-link { display:block; margin:9px 0; color:var(--tn-muted); font-size:13px; }

.tn-footer-link:hover { color:var(--tn-primary); }

/* MOBILE MENU */
.tn-offcanvas { max-width:310px; }

.tn-mobile-menu .nav-link { padding:12px 0!important; color:#334155; font-size:16px; font-weight:600; }

/* TABLET */
@media (max-width:991px) {
  .tn-blog-title { font-size:42px; }

  .tn-blog-card { grid-template-columns:250px minmax(0,1fr); }

  .tn-sidebar { position:static; margin-top:38px; }
}

/* MOBILE */
@media (max-width:767px) {
  .tn-blog-hero { padding:54px 0 44px; }

  .tn-blog-main { padding:55px 0 75px; }

  .tn-blog-title { font-size:36px; letter-spacing:-1.3px; }

  .tn-featured-content { padding:23px; }

  .tn-featured-title { font-size:24px; }

  .tn-blog-card { grid-template-columns:1fr; padding:0; }

  .tn-blog-image-wrap { width:100%; border-radius:0; }

  .tn-blog-image { width:100%; height:auto; }

  .tn-blog-card-content { padding:22px; }
}

/* SMALL MOBILE */
@media (max-width:575px) {
  .tn-blog-title { font-size:31px; }

  .tn-blog-copy { font-size:15px; }

  .tn-featured-content { padding:20px; }

  .tn-featured-title { font-size:22px; }

  .tn-blog-card-content { padding:20px; }

  .tn-blog-card-title { font-size:19px; }

  .tn-blog-meta { gap:7px 10px; }

  .tn-sidebar-box { padding:20px; }
}