/* ============================================================
   TIMES MEDIA — MAIN STYLESHEET
   style.css
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
:root {
  --primary:       #c0392b;
  --primary-dark:  #8e1a10;
  --primary-light: #e74c3c;
  --accent:        #f39c12;
  --dark:          #0d1117;
  --darker:        #060a0e;
  --nav-bg:        #111820;
  --gray:          #1e2430;
  --light-gray:    #f4f5f7;
  --border:        #dee2e6;
  --text:          #2c3e50;
  --muted:         #6c757d;
  --white:         #ffffff;
  --font-heading:   "Rubik", sans-serif;
  --font-body:     'Source Sans 3', sans-serif;
  --font-accent:   'Oswald', sans-serif;
  --shadow:        0 2px 15px rgba(0,0,0,.1);
  --shadow-lg:     0 8px 30px rgba(0,0,0,.18);
  --radius:        8px;

  /* Day/Night mode variables */
  --body-bg:       #ffffff;
  --body-text:     #2c3e50;
  --card-bg:       #ffffff;
  --card-border:   #dee2e6;
  --section-bg:    #f4f5f7;
  --sidebar-bg:    #ffffff;
  --input-bg:      #f4f5f7;
  --input-text:    #2c3e50;
}

/* ===== NIGHT MODE ===== */
body.night-mode {
  --body-bg:       #10141a;
  --body-text:     #d0d6e0;
  --card-bg:       #181e27;
  --card-border:   #252d3a;
  --section-bg:    #141920;
  --sidebar-bg:    #181e27;
  --input-bg:      #1a2234;
  --input-text:    #d0d6e0;
  --light-gray:    #141920;
  --border:        #252d3a;
  --text:          #d0d6e0;
  --muted:         #8898aa;
}
body.night-mode { background: var(--body-bg); color: var(--body-text); }
body.night-mode .news-card,
body.night-mode .featured-article,
body.night-mode .blog-card,
body.night-mode .sidebar-widget { background: var(--card-bg); border-color: var(--card-border); }
body.night-mode .card-title,
body.night-mode .feat-title,
body.night-mode .bc-title,
body.night-mode .lc-title,
body.night-mode .sni-title,
body.night-mode .yt-title,
body.night-mode .section-header h2 { color: #e8edf5; }
body.night-mode .card-excerpt,
body.night-mode .feat-excerpt,
body.night-mode .bc-text { color: #8898aa; }
body.night-mode .blog-section { background: var(--section-bg); }
body.night-mode .ad-banner { background: linear-gradient(135deg,#1a2030,#1e2740); border-color:#252d3a; color:#666; }
body.night-mode .section-header { border-bottom-color: var(--card-border); }
body.night-mode .section-line { background: var(--card-border); }
body.night-mode .list-card { border-bottom-color: var(--card-border); }
body.night-mode .sidebar-news-item { border-bottom-color: #1e2636; }
body.night-mode .cat-list li { border-bottom-color: #1e2636; }
body.night-mode .cat-list li a { color: #d0d6e0; }
body.night-mode .tag-item { background: #1a2234; color: #bbc8dc; border-color: #252d3a; }
body.night-mode .count { background: #1a2234; color: #8898aa; }
body.night-mode .header-search input { background:#1a2234; color:#fff; }
body.night-mode .bc-footer { border-top-color: var(--card-border); }
body.night-mode .bc-author { color: #d0d6e0; }
body.night-mode .page-hero { background: linear-gradient(135deg,#060a0e,#0d1420); }
body.night-mode .article-body { color: #c8d0dc; }
body.night-mode .article-body h3 { color: #e8edf5; }
body.night-mode .widget-header { background: #0d1420; }
body.night-mode .footer-tag-item { background: #1a2234; color: #99aacc; border-color: #252d3a; }
body.night-mode .footer-tag-item:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
body.night-mode #footer-tags-row-label { color: var(--primary-light) !important; }
body.night-mode [style*="background:#fff"],
body.night-mode [style*="background: #fff"] { background: var(--card-bg) !important; }
body.night-mode .breadcrumb-item.active { color: #8898aa; }
body.night-mode .bc-meta { color: #8898aa; }
body.night-mode .feat-meta { color: #8898aa; }


/* ===== NIGHT MODE — COMPREHENSIVE TEXT FIX ===== */
/* All remaining black/dark text elements */
body.night-mode .card-meta,
body.night-mode .feat-meta,
body.night-mode .lc-meta,
body.night-mode .sni-date,
body.night-mode .card-excerpt { color: #8898aa; }

body.night-mode .knowledge-card p { color: #8898aa; }
body.night-mode .kc-count { color: var(--accent); }

body.night-mode .footer-col h4,
body.night-mode .footer-category-col h4 { color: #e8edf5; }
body.night-mode .footer-links li a,
body.night-mode .footer-category-links li a { color: #b0bcd0; }
body.night-mode .footer-brand p { color: #b0bcd0; }
body.night-mode .site-footer { color: #b0bcd0; }
body.night-mode .footer-bottom { color: #d0d6e0; }
body.night-mode .footer-bottom a { color: #8898aa; }

/* Article page — inline color:#333 override */
body.night-mode #article-content,
body.night-mode #article-content * { color: inherit; }
body.night-mode #article-content { color: #c8d0dc; }
body.night-mode #article-content h1,
body.night-mode #article-content h2,
body.night-mode #article-content h3,
body.night-mode #article-content h4,
body.night-mode #article-content h5,
body.night-mode #article-content h6 { color: #e8edf5 !important; }
body.night-mode #article-content p,
body.night-mode #article-content li,
body.night-mode #article-content span:not([style*="color"]),
body.night-mode #article-content div.article-body-text { color: #c8d0dc !important; }
body.night-mode #article-content blockquote { background: #1a2234; color: #aab8cc; border-left-color: var(--primary); }
body.night-mode #article-content table td,
body.night-mode #article-content table th { border-color: #252d3a; color: #c8d0dc; }
body.night-mode #article-content hr { border-top-color: #252d3a; }
body.night-mode #article-content a { color: var(--primary-light); }

/* Breadcrumbs */
body.night-mode .breadcrumb-item { color: #8898aa; }
body.night-mode .breadcrumb-item a { color: var(--primary-light) !important; }

/* Tags */
body.night-mode #article-content .tag-item { background: #1a2234; color: #bbc8dc; border-color: #252d3a; }

/* Knowledge section cards */
body.night-mode .knowledge-card { background: rgba(255,255,255,.04); }
body.night-mode .knowledge-card h3 { color: #e8edf5; }

/* Blog section */
body.night-mode .blog-section { background: #0d1117; }
body.night-mode .bc-meta { color: #8898aa; }

/* Category page subcategory filter buttons */
body.night-mode #cat-grid button[style*="background:#f4f5f7"] {
  background: #1a2234 !important; color: #b0bcd0 !important; border-color: #252d3a !important;
}

/* Section line & header border */
body.night-mode .section-header { border-bottom-color: #252d3a; }

/* Main area background */
body.night-mode main,
body.night-mode .content-area { background: var(--body-bg); }

/* Ad banner */
body.night-mode .ad-banner { color: #555; }

/* Newsletter */
body.night-mode .newsletter-section { background: linear-gradient(135deg, #8e1a10, #c0392b); }

/* Top bar */
body.night-mode .top-bar { background: #040608; color: #666; }

/* Back to top button */
body.night-mode #back-top { background: var(--primary); }

/* Page hero text */
body.night-mode .page-hero h1 { color: #e8edf5; }
body.night-mode .page-hero p { color: #8898aa; }

/* ===== LOGO SCROLL SHRINK ===== */
.site-header {
  transition: box-shadow 0.3s ease;
}

/* ===== LANGUAGE / NIGHT TOGGLE BUTTONS ===== */
.topbar-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lang-toggle-btn,
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 4px;
  font-size: .74rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid #2a3444;
  background: #1a2234;
  color: #bbb;
  transition: .2s;
  font-family: var(--font-accent);
  letter-spacing: .5px;
  white-space: nowrap;
}
.lang-toggle-btn:hover,
.theme-toggle-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.lang-toggle-btn .lang-flag { font-size: .9rem; }
.theme-toggle-btn .theme-icon { font-size: .8rem; }

/* ===== FOOTER SOCIAL — BRAND COLORS ===== */
.footer-social a.fb  { color: #fff; border-color: #1877f2; background: #1877f2; }
.footer-social a.fb:hover  { background: #1460c4; border-color: #1460c4; }
.footer-social a.yt  { color: #fff; border-color: #ff0000; background: #ff0000; }
.footer-social a.yt:hover  { background: #cc0000; border-color: #cc0000; }
.footer-social a.ig  { color: #fff; border-color: #e1306c; background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.footer-social a.ig:hover  { opacity: .85; }
.footer-social a.tw  { color: #fff; border-color: #000; background: #000; }
.footer-social a.tw:hover  { background: #333; border-color: #333; }
.footer-social a.wa  { color: #fff; border-color: #25d366; background: #25d366; }
.footer-social a.wa:hover  { background: #1eaa52; border-color: #1eaa52; }
.footer-social a.tg  { color: #fff; border-color: #229ed9; background: #229ed9; }
.footer-social a.tg:hover  { background: #1a7dad; border-color: #1a7dad; }

/* ===== FOOTER TAGS CLOUD ===== */
.footer-tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
}
.footer-tag-item {
  background: #1a2234;
  color: #aab;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: .73rem;
  font-weight: 600;
  cursor: pointer;
  transition: .2s;
  border: 1px solid #252d3a;
}
.footer-tag-item:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); color:var(--text); background:#fff; overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }

/* ===== CONTAINER ===== */
.container { max-width:1200px; margin:0 auto; padding:0 16px; }

/* ===== TOP BAR ===== */
.top-bar { background:var(--darker); color:#888; font-size:.78rem; padding:5px 0; border-bottom:2px solid var(--primary); }
.top-bar .container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px; }
.top-bar .date-time { display:flex; gap:16px; align-items:center; }
.top-bar .date-time .ist { color:#c0392b; font-weight:700; }
.top-bar .top-right { display:flex; align-items:center; gap:12px; }
.top-bar .top-social a { width:24px; height:24px; border-radius:50%; background:#1a2234; display:inline-flex; align-items:center; justify-content:center; color:#888; font-size:.72rem; transition:.2s; margin-left:3px; }
.top-bar .top-social a:hover { background:var(--primary); color:#fff; }

/* ADMIN BUTTON */
.admin-top-btn { background:var(--primary); color:#fff !important; padding:5px 14px; border-radius:4px; font-size:.75rem; font-family:var(--font-accent); text-transform:uppercase; letter-spacing:.8px; font-weight:600; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:.2s; white-space:nowrap; }
.admin-top-btn:hover { background:var(--primary-dark); transform:translateY(-1px); }

/* ===== HEADER ===== */
.site-header { position:sticky; top:0; z-index:1000; background:var(--dark); box-shadow:0 2px 20px rgba(0,0,0,.6); }
.header-main { display:flex; align-items:center; justify-content:space-between; padding:10px 0; gap:16px; }
.logo-wrap { display:flex; align-items:center; cursor:pointer; flex-shrink:0; }
/* height is set in the scroll section above with transition */
.header-main .logo-wrap img {
  height: 56px;
  width: auto;
  object-fit: contain;
  transition: height 0.4s cubic-bezier(0.4,0,0.2,1);
}
.site-header.scrolled .header-main .logo-wrap img {
  height: 36px;
}
.header-search { position:relative; flex:1; max-width:320px; }
.header-search input { background:#1a2234; border:1px solid #2a3444; color:#fff; border-radius:22px; padding:8px 38px 8px 16px; font-size:.83rem; width:100%; transition:.3s; }
.header-search input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(192,57,43,.15); }
.header-search input::placeholder { color:#666; }
.header-search button { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; color:#888; cursor:pointer; font-size:.85rem; }
.header-social { display:flex; gap:6px; }
.header-social a { width:30px; height:30px; border-radius:50%; border:1px solid #2a3444; display:flex; align-items:center; justify-content:center; color:#888; font-size:.8rem; transition:.2s; }
.header-social a:hover { background:var(--primary); border-color:var(--primary); color:#fff; }

/* ===== NAV ===== */
.main-nav { background:var(--nav-bg); border-top:1px solid #1a2234; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; }
.nav-menu { display:flex; list-style:none; margin:0; padding:0; }
.nav-menu > li { position:relative; }
.nav-menu > li > a { display:flex; align-items:center; gap:5px; padding:13px 14px; color:#bbb; font-family:var(--font-accent); font-size:.82rem; text-transform:uppercase; letter-spacing:.6px; font-weight:500; transition:.2s; white-space:nowrap; }
.nav-menu > li > a:hover, .nav-menu > li > a.active { color:#fff; background:var(--primary); }
.nav-menu > li > a i { font-size:.6rem; }
.dropdown { display:none; position:absolute; top:100%; left:0; background:#1a2234; min-width:180px; box-shadow:var(--shadow-lg); border-top:2px solid var(--primary); z-index:100; list-style:none; padding:6px 0; }
.nav-menu > li:hover .dropdown { display:block; }
.dropdown li a { display:block; padding:9px 16px; color:#bbb; font-size:.82rem; transition:.2s; }
.dropdown li a:hover { color:#fff; background:rgba(192,57,43,.2); padding-left:22px; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; background:none; border:none; }
.hamburger span { width:22px; height:2px; background:#ccc; display:block; transition:.3s; }

/* ===== BREAKING TICKER ===== */
.breaking-ticker { background:var(--primary); display:flex; align-items:center; overflow:hidden; }
.ticker-label { background:var(--primary-dark); padding:9px 16px; font-family:var(--font-accent); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:1px; color:#fff; white-space:nowrap; display:flex; align-items:center; gap:7px; flex-shrink:0; }
.ticker-dot { width:7px; height:7px; background:var(--accent); border-radius:50%; animation:blink 1s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.ticker-wrap { flex:1; overflow:hidden; padding:9px 0; }
.ticker-scroll { display:inline-block; white-space:nowrap; animation:ticker 35s linear infinite; font-size:.84rem; font-weight:600; color:#fff; }
.ticker-scroll:hover { animation-play-state:paused; }
@keyframes ticker { 0%{transform:translateX(100vw)} 100%{transform:translateX(-100%)} }
.ticker-item { margin-right:55px; }
.ticker-item::before { content:"◆"; margin-right:8px; color:var(--accent); font-size:.65rem; }

/* ===== MOBILE NAV ===== */
.mobile-nav-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:2000; }
.mobile-nav-overlay.open { display:block; }
.mobile-nav { position:fixed; left:-280px; top:0; bottom:0; width:280px; background:var(--darker); z-index:2001; transition:.3s; overflow-y:auto; padding:0; }
.mobile-nav.open { left:0; }
.mobile-nav .mn-header { background:var(--dark); padding:16px; display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid var(--primary); }
.mobile-nav .mn-header img { height:40px; }
.mobile-nav .mn-close { background:none; border:none; color:#fff; font-size:1.2rem; cursor:pointer; }
.mobile-nav a { display:block; padding:13px 20px; color:#ccc; border-bottom:1px solid #1a2234; font-family:var(--font-accent); font-size:.88rem; text-transform:uppercase; letter-spacing:.5px; transition:.2s; }
.mobile-nav a:hover { color:#fff; background:var(--primary); padding-left:28px; }

/* ===== LAYOUT ===== */
.main-layout { display:grid; grid-template-columns:1fr 310px; gap:28px; padding:28px 0; }

/* ===== SECTION HEADER ===== */
.section-header { display:flex; align-items:center; gap:10px; margin-bottom:20px; padding-bottom:10px; border-bottom:3px solid var(--border); }
.section-tag { background:var(--primary); color:#fff; padding:3px 10px; border-radius:3px; font-family:var(--font-accent); font-size:.72rem; text-transform:uppercase; letter-spacing:.8px; white-space:nowrap; }
.section-header h2 { font-family:var(--font-heading); font-size:1.3rem; font-weight:500; color:var(--dark); white-space:nowrap; }
.section-line { flex:1; height:1px; background:var(--border); }

/* ===== HERO SLIDER ===== */
.hero-slider { position:relative; height:500px; overflow:hidden; background:var(--dark); border-radius:var(--radius); margin-bottom:28px; }
.slide { position:absolute; inset:0; opacity:0; transition:opacity .8s ease; }
.slide.active { opacity:1; z-index:1; }
.slide img { width:100%; height:100%; object-fit:cover; }
.slide-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.3) 55%,transparent 100%); }
.slide-content { position:absolute; bottom:0; left:0; right:0; padding:28px 30px; z-index:2; }
.slide-cat { background:var(--primary); color:#fff; padding:3px 10px; border-radius:3px; font-size:.72rem; font-family:var(--font-accent); text-transform:uppercase; letter-spacing:.8px; display:inline-block; margin-bottom:8px; }
.slide-title { font-family:var(--font-heading); color:#fff; font-size:1.75rem; font-weight:700; line-height:1.25; margin-bottom:10px; cursor:pointer; }
.slide-title:hover { color:var(--accent); }
.slide-meta { color:#ccc; font-size:.8rem; display:flex; gap:14px; flex-wrap:wrap; }
.hero-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:3; background:rgba(0,0,0,.5); border:none; color:#fff; width:42px; height:42px; border-radius:50%; font-size:.9rem; cursor:pointer; transition:.2s; }
.hero-nav:hover { background:var(--primary); }
.hero-prev { left:14px; }
.hero-next { right:14px; }
.hero-dots { position:absolute; bottom:16px; right:22px; z-index:3; display:flex; gap:7px; }
.hero-dot { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.4); border:none; cursor:pointer; transition:.3s; }
.hero-dot.active { background:var(--primary); transform:scale(1.3); }

/* ===== NEWS CARDS ===== */
.featured-article { display:flex; gap:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border); margin-bottom:24px; transition:.3s; background:#fff; }
.featured-article:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.feat-img { width:45%; flex-shrink:0; overflow:hidden; min-height:220px; position:relative; }
.feat-img img { width:100%; height:100%; object-fit:cover; transition:.4s; }
.featured-article:hover .feat-img img { transform:scale(1.04); }
.feat-cat { position:absolute; top:12px; left:12px; background:var(--primary); color:#fff; padding:3px 9px; border-radius:3px; font-size:.7rem; font-family:var(--font-accent); text-transform:uppercase; }
.feat-body { padding:22px; flex:1; }
.feat-title { font-family:var(--font-heading); font-size:1.3rem; font-weight:800; line-height:1.3; margin-bottom:10px; color:var(--dark); cursor:pointer; }
.feat-title:hover { color:var(--primary); }
.feat-excerpt { font-size:.85rem; color:#555; line-height:1.65; margin-bottom:12px; }
.feat-meta { font-size:.76rem; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.read-more-btn { display:inline-flex; align-items:center; gap:6px; background:var(--primary); color:#fff; padding:8px 18px; border-radius:5px; font-size:.8rem; font-family:var(--font-accent); text-transform:uppercase; letter-spacing:.5px; transition:.2s; cursor:pointer; border:none; }
.read-more-btn:hover { background:var(--primary-dark); transform:translateY(-1px); }

.news-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.news-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.news-card { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border); transition:.3s; display:flex; flex-direction:column; }
.news-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.card-img { position:relative; height:190px; overflow:hidden; background:#eee; }
.card-img img { width:100%; height:100%; object-fit:cover; transition:.4s; }
.news-card:hover .card-img img { transform:scale(1.06); }
.card-cat { position:absolute; top:10px; left:10px; background:var(--primary); color:#fff; padding:3px 9px; border-radius:3px; font-size:.68rem; font-family:var(--font-accent); text-transform:uppercase; }
.card-body { padding:15px; flex:1; display:flex; flex-direction:column; }
.card-title { font-family:var(--font-heading); font-size:.95rem; font-weight:700; line-height:1.38; color:var(--dark); margin-bottom:7px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; cursor:pointer; }
.card-title:hover { color:var(--primary); }
.card-excerpt { font-size:.81rem; color:#666; line-height:1.5; margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.card-meta { font-size:.74rem; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; }

/* ===== LIST CARD ===== */
.list-card { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid #f0f2f5; align-items:flex-start; }
.list-card:last-child { border-bottom:none; }
.lc-img { width:80px; height:60px; border-radius:5px; overflow:hidden; flex-shrink:0; background:#eee; }
.lc-img img { width:100%; height:100%; object-fit:cover; transition:.3s; }
.lc-cat { font-size:.68rem; color:var(--primary); font-family:var(--font-accent); text-transform:uppercase; font-weight:700; margin-bottom:3px; }
.lc-title { font-size:.84rem; font-weight:700; color:var(--dark); line-height:1.35; cursor:pointer; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lc-title:hover { color:var(--primary); }
.lc-meta { font-size:.72rem; color:var(--muted); margin-top:4px; display:flex; gap:10px; }

/* ===== SIDEBAR ===== */
.sidebar-widget { background:#fff; border:1px solid var(--border); border-radius:var(--radius); margin-bottom:22px; overflow:hidden; box-shadow:var(--shadow); }
.widget-header { background:var(--dark); color:#fff; padding:11px 16px; display:flex; align-items:center; gap:8px; font-family:var(--font-accent); font-size:.82rem; text-transform:uppercase; letter-spacing:1px; font-weight:600; }
.widget-header i { color:var(--primary-light); }
.widget-body { padding:14px; }
.sidebar-news-item { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid #f4f5f7; align-items:flex-start; }
.sidebar-news-item:last-child { border-bottom:none; }
.sni-img { width:62px; height:50px; border-radius:4px; overflow:hidden; flex-shrink:0; background:#eee; }
.sni-img img { width:100%; height:100%; object-fit:cover; }
.sni-title { font-size:.8rem; font-weight:700; color:var(--dark); line-height:1.33; cursor:pointer; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sni-title:hover { color:var(--primary); }
.sni-date { font-size:.7rem; color:var(--muted); margin-top:3px; display:flex; align-items:center; gap:4px; }
.yt-item { margin-bottom:12px; }
.yt-thumb { position:relative; display:block; border-radius:6px; overflow:hidden; margin-bottom:6px; }
.yt-thumb img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.yt-play-btn { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.3); transition:.2s; }
.yt-thumb:hover .yt-play-btn { background:rgba(0,0,0,.5); }
.yt-play-btn i { font-size:2.2rem; color:#ff0000; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.yt-title { font-size:.79rem; font-weight:600; color:var(--dark); line-height:1.35; }
.cat-list { list-style:none; padding:0; }
.cat-list li { border-bottom:1px solid #f4f5f7; }
.cat-list li:last-child { border-bottom:none; }
.cat-list li a { display:flex; justify-content:space-between; align-items:center; padding:9px 0; color:var(--text); font-size:.84rem; font-weight:600; transition:.2s; }
.cat-list li a:hover { color:var(--primary); padding-left:5px; }
.count { background:var(--light-gray); color:var(--muted); padding:2px 8px; border-radius:10px; font-size:.7rem; }
.tags-cloud { display:flex; flex-wrap:wrap; gap:7px; }
.tag-item { background:var(--light-gray); color:var(--text); padding:5px 11px; border-radius:20px; font-size:.74rem; font-weight:600; cursor:pointer; transition:.2s; border:1px solid var(--border); }
.tag-item:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.ad-banner { background:linear-gradient(135deg,#f8f9fa,#e9ecef); border:2px dashed #ccc; border-radius:var(--radius); padding:20px; text-align:center; color:#999; font-size:.82rem; margin-bottom:22px; }

/* ===== KNOWLEDGE SECTION ===== */
.knowledge-section { background:linear-gradient(135deg,var(--dark) 0%,#1a2535 100%); padding:50px 0; margin:10px 0; }
.knowledge-card { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:24px; text-align:center; transition:.3s; cursor:pointer; }
.knowledge-card:hover { background:rgba(192,57,43,.18); border-color:var(--primary); transform:translateY(-5px); }
.kc-icon { width:58px; height:58px; background:var(--primary); border-radius:12px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:1.3rem; color:#fff; transition:.4s; }
.knowledge-card:hover .kc-icon { transform:rotateY(180deg); }
.knowledge-card h3 { color:#fff; font-family:var(--font-heading); font-size:1rem; margin-bottom:7px; font-weight:700; }
.knowledge-card p { color:#999; font-size:.8rem; line-height:1.5; margin-bottom:10px; }
.kc-count { display:inline-block; background:rgba(243,156,18,.15); color:var(--accent); padding:3px 10px; border-radius:10px; font-size:.73rem; font-weight:700; font-family:var(--font-accent); }

/* ===== BLOG SECTION ===== */
.blog-section { background:var(--light-gray); padding:48px 0; }
.blog-card { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:.3s; border:1px solid var(--border); }
.blog-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.bc-img { position:relative; height:185px; overflow:hidden; }
.bc-img img { width:100%; height:100%; object-fit:cover; transition:.4s; }
.blog-card:hover .bc-img img { transform:scale(1.05); }
.bc-date { position:absolute; bottom:12px; left:12px; background:var(--primary); color:#fff; padding:5px 10px; border-radius:4px; text-align:center; font-family:var(--font-accent); font-size:.8rem; line-height:1.2; }
.bc-date span { display:block; font-size:1.2rem; font-weight:700; }
.bc-body { padding:16px 16px 10px; }
.bc-meta { font-size:.74rem; color:var(--muted); display:flex; gap:12px; margin-bottom:8px; }
.bc-title { font-family:var(--font-heading); font-size:.95rem; font-weight:700; line-height:1.35; color:var(--dark); margin-bottom:8px; cursor:pointer; }
.bc-title:hover { color:var(--primary); }
.bc-text { font-size:.8rem; color:#666; line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.bc-footer { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-top:1px solid #f4f5f7; }
.bc-author { font-size:.76rem; font-weight:600; color:var(--dark); }
.bc-read { font-size:.76rem; color:var(--primary); font-weight:700; font-family:var(--font-accent); text-transform:uppercase; letter-spacing:.4px; display:flex; align-items:center; gap:5px; transition:.2s; cursor:pointer; }
.bc-read:hover { color:var(--primary-dark); }

/* ===== NEWSLETTER ===== */
.newsletter-section { background:linear-gradient(135deg,var(--primary-dark),var(--primary)); padding:50px 0; }
.newsletter-inner { text-align:center; max-width:560px; margin:auto; }
.newsletter-inner h2 { font-family:var(--font-heading); color:#fff; font-size:2rem; font-weight:800; margin-bottom:10px; }
.newsletter-inner p { color:rgba(255,255,255,.8); font-size:.9rem; margin-bottom:22px; }
.newsletter-form { display:flex; gap:10px; max-width:460px; margin:auto; }
.newsletter-form input { flex:1; padding:12px 18px; border:none; border-radius:6px; font-size:.88rem; background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.3); }
.newsletter-form input::placeholder { color:rgba(255,255,255,.6); }
.newsletter-form input:focus { outline:none; background:rgba(255,255,255,.22); }
.newsletter-form button { background:var(--dark); color:#fff; border:none; padding:12px 22px; border-radius:6px; cursor:pointer; font-family:var(--font-accent); font-size:.82rem; text-transform:uppercase; transition:.2s; white-space:nowrap; display:flex; align-items:center; gap:7px; }
.newsletter-form button:hover { background:#000; }

/* ===== FOOTER ===== */
.site-footer { background:var(--darker); color:#888; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; padding:48px 0 24px; border-bottom:none; }
.footer-brand .logo-wrap { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand .logo-wrap img { height:44px; }
.footer-brand p { font-size:.92rem; line-height:1.7; color:#d7d7d7; margin-bottom:16px; }
.footer-social { display:flex; gap:8px; flex-wrap:wrap; }
.footer-social a { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.8rem; transition:.2s; }
/* Brand-specific colors are defined earlier in the file and take precedence */
.footer-col h4 { color:#fff; font-family:var(--font-accent); font-size:.88rem; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:16px; padding-bottom:8px; border-bottom:2px solid var(--primary); display:inline-block; }
.footer-links { list-style:none; padding:0; }
.footer-links li { margin-bottom:8px; }
.footer-links li a { color:#d7d7d7; font-size:.88rem; transition:.2s; display:flex; align-items:center; gap:6px; }
.footer-links li a::before { content:'›'; color:var(--primary); }
.footer-links li a:hover { color:var(--primary-light); padding-left:5px; }
.footer-category-col h4 {
  color:#fff; 
  font-family:var(--font-accent);
   font-size:.88rem; 
   text-transform:uppercase;
    letter-spacing:1.5px; 
    margin-bottom:16px; 
    padding-bottom:8px; 
    border-bottom:2px solid var(--primary); 
    display:inline-block; 
  }

.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding:18px 0; flex-wrap:wrap; gap:10px; font-size:.85rem; color:#ffffff; font-family:  var(--font-accent);}
.footer-bottom a { color:#666; transition:.2s; }
.footer-bottom a:hover { color:var(--primary-light); }
.footer-bottom-links { display:flex; gap:16px; }
.footer-category-col .footer-category-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 1px;                            
  list-style: none;                     
  padding: 0;
  margin: 0;
}
.footer-category-col .footer-category-links li { 
  margin-bottom:8px;
 }
.footer-category-col .footer-category-links li a {
   color:#d7d7d7; 
   font-size: .85rem; 
   transition:.2s; display:flex; align-items:center; gap:6px; }
.footer-category-col .footer-category-links li a::before { content:'›'; color:var(--primary); }
.footer-category-links li a:hover { color:var(--primary-light); padding-left:5px; }
@media (min-width: 768px) {
  .footer-category-col .footer-category-links li a {
    font-size: 0.95rem;
  }
}

/* ===== BACK TO TOP ===== */
#back-top { position:fixed; bottom:24px; right:24px; width:40px; height:40px; background:var(--primary); color:#fff; border:none; border-radius:50%; font-size:.85rem; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.3); transition:.3s; z-index:500; display:none; align-items:center; justify-content:center; }
#back-top.show { display:flex; }
#back-top:hover { background:var(--primary-dark); transform:translateY(-2px); }

/* ===== CATEGORY / ARTICLE PAGE ===== */
.page-hero { background:linear-gradient(135deg,var(--dark),#1a2535); padding:36px 0; margin-bottom:24px; }
.page-hero h1 { font-family:var(--font-heading); color:#fff; font-size:2rem; font-weight:500; }
.page-hero p { color:#888; font-size:.88rem; margin-top:5px; }
.article-hero { height:440px; position:relative; overflow:hidden; }
.article-hero img { width:100%; height:100%; object-fit:cover; }
.article-hero .overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.9) 0%,transparent 60%); }
.article-hero .content { position:absolute; bottom:28px; left:0; right:0; padding:0 20px; }
.article-body { font-size:.96rem; line-height:1.8; color:#333; }
.article-body-text { font-size:.96rem; line-height:1.85; color:#2c3e50; }
.article-body-text p { margin-bottom:16px; }
.article-body-text h1,.article-body-text h2,.article-body-text h3 { font-family:var(--font-heading); color:var(--dark); margin:24px 0 12px; }
.article-body-text h2 { font-size:1.5rem; }
.article-body-text h3 { font-size:1.3rem; }
.article-body-text blockquote { border-left:4px solid var(--primary); margin:14px 0; padding:10px 18px; background:#f8f9fa; color:#555; font-style:italic; border-radius:0 6px 6px 0; }
.article-body-text a { color:var(--primary); font-weight:600; }
.article-body-text img { max-width:100%; height:auto; border-radius:6px; margin:12px 0; display:block; }
.article-body-text ul,.article-body-text ol { padding-left:22px; margin-bottom:16px; }
.article-body-text li { margin-bottom:6px; line-height:1.7; }
.article-body-text table { width:100%; border-collapse:collapse; margin:12px 0; font-size:.9rem; }
.article-body-text td,.article-body-text th { padding:9px 12px; border:1px solid var(--border); }
.article-body-text th { background:var(--dark); color:#fff; }
.article-body-text hr { border:none; border-top:2px solid var(--border); margin:18px 0; }
.article-body p { margin-bottom:16px; }
.article-body h3 { font-family:var(--font-heading); color:var(--dark); margin:24px 0 12px; font-size:1.3rem; }

/* ===== PAGE ROUTING ===== */
.page { display:none; }
.page.active { display:block; }

/* ===== RESPONSIVE ===== */
@media(max-width:991px) {
  .main-layout { grid-template-columns:1fr; padding:20px 0; }
  .news-grid-3 { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .header-social { display:none; }
  .hamburger { display:flex; }
  .nav-menu { display:none; }
}
@media(max-width:767px) {
  .hero-slider { height:320px; }
  .slide-title { font-size:1.2rem; }
  .featured-article { flex-direction:column; }
  .feat-img { width:100%; min-height:200px; }
  .news-grid-2, .news-grid-3 { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .newsletter-form { flex-direction:column; }
}
@media(max-width:575px) {
  .header-main .logo-wrap img { height:40px; }
  .site-header.scrolled .header-main .logo-wrap img { height:28px; }
  .header-search { display:none; }
  .top-bar .date-time { display:none; }
  .lang-toggle-btn span:not(.lang-flag),
  .theme-toggle-btn span:not(.theme-icon) { display:none; }
  .lang-toggle-btn,
  .theme-toggle-btn { padding:4px 7px; }
}

/* ===== YOUTUBE GALLERY PAGE ===== */
.yt-gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; padding:8px 0 24px; }
.yt-gallery-card { background:var(--card-bg,#fff); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--card-border,#dee2e6); transition:.3s; display:block; text-decoration:none; color:inherit; }
.yt-gallery-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.yt-gallery-thumb { position:relative; aspect-ratio:16/9; overflow:hidden; background:#111; }
.yt-gallery-thumb img { width:100%; height:100%; object-fit:cover; transition:.3s; }
.yt-gallery-card:hover .yt-gallery-thumb img { transform:scale(1.04); }
.yt-gallery-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.3); transition:.2s; }
.yt-gallery-card:hover .yt-gallery-play { background:rgba(0,0,0,.5); }
.yt-gallery-play i { font-size:3rem; color:#ff0000; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.yt-gallery-body { padding:14px; }
.yt-gallery-title { font-weight:700; font-size:.9rem; color:var(--text,#2c3e50); margin-bottom:6px; }
.yt-gallery-url { font-size:.75rem; color:var(--muted,#6c757d); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.night-mode .yt-gallery-title { color:#e8edf5; }

/* ===== COMMENT SECTION ===== */
.comment-section { margin-top: 36px; }
.comment-section-inner { background: var(--card-bg, #fff); border: 1px solid var(--card-border, #dee2e6); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.comment-heading { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--dark); padding: 18px 22px 14px; margin: 0; border-bottom: 2px solid var(--primary); display: flex; align-items: center; gap: 10px; }
.comment-count-badge { background: var(--primary); color: #fff; font-size: .72rem; padding: 2px 9px; border-radius: 20px; font-family: var(--font-accent); font-weight: 700; }
.comment-list { padding: 0 22px; }
.comment-empty { color: var(--muted); font-size: .85rem; padding: 20px 0; text-align: center; }
.comment-item { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.comment-item:last-child { border-bottom: none; }
.comment-avatar { width: 42px; height: 42px; background: var(--primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; flex-shrink: 0; font-family: var(--font-heading); }
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.comment-name { font-weight: 700; font-size: .88rem; color: var(--dark); }
.comment-date { font-size: .75rem; color: var(--muted); }
.comment-text { font-size: .88rem; line-height: 1.65; color: var(--text); margin: 0; word-wrap: break-word; }
.comment-form-wrap { padding: 22px; border-top: 2px solid var(--light-gray); background: var(--light-gray); }
.comment-form-title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--dark); margin: 0 0 4px; }
.comment-form-note { font-size: .78rem; color: var(--muted); margin-bottom: 14px; }
.comment-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.comment-input { border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; font-size: .85rem; font-family: var(--font-body); background: #fff; color: var(--text); width: 100%; transition: .2s; outline: none; }
.comment-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(192,57,43,.12); }
.comment-textarea { border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; font-size: .85rem; font-family: var(--font-body); background: #fff; color: var(--text); width: 100%; resize: vertical; min-height: 100px; transition: .2s; outline: none; margin-bottom: 12px; }
.comment-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(192,57,43,.12); }
.comment-submit-btn { background: var(--primary); color: #fff; border: none; padding: 10px 22px; border-radius: 6px; font-size: .83rem; font-family: var(--font-accent); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: .2s; }
.comment-submit-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }
.comment-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.comment-msg { padding: 10px 14px; border-radius: 6px; font-size: .83rem; font-weight: 600; margin-top: 10px; }
.comment-msg.success { background: #d1fae5; color: #065f46; border: 1px solid #10b981; }
.comment-msg.error { background: #fde8e8; color: #9b1c1c; border: 1px solid #fca5a5; }

/* Night mode: comments */
body.night-mode .comment-section-inner { background: var(--card-bg); border-color: var(--card-border); }
body.night-mode .comment-name { color: #e8edf5; }
body.night-mode .comment-text { color: #c8d0dc; }
body.night-mode .comment-form-wrap { background: #141920; border-top-color: #1e2636; }
body.night-mode .comment-form-title { color: #e8edf5; }
body.night-mode .comment-input,
body.night-mode .comment-textarea { background: #1a2234; border-color: #252d3a; color: #d0d6e0; }
body.night-mode .comment-input::placeholder,
body.night-mode .comment-textarea::placeholder { color: #556; }
body.night-mode .comment-item { border-bottom-color: #1e2636; }
body.night-mode .comment-empty { color: #556; }

/* Responsive */
@media(max-width:575px) {
  .comment-form-row { grid-template-columns: 1fr; }
  .comment-heading { font-size: 1rem; padding: 14px 16px 12px; }
  .comment-list { padding: 0 14px; }
  .comment-form-wrap { padding: 16px; }
}