/* ╔══════════════════════════════════════════════════════════╗
   ║  HBNews24.in — Master CSS v4.1                        ║
   ║  🎨 SIRF YAHAN 3 LINES BADLO = POORI SITE CHANGE!    ║
   ╚══════════════════════════════════════════════════════════╝ */
:root {
    --c1: #c0392b;   /* Primary — navbar, buttons, badges     */
    --c2: #1a1a2e;   /* Dark    — footer, sidebar             */
    --c3: #f39c12;   /* Accent  — breaking, highlights        */

    /* Auto-computed — mat chhedo */
    --c1d: color-mix(in srgb, var(--c1) 78%, #000);
    --c1l: color-mix(in srgb, var(--c1) 10%, #fff);
    --c1g: color-mix(in srgb, var(--c1) 20%, transparent);

    --fh: 'Poppins', sans-serif;
    --fb: 'Hind', 'Noto Sans Devanagari', system-ui, sans-serif;
    --r1:6px; --r2:10px; --r3:16px;
    --s1:0 2px 8px rgba(0,0,0,.07);
    --s2:0 4px 20px rgba(0,0,0,.11);
    --s3:0 8px 32px rgba(0,0,0,.16);
}

/* ============================================================
   🔧 HORIZONTAL SCROLL FIX — Global
   ============================================================ */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;        /* ← horizontal scroll band */
}
body {
    overflow-x: hidden;        /* ← dono jagah lagana zaroori */
    font-family: var(--fb);
    background: #f4f5f7;
    color: #1a1a1a;
    line-height: 1.7;
    font-size: 15px;
}

/* Bootstrap row negative margin fix */
.row {
    --bs-gutter-x: 12px;
    margin-left: calc(var(--bs-gutter-x) * -0.5);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
}

/* Prevent any element from causing overflow */
*,*::before,*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    max-width: 100%;           /* ← koi bhi element width se bahar nahi jaayega */
}

/* Override max-width for specific elements that need it */
.brk-tick,
.nav-ul a {
    max-width: none;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; height: auto; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp  { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes slideD  { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
@keyframes ticker  { from{transform:translateX(100vw)} to{transform:translateX(-100%)} }
@keyframes pulse   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes popIn   { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }
@keyframes bdPulse { 0%,100%{border-color:var(--c1)} 50%{border-color:var(--c3)} }
@keyframes spin    { to{transform:rotate(360deg)} }

.reveal { opacity:0; transform:translateY(26px); transition:.55s ease; }
.reveal.on { opacity:1; transform:translateY(0); }

/* ============================================================
   BREAKING BAR
   ============================================================ */
.brk-bar { background:var(--c1); overflow:hidden; width:100%; }
.brk-in  { display:flex; align-items:stretch; min-height:34px; width:100%; }
.brk-badge {
    background:var(--c2); color:#fff; padding:0 20px 0 12px; white-space:nowrap;
    font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
    display:flex; align-items:center; gap:6px; flex-shrink:0;
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%);
}
.brk-badge .dot { animation:pulse 1.4s infinite; color:var(--c3); }
.brk-wrap { flex:1; overflow:hidden; display:flex; align-items:center; padding:0 12px; min-width:0; }
.brk-tick { display:inline-block; white-space:nowrap; animation:ticker 40s linear infinite; }
.brk-tick:hover { animation-play-state:paused; }
.brk-tick a { color:#fff; margin-right:60px; font-size:13px; font-weight:500; opacity:.92; }
.brk-tick a::before { content:'▶'; margin-right:8px; font-size:9px; color:var(--c3); }
.brk-tick a:hover { opacity:1; text-decoration:underline; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
    background:#fff; border-bottom:3px solid var(--c1);
    padding:10px 0; box-shadow:var(--s1); animation:slideD .45s ease;
    overflow:hidden;
}
.logo-img    { height:56px; width:auto; object-fit:contain; flex-shrink:0; }
.logo-name   { font-family:var(--fh); font-size:26px; font-weight:900; color:var(--c1); line-height:1; letter-spacing:-.5px; }
.logo-dot    { color:var(--c2); }
.logo-tag    { font-size:11px; color:#999; letter-spacing:.3px; margin-top:2px; }

.h-search { display:flex; overflow:hidden; }
.h-search input {
    flex:1; min-width:0;
    border:2px solid #eee; border-right:none;
    border-radius:var(--r1) 0 0 var(--r1);
    padding:8px 14px; font-size:13px;
    font-family:var(--fb); transition:.2s; outline:none;
}
.h-search input:focus { border-color:var(--c1); }
.h-search button {
    background:var(--c1); color:#fff; border:none;
    border-radius:0 var(--r1) var(--r1) 0;
    padding:8px 16px; cursor:pointer; font-size:15px;
    transition:.2s; flex-shrink:0;
}
.h-search button:hover { background:var(--c1d); }
.h-date { font-size:11px; color:#bbb; text-align:right; margin-top:4px; }

/* ============================================================
   NAVBAR
   ============================================================ */
.main-nav {
    background:var(--c1); position:sticky; top:0; z-index:500;
    box-shadow:0 3px 14px rgba(0,0,0,.22); overflow:hidden;
}
.nav-in { display:flex; align-items:center; min-height:48px; justify-content:space-between; }
.nav-ul { display:flex; list-style:none; gap:2px; flex-wrap:wrap; margin:0; padding:0; }
.nav-ul a {
    color:rgba(255,255,255,.88); padding:10px 13px; font-size:13px;
    font-weight:600; border-radius:var(--r1); transition:.2s;
    display:block; white-space:nowrap; position:relative;
    max-width:none;
}
.nav-ul a::after {
    content:''; position:absolute; bottom:4px; left:13px; right:13px;
    height:2px; background:#fff; transform:scaleX(0); transition:.2s; border-radius:2px;
}
.nav-ul a:hover, .nav-ul a.on { color:#fff; background:rgba(255,255,255,.15); }
.nav-ul a:hover::after, .nav-ul a.on::after { transform:scaleX(1); }

.nav-soc { display:flex; gap:6px; flex-shrink:0; }
.nav-soc a {
    color:rgba(255,255,255,.75); font-size:16px; width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%; background:rgba(255,255,255,.1); transition:.2s;
}
.nav-soc a:hover { background:rgba(255,255,255,.25); color:#fff; transform:translateY(-2px); }
.nav-tog {
    display:none; background:none; border:2px solid rgba(255,255,255,.5);
    color:#fff; padding:4px 10px; border-radius:var(--r1);
    cursor:pointer; font-size:18px; flex-shrink:0;
}

/* ============================================================
   AD SPACES
   ============================================================ */
.ad-pvt {
    width:100%; border-radius:var(--r2); overflow:hidden;
    background:linear-gradient(135deg,#f8f9fa,#edf0f2);
    border:2px dashed #cdd2d8;
    display:flex; align-items:center; justify-content:center;
    position:relative; transition:.3s;
}
.ad-pvt:hover { border-color:var(--c1); animation:bdPulse 2s infinite; }
.ad-pvt .ad-lbl {
    position:absolute; top:5px; left:8px;
    font-size:9px; color:#bbb; letter-spacing:.5px;
    text-transform:uppercase; font-weight:600;
}
.ad-pvt img { max-width:100%; max-height:100%; object-fit:contain; }

.ad-goog {
    width:100%; border-radius:var(--r2); overflow:hidden;
    background:#fff; border:1px solid #e8eaed;
    display:flex; align-items:center; justify-content:center;
    position:relative; min-height:100px;
}
.ad-goog .g-lbl { position:absolute; top:4px; right:8px; font-size:9px; color:#ccc; letter-spacing:.4px; }
.ad-h90  { min-height:90px; }
.ad-h250 { min-height:250px; }
.ad-h70  { min-height:70px; }

/* ============================================================
   POPUP AD
   ============================================================ */
.popup-ov {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.75); z-index:9999;
    align-items:center; justify-content:center;
    backdrop-filter:blur(4px);
    padding:16px;
}
.popup-ov.open { display:flex; animation:fadeIn .3s ease; }
.popup-box {
    background:#fff; border-radius:var(--r3);
    max-width:480px; width:100%;
    overflow:hidden; box-shadow:var(--s3);
    animation:popIn .38s ease; position:relative;
}
.popup-hd {
    background:var(--c1); color:#fff; padding:13px 18px;
    display:flex; align-items:center; justify-content:space-between;
    font-weight:800; font-size:14px; font-family:var(--fh);
}
.popup-close {
    background:rgba(255,255,255,.25); border:none; color:#fff;
    width:32px; height:32px; border-radius:50%; cursor:pointer;
    font-size:18px; display:flex; align-items:center; justify-content:center;
    transition:.2s; flex-shrink:0;
}
.popup-close:hover { background:rgba(255,255,255,.45); transform:scale(1.1); }
.popup-body { padding:18px; max-height:65vh; overflow-y:auto; }
.popup-foot {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 18px; background:#f8f8f8; border-top:1px solid #eee;
    font-size:12px; color:#999; gap:8px; flex-wrap:wrap;
}
.popup-foot .timer-txt { display:flex; align-items:center; gap:6px; }
.popup-foot .timer-ring {
    width:28px; height:28px; border-radius:50%;
    border:3px solid #eee; border-top-color:var(--c1);
    animation:spin 1s linear infinite; flex-shrink:0;
}
.popup-foot .timer-ring.done { animation:none; border-color:#27ae60; }
.popup-foot .close-now {
    background:var(--c1); color:#fff; border:none;
    padding:5px 14px; border-radius:20px; font-size:12px;
    font-weight:700; cursor:pointer; transition:.2s; white-space:nowrap;
}
.popup-foot .close-now:hover { background:var(--c1d); }

/* ============================================================
   HERO
   ============================================================ */
.hero-main {
    position:relative; border-radius:var(--r3); overflow:hidden;
    height:385px; display:block; animation:fadeIn .6s ease;
    width:100%;
}
.hero-main img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.hero-main:hover img { transform:scale(1.04); }
.hero-ph {
    width:100%; height:100%;
    background:linear-gradient(135deg,var(--c2),var(--c1));
    display:flex; align-items:center; justify-content:center;
    font-size:90px; color:rgba(255,255,255,.12);
}
.hero-ov {
    position:absolute; bottom:0; left:0; right:0;
    padding:30px 22px 20px;
    background:linear-gradient(transparent,rgba(0,0,0,.9));
}
.hero-ov .bdgs { margin-bottom:9px; display:flex; gap:6px; flex-wrap:wrap; }
.cpill {
    display:inline-block; color:#fff; font-size:10px; font-weight:800;
    letter-spacing:.8px; text-transform:uppercase; padding:3px 10px; border-radius:3px;
}
.cpill.brk { background:var(--c3); color:#1a1a1a; }
.hero-ov h2 {
    color:#fff; font-size:21px; font-weight:800; line-height:1.36;
    margin-bottom:10px; font-family:var(--fh);
    word-break:break-word;
}
.hero-ov .hm { color:rgba(255,255,255,.62); font-size:12px; display:flex; gap:14px; flex-wrap:wrap; }
.hero-ov .hm span { display:flex; align-items:center; gap:4px; }

/* ============================================================
   SIDE CARDS
   ============================================================ */
.scard {
    display:flex; background:#fff; border-radius:var(--r2);
    overflow:hidden; box-shadow:var(--s1); border:1px solid #efefef;
    transition:.25s; cursor:pointer; animation:fadeUp .5s ease;
    width:100%;
}
.scard:hover { box-shadow:var(--s2); transform:translateX(4px); }
.scard .sth  { width:90px; min-height:80px; flex-shrink:0; object-fit:cover; }
.scard .sph  { width:90px; min-height:80px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:28px; color:rgba(255,255,255,.3); }
.scard .sb   { padding:10px 12px 10px 10px; display:flex; flex-direction:column; justify-content:center; min-width:0; flex:1; }
.scard .sc   { font-size:10px; font-weight:800; text-transform:uppercase; color:var(--c1); margin-bottom:4px; }
.scard .st   { font-size:13px; font-weight:700; line-height:1.4; color:#1a1a1a; margin-bottom:4px; font-family:var(--fh); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
.scard .sm   { font-size:11px; color:#bbb; }

/* ============================================================
   SECTION HEADS
   ============================================================ */
.sec-h {
    display:flex; align-items:center; gap:12px;
    margin-bottom:18px; padding-bottom:10px;
    border-bottom:2px solid #eee; position:relative;
    overflow:hidden;
}
.sec-h::before { content:''; position:absolute; bottom:-2px; left:0; width:54px; height:2px; background:var(--c1); }
.sec-h h2 { font-size:18px; font-weight:800; color:#1a1a1a; font-family:var(--fh); display:flex; align-items:center; gap:8px; }
.sec-h h2 .ico { color:var(--c1); }
.sec-h .va {
    margin-left:auto; font-size:12px; color:var(--c1); font-weight:700;
    padding:4px 14px; border:1.5px solid var(--c1); border-radius:20px;
    transition:.2s; white-space:nowrap; flex-shrink:0;
}
.sec-h .va:hover { background:var(--c1); color:#fff; }

/* ============================================================
   NEWS CARDS
   ============================================================ */
.ncard {
    background:#fff; border-radius:var(--r2); overflow:hidden;
    box-shadow:var(--s1); border:1px solid #f0f0f0;
    height:100%; display:flex; flex-direction:column;
    transition:.28s; animation:fadeUp .55s ease; width:100%;
}
.ncard:hover { box-shadow:var(--s2); transform:translateY(-5px); }
.nth { position:relative; height:176px; overflow:hidden; flex-shrink:0; }
.nth img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.ncard:hover .nth img { transform:scale(1.06); }
.nth .nph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:44px; color:rgba(255,255,255,.28); }
.nth .cpill { position:absolute; bottom:8px; left:10px; }
.nth .bpill { position:absolute; top:8px; right:8px; background:var(--c3); color:#1a1a1a; font-size:9px; font-weight:800; padding:3px 8px; border-radius:3px; letter-spacing:.5px; }
.nbody { padding:14px; flex:1; display:flex; flex-direction:column; }
.nbody h3 {
    font-size:14px; font-weight:700; line-height:1.45; color:#1a1a1a;
    margin-bottom:8px; font-family:var(--fh); flex:1;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    transition:.2s; word-break:break-word;
}
.ncard:hover .nbody h3 { color:var(--c1); }
.nexc { font-size:12px; color:#888; line-height:1.5; margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nft { padding:9px 14px; border-top:1px solid #f5f5f5; display:flex; align-items:center; justify-content:space-between; font-size:11px; color:#aaa; }
.nft .auth { display:flex; align-items:center; gap:4px; color:#999; }
.nft .sts  { display:flex; gap:8px; }

/* ============================================================
   CATEGORY TABS
   ============================================================ */
.ctabs {
    display:flex; gap:8px; margin-bottom:20px;
    /* Mobile pe horizontal scroll, page scroll nahi */
    overflow-x:auto; overflow-y:hidden;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-bottom:4px;
}
.ctabs::-webkit-scrollbar { display:none; }
/* Desktop pe wrap */
@media(min-width:768px) {
    .ctabs { flex-wrap:wrap; overflow-x:visible; }
}
.ctabs a {
    padding:6px 16px; border-radius:20px; font-size:12px; font-weight:700;
    border:2px solid #e0e0e0; color:#666; background:#fff;
    transition:.2s; white-space:nowrap; flex-shrink:0;
}
.ctabs a:hover, .ctabs a.on {
    background:var(--c1); border-color:var(--c1); color:#fff;
    box-shadow:0 3px 10px var(--c1g); transform:translateY(-1px);
}

/* ============================================================
   WIDGETS
   ============================================================ */
.wgt { background:#fff; border-radius:var(--r2); box-shadow:var(--s1); border:1px solid #f0f0f0; margin-bottom:20px; overflow:hidden; animation:fadeUp .55s ease; width:100%; }
.wgt-h { background:var(--c1); color:#fff; padding:12px 16px; font-size:13px; font-weight:800; display:flex; align-items:center; gap:8px; font-family:var(--fh); }

.trow { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-bottom:1px solid #f8f8f8; transition:.15s; cursor:pointer; }
.trow:hover { background:#fafafa; }
.trow:last-child { border-bottom:none; }
.tn   { font-size:22px; font-weight:900; color:#eee; min-width:28px; line-height:1; font-family:var(--fh); flex-shrink:0; }
.trow:hover .tn { color:var(--c1l); }
.tt   { font-size:12px; font-weight:700; color:#2a2a2a; line-height:1.4; margin-bottom:3px; word-break:break-word; }
.trow:hover .tt { color:var(--c1); }
.tm   { font-size:11px; color:#bbb; }

/* ============================================================
   SOCIAL
   ============================================================ */
.sgrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:14px; }
.sbtn {
    display:flex; align-items:center; justify-content:center; gap:6px;
    padding:9px 8px; border-radius:var(--r1); color:#fff;
    font-size:12px; font-weight:700; transition:.2s;
    border:none; cursor:pointer; text-decoration:none;
    white-space:nowrap; overflow:hidden;
}
.sbtn:hover { transform:translateY(-2px); box-shadow:var(--s1); color:#fff; }
.sbtn.fb { background:#1877f2; }
.sbtn.yt { background:#ff0000; }
.sbtn.wa { background:#25d366; }
.sbtn.tw { background:#1da1f2; }
.sbtn.ig { background:linear-gradient(135deg,#f09433,#dc2743,#bc1888); }

/* ============================================================
   CTA BOXES
   ============================================================ */
.cta { border-radius:var(--r2); padding:20px 16px; text-align:center; margin-bottom:20px; box-shadow:var(--s1); overflow:hidden; }
.cta.green { background:linear-gradient(135deg,#25d366,#128C7E); }
.cta.red   { background:linear-gradient(135deg,var(--c1),var(--c1d)); }
.cta .ci   { font-size:36px; margin-bottom:8px; }
.cta h5    { color:#fff; font-weight:800; font-size:15px; margin-bottom:4px; font-family:var(--fh); }
.cta p     { color:rgba(255,255,255,.82); font-size:12px; margin-bottom:12px; }
.cta a     { background:#fff; display:inline-block; padding:8px 22px; border-radius:20px; font-size:12px; font-weight:800; transition:.2s; }
.cta.green a { color:#128C7E; }
.cta.red a   { color:var(--c1); }
.cta a:hover { transform:scale(1.05); box-shadow:var(--s1); }

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.art-wrap  { background:#fff; border-radius:var(--r3); box-shadow:var(--s1); overflow:hidden; border:1px solid #f0f0f0; animation:fadeUp .55s ease; width:100%; }
.art-head  { padding:28px 30px 0; }
.art-body  { padding:20px 30px 30px; font-size:16px; line-height:1.9; color:#2a2a2a; overflow-wrap:break-word; word-break:break-word; }
.art-body h2 { font-size:20px; font-weight:800; margin:28px 0 12px; }
.art-body h3 { font-size:17px; font-weight:700; margin:22px 0 10px; }
.art-body p  { margin-bottom:18px; }
.art-body img { max-width:100%; border-radius:var(--r2); margin:16px 0; height:auto; }
.art-body blockquote { border-left:4px solid var(--c1); background:var(--c1l); padding:14px 18px; border-radius:0 var(--r1) var(--r1) 0; font-style:italic; color:#555; margin:20px 0; }
.art-meta  { display:flex; flex-wrap:wrap; gap:16px; align-items:center; padding:12px 0; border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0; margin:14px 0; font-size:12px; color:#888; }
.art-meta .auth { color:var(--c1); font-weight:700; }
.art-ad    { margin:24px 0; padding:14px; background:#f8f9fa; border-radius:var(--r2); border:2px dashed #d0d7de; text-align:center; overflow:hidden; }
.art-ad .adn { font-size:9px; color:#ccc; display:block; margin-bottom:6px; letter-spacing:.5px; text-transform:uppercase; }
.share-bar { padding:16px 30px; background:#fafafa; border-top:1px solid #f0f0f0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.share-bar .lbl { font-size:13px; font-weight:700; color:#555; white-space:nowrap; }
.shb { padding:7px 16px; border-radius:20px; font-size:12px; font-weight:700; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:.2s; color:#fff; text-decoration:none; white-space:nowrap; }
.shb:hover { transform:translateY(-2px); color:#fff; }
.shb.wa { background:#25d366; }
.shb.fb { background:#1877f2; }
.shb.tw { background:#1da1f2; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background:var(--c2); color:rgba(255,255,255,.7); padding:44px 0 0; margin-top:48px; overflow:hidden; }
.f-ln  { font-family:var(--fh); font-size:24px; font-weight:900; color:#fff; }
.f-ld  { color:var(--c1); }
.f-tag { color:var(--c3); font-size:12px; font-weight:600; margin-top:2px; }
.f-desc { font-size:13px; margin-top:10px; line-height:1.7; color:rgba(255,255,255,.52); }
.f-h   { color:#fff; font-weight:800; font-size:14px; margin-bottom:14px; font-family:var(--fh); }
.f-ul  { list-style:none; padding:0; margin:0; }
.f-ul li { margin-bottom:8px; }
.f-ul a  { color:rgba(255,255,255,.55); font-size:13px; transition:.2s; display:flex; align-items:center; gap:6px; overflow:hidden; }
.f-ul a::before { content:'›'; color:var(--c1); font-weight:900; font-size:16px; flex-shrink:0; }
.f-ul a:hover { color:#fff; }
.f-cl  { list-style:none; padding:0; margin:0; }
.f-cl li { display:flex; gap:10px; margin-bottom:10px; font-size:13px; align-items:flex-start; overflow:hidden; }
.f-cl .fi { color:var(--c1); font-size:15px; flex-shrink:0; margin-top:2px; }
.f-cl a  { color:rgba(255,255,255,.6); transition:.2s; overflow-wrap:break-word; word-break:break-all; }
.f-cl a:hover { color:#fff; }
.f-bot {
    background:rgba(0,0,0,.28); margin-top:32px;
    padding:14px 16px; text-align:center;
    font-size:12px; color:rgba(255,255,255,.36);
    line-height:1.9; overflow:hidden;
}
.f-bot strong { color:var(--c1); }
.f-bot a { color:var(--c3); font-weight:700; text-decoration:none; }

/* ============================================================
   FORMS
   ============================================================ */
.form-card      { background:#fff; border-radius:var(--r3); box-shadow:var(--s2); overflow:hidden; animation:fadeUp .55s ease; }
.form-card-head { padding:22px 28px; background:var(--c1); color:#fff; }
.form-card-head h3 { font-family:var(--fh); font-weight:800; margin-bottom:4px; }
.form-card-head p  { font-size:13px; opacity:.85; margin:0; }
.form-card-body    { padding:28px; }

/* ============================================================
   SEARCH PAGE
   ============================================================ */
.search-result {
    background:#fff; border-radius:var(--r2); padding:16px 18px;
    margin-bottom:12px; box-shadow:var(--s1); border:1px solid #f0f0f0;
    display:flex; gap:14px; transition:.2s; animation:fadeUp .5s ease;
    overflow:hidden; width:100%;
}
.search-result:hover   { box-shadow:var(--s2); transform:translateX(4px); }
.search-result img     { width:90px; height:70px; object-fit:cover; border-radius:var(--r1); flex-shrink:0; }
.search-result h4      { font-size:15px; font-weight:700; color:#1a1a1a; margin-bottom:6px; font-family:var(--fh); transition:.2s; word-break:break-word; }
.search-result:hover h4 { color:var(--c1); }
.search-result p        { font-size:12px; color:#888; margin:0; }

/* ============================================================
   STICKY SIDEBAR
   ============================================================ */
.sticky-sb { position:sticky; top:60px; }

/* ============================================================
   RESPONSIVE — MOBILE (max 767px)
   ============================================================ */
@media(max-width:767px) {

    /* Container padding */
    .container, .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Row gutter tighten */
    .row { --bs-gutter-x: 10px; }

    /* Breaking bar */
    .brk-badge { font-size:9px; padding:0 14px 0 8px; }
    .brk-tick a { font-size:11px; margin-right:36px; }

    /* Header */
    .site-header { padding:6px 0; }
    .logo-img    { height:38px; }
    .logo-name   { font-size:17px; }
    .logo-tag    { display:none; }
    .h-date      { display:none; }
    .h-search input  { padding:6px 8px; font-size:12px; }
    .h-search button { padding:6px 10px; font-size:13px; }

    /* Navbar — full drawer */
    .nav-ul {
        display:none; flex-direction:column; width:100%;
        gap:0; background:var(--c1d);
        border-top:1px solid rgba(255,255,255,.1);
    }
    .nav-ul.open { display:flex; }
    .nav-ul a {
        border-radius:0;
        border-bottom:1px solid rgba(255,255,255,.08);
        padding:12px 16px; font-size:14px;
    }
    .nav-ul a::after { display:none; }
    .nav-tog  { display:block; }
    .nav-in   { flex-wrap:wrap; padding:6px 12px; }
    .nav-row  { display:flex !important; width:100%; justify-content:space-between; align-items:center; padding:3px 0; }
    .nav-soc  { display:none !important; }

    /* Hero */
    .hero-main  { height:220px; border-radius:var(--r2); }
    .hero-ov h2 { font-size:14px; }
    .hero-ov    { padding:20px 14px 14px; }

    /* Article */
    .art-head { padding:14px 14px 0; }
    .art-body { padding:12px 14px 18px; font-size:14px; line-height:1.8; }
    .share-bar { padding:10px 14px; gap:8px; }

    /* Popup */
    .popup-box  { width:calc(100vw - 24px); border-radius:10px; }
    .popup-body { padding:12px; max-height:55vh; }
    .popup-hd   { padding:10px 14px; font-size:13px; }
    .popup-foot { padding:8px 12px; font-size:11px; }
    .popup-foot .close-now { padding:4px 10px; font-size:11px; }

    /* Ads */
    .ad-h90  { min-height:60px; }
    .ad-h70  { min-height:50px; }
    .ad-h250 { min-height:180px; }

    /* Side card thumb */
    .scard .sth, .scard .sph { width:76px; min-height:68px; }

    /* Footer */
    .site-footer { padding:24px 0 0; margin-top:28px; }
    .f-ln   { font-size:20px; }
    .f-desc { font-size:12px; }
    .f-h    { font-size:13px; margin-bottom:10px; }
    .f-ul a { font-size:12px; }
    .f-cl li { font-size:12px; }
    .f-bot  { font-size:11px; padding:12px; }

    /* Word break for all text */
    p, h1, h2, h3, h4, h5, h6, span, a, div {
        overflow-wrap: break-word;
    }
}

/* ============================================================
   RESPONSIVE — TABLET (768px to 991px)
   ============================================================ */
@media(min-width:768px) and (max-width:991px) {

    /* Navbar drawer */
    .nav-ul {
        display:none; flex-direction:column; width:100%;
        background:rgba(0,0,0,.15); border-top:1px solid rgba(255,255,255,.1);
    }
    .nav-ul.open { display:flex; }
    .nav-ul a    { border-radius:0; border-bottom:1px solid rgba(255,255,255,.08); }
    .nav-ul a::after { display:none; }
    .nav-tog  { display:block; }
    .nav-in   { flex-wrap:wrap; padding:6px 16px; }
    .nav-row  { display:flex !important; width:100%; justify-content:space-between; align-items:center; padding:4px 0; }
    .nav-soc  { display:none !important; }

    /* Sizes */
    .logo-img   { height:46px; }
    .logo-name  { font-size:20px; }
    .hero-main  { height:280px; }
    .hero-ov h2 { font-size:17px; }
    .art-head   { padding:18px 20px 0; }
    .art-body   { padding:14px 20px 24px; }
    .share-bar  { padding:12px 20px; }
    .popup-box  { max-width:92%; }
}

/* ============================================================
   RESPONSIVE — DESKTOP (992px+)
   ============================================================ */
@media(min-width:992px) {
    .nav-row  { display:none !important; }
    .nav-ul   { display:flex !important; }
    .nav-tog  { display:none !important; }
    .logo-img { height:56px; }
    .logo-name { font-size:26px; }
    .logo-tag  { display:block; }
    .h-date    { display:block; }
}