/* ══════════════════════════════════════════
   4. COMPONENTS (components.css) - FULL
══════════════════════════════════════════ */
/* BUTTONS */
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:768px){ .hero-btns{justify-content:center;} }

.btn-gold{background:linear-gradient(135deg, var(--navy-mid) 0%, var(--navy) 100%);color:#fff;border:none;padding:14px 32px;border-radius:30px;font-weight:700;font-size:.9rem;cursor:pointer;transition:all .25s;display:inline-flex;align-items:center;gap:8px;box-shadow:0 6px 15px rgba(109, 64, 164, 0.25);}
[data-theme="dark"] .btn-gold{background:linear-gradient(135deg, var(--gold) 0%, var(--orange) 100%);box-shadow:0 6px 15px rgba(234, 88, 12, 0.25);}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(109, 64, 164, 0.35);}

.btn-outline{background:transparent;color:var(--navy-mid);border:1.5px solid var(--navy-mid);padding:13px 26px;border-radius:30px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .25s;display:inline-flex;align-items:center;gap:8px;}
[data-theme="dark"] .btn-outline{color:var(--ink); border-color:var(--navy-mid);}
.btn-outline:hover{background:var(--navy-light);color:var(--navy)}
[data-theme="dark"] .btn-outline:hover{border-color:var(--gold);color:var(--gold);background:transparent;}

.fb-btn{display:inline-flex;align-items:center;gap:10px;margin-top:28px;background:var(--navy);color:#fff;padding:14px 30px;border-radius:30px;font-weight:600;font-size:.9rem;transition:all .3s;}
[data-theme="dark"] .fb-btn{background:var(--navy-mid);}
.fb-btn:hover{transform:translateY(-2px); box-shadow:0 6px 15px rgba(109, 64, 164, 0.25);}

/* THEME TOGGLE BUTTON */
.theme-btn {background: var(--cream);border: none;border-radius: 50%;width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;cursor: pointer;font-size: 1.1rem;margin-left: 8px;transition: all 0.3s ease;color: var(--ink);}
.theme-btn:hover {background: var(--navy-light);transform: scale(1.05);}

/* SECTION HEADINGS */
.sec-hd {color: var(--navy);}
[data-theme="dark"] .sec-hd {color: var(--ink);}
.gold-bar {background: var(--navy-mid);}
[data-theme="dark"] .gold-bar {background: var(--gold);}

/* STATS */
.stats-band{background:var(--ghost);border-bottom:1px solid var(--cream);box-shadow:0 2px 10px rgba(0,0,0,.02);}
.stats-row{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.stat-box{padding:24px 16px;text-align:center;border-right:1px solid var(--cream)}
.stat-box:last-child{border-right:none}
.stat-box .num{font-family:var(--fd);font-size:1.8rem;font-weight:700;color:var(--navy);line-height:1}
[data-theme="dark"] .stat-box .num{color:var(--gold);}
.stat-box .lbl{font-size:.75rem;font-weight:700;color:var(--muted);margin-top:6px}
@media(max-width:600px){.stats-row{grid-template-columns:repeat(2,1fr)}.stat-box{border-bottom:1px solid var(--cream)}}

/* GRIDS */
.c-grid, .r-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.ch-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.ct-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;text-align:center}

/* CARDS */
.c-card, .r-card, .ch-box, .ct-item {
  background: var(--white);
  border-radius: var(--r);
  border: 1px solid rgba(76, 42, 87, 0.04);
  transition: all .3s ease;
  box-shadow: 0 8px 24px rgba(76, 42, 87, 0.04);
}
[data-theme="dark"] .c-card, [data-theme="dark"] .r-card, [data-theme="dark"] .ch-box, [data-theme="dark"] .ct-item {
  background: var(--ghost);
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: var(--sh);
}
.c-card, .r-card {padding:32px 24px;}
.ch-box {padding:20px;}
.ct-item {padding:28px 18px;}

.c-card:hover, .r-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(76, 42, 87, 0.1);
  border-color: rgba(76, 42, 87, 0.1);
}
.c-card .icon, .r-card .icon{font-size:2.4rem;margin-bottom:12px}
.c-card h3, .r-card h3{font-family:var(--fd);font-size:1.1rem;color:var(--navy);margin-bottom:8px}
[data-theme="dark"] .c-card h3, [data-theme="dark"] .r-card h3{color:var(--ink);}
.c-card p, .r-card p{color:var(--muted);font-size:.9rem;line-height:1.6}

/* IT HUB SPECIFIC */
.sme-grid{display:grid;grid-template-columns:2fr 1fr;gap:32px}
@media(max-width:900px){.sme-grid{grid-template-columns:1fr}}
.stitle{display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--navy-mid);padding-bottom:10px;margin-bottom:20px}
.stitle h3{font-family:var(--fd);font-size:1.1rem;font-weight:700;color:var(--navy);}
[data-theme="dark"] .stitle h3{color:var(--ink);}
.stitle .line{flex:1;height:1px;background:var(--cream)}
.stitle .see{font-size:.7rem;font-weight:700;color:var(--navy-mid);text-transform:uppercase;letter-spacing:.08em;cursor:pointer;}
[data-theme="dark"] .stitle .see{color:var(--gold);}

.k-card {
  border: 1px solid rgba(76, 42, 87, 0.04);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--white);
  transition: all .3s;
  box-shadow: 0 8px 24px rgba(76, 42, 87, 0.04);
}
[data-theme="dark"] .k-card{background:var(--ghost); border-color: rgba(255, 255, 255, 0.05);}
.k-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(76, 42, 87, 0.1);
}
.k-card .iw{height:160px;overflow:hidden}
.k-card .iw img{width:100%;height:100%;object-fit:cover;transition:transform .4s;opacity:0.85}
.k-card:hover .iw img{transform:scale(1.05);opacity:1}
.k-card .bd{padding:18px}
.cat{display:inline-block;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 12px;border-radius:30px;margin-bottom:8px}
.cat-mkt{background:var(--navy-light);color:var(--navy-mid)}
[data-theme="dark"] .cat-mkt{color:var(--gold)}
.cat-fin{background:rgba(46,125,50,0.1);color:#2e7d32}
.k-card .ttl{font-family:var(--fd);font-size:.9rem;font-weight:600;color:var(--navy);line-height:1.35;margin-bottom:6px}
[data-theme="dark"] .k-card .ttl{color:var(--ink);}
.k-card .exc{font-size:.78rem;color:var(--slate);line-height:1.6;margin-bottom:6px}

.filter-bar{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.filter-bar input,.filter-bar select{border:1px solid var(--cream);border-radius:8px;padding:10px 14px;font-size:.9rem;color:var(--ink);outline:none;flex:1;min-width:140px;font-family:var(--fb);background:var(--white);}
[data-theme="dark"] .filter-bar input, [data-theme="dark"] .filter-bar select{background:var(--ghost);}
.filter-bar input:focus{border-color:var(--navy-mid)}

.dir-card {
  border: 1px solid rgba(76, 42, 87, 0.04);
  border-radius: var(--r);
  padding: 16px;
  background: var(--white);
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 10px;
  box-shadow: 0 6px 16px rgba(76, 42, 87, 0.03);
  transition: all .2s;
}
[data-theme="dark"] .dir-card{background:var(--ghost); border-color: rgba(255, 255, 255, 0.05);}
.dir-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(76, 42, 87, 0.08);
  border-color: rgba(76, 42, 87, 0.1);
}
.dir-av{width:50px;height:50px;border-radius:12px;background:var(--navy-light);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:1rem;font-weight:700;color:var(--navy-mid);flex-shrink:0}
[data-theme="dark"] .dir-av{color:var(--gold);}
.dir-nm{font-weight:700;font-size:.95rem;color:var(--navy)}
[data-theme="dark"] .dir-nm{color:var(--ink);}
.dir-mt{font-size:.75rem;color:var(--muted)}
.dir-tag{display:inline-block;background:var(--cream);color:var(--slate);font-size:.65rem;font-weight:600;padding:2px 10px;border-radius:30px;margin-top:4px}

.ev-item{display:flex;gap:16px;align-items:center;border-left:4px solid var(--navy-mid);padding:14px;background:var(--white);border-radius:0 var(--r) var(--r) 0;margin-bottom:12px;border:1px solid var(--cream); border-left-width: 4px;}
[data-theme="dark"] .ev-item{background:var(--ghost); border-left-color:var(--gold);}
.ev-date{background:var(--navy-light);color:var(--navy-mid);border-radius:8px;text-align:center;padding:8px 12px;min-width:55px;}
.ev-date .d{font-family:var(--fd);font-size:1.4rem;font-weight:700;line-height:1}
.ev-date .m{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;}

.fund-item{padding:14px 0;border-bottom:1px solid var(--cream)}
.fund-item:last-child{border-bottom:none}
.fund-badge{font-size:.6rem;font-weight:700;padding:3px 10px;border-radius:30px;text-transform:uppercase;letter-spacing:.06em;display:inline-block;margin-bottom:6px;background:var(--navy-light);color:var(--navy-mid)}
[data-theme="dark"] .fund-badge{color:var(--gold);}
.fund-ttl{font-family:var(--fd);font-size:.9rem;font-weight:600;color:var(--navy)}
[data-theme="dark"] .fund-ttl{color:var(--ink);}
.fund-desc{font-size:.8rem;color:var(--muted);margin-top:2px}

/* CTA BANNER */
.cta-banner{background:linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);border-radius:20px;padding:48px 40px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--sh);max-width:1200px;margin:0 auto; border:1px solid var(--cream)}
[data-theme="dark"] .cta-banner{background:linear-gradient(135deg, var(--ghost) 0%, var(--navy-mid) 100%); color:var(--ink);}
.cta-banner h3{font-family:var(--fd);font-size:1.6rem; color:#fff;}
[data-theme="dark"] .cta-banner h3{color:var(--ink);}
.cta-banner p{color:var(--navy-light);font-size:.95rem;margin-top:8px;}
[data-theme="dark"] .cta-banner p{color:var(--muted);}
.cta-row{display:flex;gap:10px;margin-top:20px;}
.cta-input{flex:1;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;padding:12px 16px;border-radius:6px;outline:none;font-family:var(--fb)}
[data-theme="dark"] .cta-input{background:rgba(0,0,0,.2);border:1px solid var(--navy);color:var(--ink);}
.cta-sub{background:var(--navy-mid);color:#fff;border:none;border-radius:6px;padding:12px 24px;font-size:.9rem;font-weight:700;cursor:pointer;transition:background .2s;font-family:var(--fb)}
[data-theme="dark"] .cta-sub{background:var(--gold);}
.cta-sub:hover{background:var(--orange)}
.cta-priv{font-size:.75rem;color:rgba(255,255,255,.7);margin-top:8px;}
[data-theme="dark"] .cta-priv{color:var(--slate);}

/* CHARTS */
.ch-box h4{font-family:var(--fd);font-size:1rem;color:var(--navy);text-align:center;margin-bottom:16px}
[data-theme="dark"] .ch-box h4{color:var(--ink);}
.ch-box canvas{max-height:220px}
.ref-block{margin-top:28px;padding:16px 20px;background:var(--ghost);border-radius:10px;border-left:3px solid var(--gold);border:1px solid var(--cream)}
.ref-block p{font-size:.74rem;color:var(--slate);line-height:1.7}

/* RESUME TABS & TIMELINE */
.tab-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px}
.tab-b{font-family:var(--fb);font-size:.9rem;font-weight:600;padding:10px 24px;border-radius:30px;border:1.5px solid var(--navy-light);background:var(--white);color:var(--muted);cursor:pointer;transition:all .2s}
[data-theme="dark"] .tab-b{background:var(--ghost); border-color:var(--navy);}
.tab-b.on{background:var(--navy);color:#fff;border-color:var(--navy)}
[data-theme="dark"] .tab-b.on{background:var(--navy-mid);border-color:var(--navy-mid)}
.tab-b:hover:not(.on){border-color:var(--navy-mid);color:var(--navy-mid)}
[data-theme="dark"] .tab-b:hover:not(.on){background:var(--navy-light);border-color:var(--navy-light);color:var(--ink);}

.tl{position:relative;padding-left:30px;max-width:620px;margin:0 auto}
.tl::before{content:'';position:absolute;left:7px;top:0;bottom:0;width:2px;background:var(--cream);border-radius:2px}
.tl-i{position:relative;margin-bottom:28px}
.tl-dot{position:absolute;left:-26px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--white);border:3px solid var(--navy-mid)}
[data-theme="dark"] .tl-dot{background:var(--ghost); border-color:var(--gold);}
.tl-yr{font-size:.75rem;font-weight:700;color:var(--navy-mid);letter-spacing:.05em;text-transform:uppercase}
[data-theme="dark"] .tl-yr{color:var(--gold);}
.tl-tt{font-family:var(--fd);font-size:1.05rem;color:var(--navy);margin:4px 0}
[data-theme="dark"] .tl-tt{color:var(--ink);}
.tl-org{font-size:.85rem;font-weight:600;color:var(--slate);margin-bottom:3px}
.tl-desc{font-size:.82rem;color:var(--muted);margin-top:3px;line-height:1.5}

/* About Profile */
.degree-note{font-weight:400;color:var(--muted)}
.section-title-mt{margin-block-start:32px}
.icon-gold{color:var(--gold)}
.skills-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.skills-label-mt{margin-block-start:14px}
.skill-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.skill-tags span{font-size:.8rem;padding:4px 12px;border-radius:20px;background:var(--card-bg);border:1px solid var(--border);color:var(--slate)}
.interest-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.i-tag{font-size:.82rem;padding:5px 14px;border-radius:20px;background:rgba(107,66,193,.1);border:1px solid rgba(107,66,193,.25);color:#6f42c1}
[data-theme="dark"] .i-tag{background:rgba(107,66,193,.2);color:#b48ef5}
.cv-badge{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.05em;padding:2px 8px;border-radius:4px;text-transform:uppercase}
.cv-badge-conf{background:#e8f4fd;color:#0d6efd}
.cv-badge-journal{background:#e8f8ef;color:#198754}
.cv-badge-prog{background:#fff3cd;color:#856404}
.cv-badge-thesis{background:#f0e8ff;color:#6f42c1}
[data-theme="dark"] .cv-badge-conf{background:rgba(13,110,253,.2);color:#6ea8fe}
[data-theme="dark"] .cv-badge-journal{background:rgba(25,135,84,.2);color:#75b798}
[data-theme="dark"] .cv-badge-prog{background:rgba(133,100,4,.2);color:#ffc107}
[data-theme="dark"] .cv-badge-thesis{background:rgba(111,66,193,.2);color:#b48ef5}

/* CONTACT ICONS */
.ct-item .icon{font-size:1.8rem;color:var(--navy-mid);margin-bottom:8px;}
[data-theme="dark"] .ct-item .icon{color:var(--gold);}
.ct-item h4{font-family:var(--fd);font-size:1rem;color:var(--navy);margin-bottom:4px}
[data-theme="dark"] .ct-item h4{color:var(--ink);}
.ct-item p, .ct-item a{color:var(--muted); text-decoration:none; font-size:.9rem;}

/* SCROLL TOP */
.go-top{position:fixed;bottom:24px;right:24px;z-index:90;width:50px;height:50px;border-radius:50%;background:var(--navy-mid);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,0.15);opacity:0;pointer-events:none;font-size:1.4rem; transition:all 0.3s;}
[data-theme="dark"] .go-top{background:var(--gold); box-shadow:0 6px 20px rgba(0,0,0,0.4);}
.go-top.show{opacity:1;pointer-events:all}
.go-top:hover{transform:translateY(-4px); background:var(--orange);}

/* ══════════════════════════════════════════
   ABOUT PAGE & CONTACT PAGE STYLES
══════════════════════════════════════════ */
/* About Hero */
.about-hero { padding: 100px 24px 80px; background: linear-gradient(135deg, var(--navy-light) 0%, var(--white) 100%); transition: background 0.3s ease; }
[data-theme="dark"] .about-hero { background: linear-gradient(140deg, var(--ghost) 0%, var(--navy-deep) 100%); }
.about-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: center; }
.about-text h1 { font-family: var(--fd); font-size: clamp(2.5rem, 4vw, 3.5rem); color: var(--navy); margin-bottom: 10px; font-weight: 800; line-height: 1.3; }
[data-theme="dark"] .about-text h1 { color: var(--ink); }
.about-text h3 { font-family: var(--fd); font-size: 1.2rem; color: var(--navy-mid); margin-bottom: 20px; font-weight: 700; }
[data-theme="dark"] .about-text h3 { color: var(--gold); }
.about-text p { color: var(--muted); line-height: 1.8; margin-bottom: 16px; font-size: 1.05rem; }
.about-image img { width: 100%; max-width: 450px; margin: 0 auto; border-radius: 20px; border: 6px solid var(--navy-mid); box-shadow: 0 15px 35px rgba(109, 64, 164, 0.2); transition: all 0.3s; }
[data-theme="dark"] .about-image img { border-color: var(--gold); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
@media(max-width: 900px) { .about-container { grid-template-columns: 1fr; text-align: center; gap: 40px; } .about-text { text-align: center; } }

/* About Grids & Lists */
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; max-width: 1200px; margin: 0 auto 40px; padding: 0 24px 40px; border-bottom: 1px solid var(--cream); }
.about-grid:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { position: relative; padding-left: 45px; margin-bottom: 24px; }
.info-list li i { position: absolute; left: 0; top: 2px; font-size: 1.6rem; color: var(--navy-mid); }
[data-theme="dark"] .info-list li i { color: var(--gold); }
.info-list h5 { font-family: var(--fd); color: var(--navy); font-size: 1.05rem; margin-bottom: 6px; font-weight: 700; }
[data-theme="dark"] .info-list h5 { color: var(--ink); }
.info-list p { color: var(--muted); font-size: 0.95rem; line-height: 1.6; margin: 0; }
.info-list strong { color: var(--ink); }
[data-theme="dark"] .info-list strong { color: var(--muted); font-weight: bold; }

/* Contact Page Styles */
.contact-wrapper { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.contact-card { background: var(--white); border: 1px solid var(--cream); border-radius: var(--r); padding: 30px; box-shadow: var(--sh); transition: all 0.3s; display: flex; flex-direction: column; gap: 8px; }
[data-theme="dark"] .contact-card { background: var(--ghost); border-color: rgba(255,255,255,0.05); }
.contact-card:hover { transform: translateY(-3px); border-color: var(--navy-mid); }
[data-theme="dark"] .contact-card:hover { border-color: var(--gold); }
.contact-card i { font-size: 2rem; color: var(--orange); margin-bottom: 10px; }
.contact-card h4 { font-family: var(--fd); color: var(--navy); font-size: 1.1rem; font-weight: 700; margin:0;}
[data-theme="dark"] .contact-card h4 { color: var(--ink); }
.contact-card p, .contact-card a { color: var(--muted); font-size: 1rem; text-decoration: none; margin:0;}

/* Fixed Theme Toggle */
.theme-btn-fixed { position: fixed; bottom: 24px; left: 24px; z-index: 99; background: var(--cream); border: none; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.4rem; box-shadow: var(--sh); transition: all 0.3s; }
.theme-btn-fixed:hover { transform: translateY(-4px); background: var(--navy-light); }

/* ══════════════════════════════════════════
   1. LANGUAGE TOGGLE (EN / MM) - ဘာသာစကားပြောင်းရန်
══════════════════════════════════════════ */
body.lang-en .mm { display: none !important; }
body.lang-mm .en { display: none !important; }

/* ══════════════════════════════════════════
   2. ABOUT PAGE: CORE VALUES & CONTACT LAYOUT
══════════════════════════════════════════ */
/* Core Values Cards */
.val-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.val-card { background: var(--white); border: 1px solid var(--cream); border-radius: var(--r); padding: 32px 24px; box-shadow: var(--sh); transition: all 0.3s; }
[data-theme="dark"] .val-card { background: var(--ghost); border-color: rgba(255,255,255,0.05); }
.val-card:hover { transform: translateY(-5px); border-color: var(--navy-mid); }
[data-theme="dark"] .val-card:hover { border-color: var(--gold); }
.val-card .icon { font-size: 2.2rem; margin-bottom: 16px; display: inline-block; }

/* ══════════════════════════════════════════
   CONTACT CARDS (HORIZONTAL GRID LAYOUT)
══════════════════════════════════════════ */
.contact-wrapper { 
  max-width: 1000px; 
  margin: 0 auto; 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  gap: 24px; 
  padding: 0 24px; 
}
.contact-card { 
  background: var(--white); 
  border: 1px solid var(--cream); 
  border-radius: var(--r); 
  padding: 32px 24px; 
  box-shadow: var(--sh); 
  transition: all 0.3s; 
  text-align: center; /* စာသားများ အလယ်ဗဟိုသို့ပို့ရန် */
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
}
[data-theme="dark"] .contact-card { 
  background: var(--ghost); 
  border-color: rgba(255,255,255,0.05); 
}
.contact-card:hover { 
  transform: translateY(-5px); 
  border-color: var(--navy-mid); 
}
[data-theme="dark"] .contact-card:hover { 
  border-color: var(--gold); 
}
/* Icon အရောင်နှင့် ဆိုဒ်ကို ပုံပါအတိုင်း ပြင်ဆင်ခြင်း */
.contact-card i { 
  font-size: 2.2rem; 
  color: #ff4757; /* အနီ/ပန်းရောင် သန်းသောအရောင် */
  margin-bottom: 16px; 
}
.contact-card h4 { 
  font-family: var(--fd); 
  font-size: 1.1rem; 
  color: var(--navy); 
  margin: 0 0 8px 0; 
  font-weight: 700; 
}
[data-theme="dark"] .contact-card h4 { color: var(--ink); }
.contact-card p, .contact-card a {
  color: var(--muted);
  margin: 0;
  text-decoration: none;
  font-size: 0.95rem;
}

/* References Marquee */
.ref-heading { color: #4b2354; }
.references-marquee-container {
  overflow: hidden;
  white-space: nowrap;
}
.references-scroller {
  display: inline-block;
  white-space: nowrap;
  animation: marquee-scroll 40s linear infinite;
}
.references-marquee-container:hover .references-scroller {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ref-dot {
  font-size: 8px;
  color: #6f42c1;
  vertical-align: middle;
  margin-inline-end: 8px;
}

/* Nav Dropdown */
/* ── Desktop Dropdown ── */
.nav-links li.has-drop { position: relative; }
.nav-links li.has-drop > a::after { content: " ▾"; font-size: .6rem; opacity: .6; }

.nav-drop {
  display: none;
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  min-inline-size: 210px;
  z-index: 300;
  overflow: visible;
  padding-block: 6px;
}
.nav-links li.has-drop:hover .nav-drop,
.nav-links li.has-drop:focus-within .nav-drop { display: block; }

.nav-drop > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: #cbd5e1;
  text-decoration: none;
  font-size: .83rem;
  font-weight: 600;
  transition: background .15s, color .15s;
  white-space: nowrap;
  border-block-end: 1px solid rgba(255,255,255,.05);
}
.nav-drop > a:last-of-type { border-block-end: none; }
.nav-drop > a i { color: #f59e0b; font-size: .95rem; inline-size: 16px; flex-shrink: 0; }
.nav-drop > a:hover { background: rgba(255,255,255,.07); color: #f59e0b; }

/* ── Nested Sub-group (folder → right submenu) ── */
.nav-sub-group { position: relative; }

.nav-sub-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  color: #cbd5e1;
  font-size: .83rem;
  font-weight: 700;
  cursor: default;
  gap: 8px;
  border-block-end: 1px solid rgba(255,255,255,.05);
  transition: background .15s, color .15s;
}
.nav-sub-group:last-child .nav-sub-trigger { border-block-end: none; }
.nav-sub-trigger-left { display: flex; align-items: center; gap: 10px; }
.nav-sub-trigger-left i { color: #f59e0b; font-size: .95rem; inline-size: 16px; flex-shrink: 0; }
.nav-sub-trigger > .ri-arrow-right-s-line { color: rgba(255,255,255,.35); font-size: 1rem; flex-shrink: 0; }

.nav-sub-drop {
  display: none;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 100%;
  margin-inline-start: 4px;
  background: #0f172a;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  min-inline-size: 200px;
  padding-block: 6px;
  z-index: 400;
}
.nav-sub-group:hover .nav-sub-drop { display: block; }
.nav-sub-group:hover .nav-sub-trigger { background: rgba(255,255,255,.07); color: #f59e0b; }
.nav-sub-group:hover .nav-sub-trigger > .ri-arrow-right-s-line { color: #f59e0b; }

.nav-sub-drop a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: #cbd5e1;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 600;
  transition: background .15s, color .15s;
  white-space: nowrap;
  border-block-end: 1px solid rgba(255,255,255,.05);
}
.nav-sub-drop a:last-child { border-block-end: none; }
.nav-sub-drop a i { color: #f59e0b; font-size: .9rem; inline-size: 16px; flex-shrink: 0; }
.nav-sub-drop a:hover { background: rgba(255,255,255,.07); color: #f59e0b; }

/* Mobile sub-links */
.mob-sub { display: flex; flex-direction: column; gap: 2px; padding-inline-start: 20px; margin-block-start: 4px; }
.mob-sub a { font-size: .88rem; padding: 7px 0; color: var(--muted); text-decoration: none; display: flex; align-items: center; gap: 6px; }
.mob-sub a:hover { color: var(--gold); }

/* ══════════════════════════════════════════
   BLOG PAGE STYLES (posts/blog.html)
══════════════════════════════════════════ */
.blog-hero { padding: 80px 24px 60px; text-align: center; background: linear-gradient(135deg, var(--navy-light) 0%, var(--white) 100%); border-bottom: 1px solid var(--cream); transition: background 0.3s; }
[data-theme="dark"] .blog-hero { background: linear-gradient(140deg, var(--ghost) 0%, var(--navy-deep) 100%); border-bottom: none; }
/* Blog Page ထိပ်ရှိ Logo အတွက် ဒီဇိုင်း */
.blog-logo { 
  width: 140px; /* Logo အရွယ်အစားကို လိုအပ်သလို အတိုးအလျှော့ လုပ်နိုင်ပါသည် */
  height: auto; 
  margin: 0 auto 20px auto; /* 0 auto ဖြင့် အလယ်ဗဟိုသို့ ပို့ပေးသည် */
  display: block; 
  object-fit: contain; 
}
.blog-hero h1 { font-family: var(--fd); font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--navy); font-weight: 800; }
[data-theme="dark"] .blog-hero h1 { color: var(--ink); }

/* Search Wrap */
.search-wrap { max-width: 600px; margin: -25px auto 30px; position: relative; z-index: 10; padding: 0 24px; }
.search-input { width: 100%; padding: 14px 24px; border-radius: 50px; border: 1px solid var(--cream); background: var(--white); color: var(--navy); font-size: 1rem; box-shadow: var(--sh); outline: none; transition: 0.3s; }
[data-theme="dark"] .search-input { background: var(--ghost); border-color: rgba(255,255,255,0.1); color: var(--ink); }
.search-input:focus { border-color: var(--navy-mid); }
[data-theme="dark"] .search-input:focus { border-color: var(--gold); }

/* Category Navigation */
.category-nav-wrapper { background: var(--white); border-bottom: 1px solid var(--cream); padding: 15px 0; position: sticky; top: 0; z-index: 99; transition: background 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
[data-theme="dark"] .category-nav-wrapper { background: var(--ghost); border-color: rgba(255,255,255,0.05); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.nav-category { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 768px) { .nav-category { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 10px; padding-left: 20px;} }
.cat-item { text-align: center; color: var(--muted); cursor: pointer; text-decoration: none; transition: 0.3s; padding: 8px 12px; min-width: 80px; border-radius: 12px; border: 1px solid transparent; }
.cat-item i { display: block; font-size: 1.5rem; color: var(--navy-mid); margin-bottom: 4px; }
[data-theme="dark"] .cat-item i { color: var(--gold); }
.cat-item span { font-size: 0.85rem; font-weight: 700; display: block; white-space: nowrap; font-family: var(--fb); }
.cat-item:hover, .cat-item.active { background: var(--navy-light); color: var(--navy); border-color: var(--navy-mid); }
[data-theme="dark"] .cat-item:hover, [data-theme="dark"] .cat-item.active { background: rgba(170,93,198,0.1); color: var(--ink); border-color: var(--gold); }

/* Blog Cards */
.blog-card { background: var(--white); border: 1px solid var(--cream); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); transition: 0.3s; height: 100%; display: flex; flex-direction: column; }
[data-theme="dark"] .blog-card { background: var(--ghost); border-color: rgba(255,255,255,0.05); }
.blog-card:hover { transform: translateY(-8px); border-color: var(--navy-mid); }
[data-theme="dark"] .blog-card:hover { border-color: var(--gold); }
.blog-card img { width: 100%; height: 180px; object-fit: cover; border-bottom: 1px solid var(--cream); }
[data-theme="dark"] .blog-card img { border-bottom-color: rgba(255,255,255,0.05); }
.blog-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.badge-cat { background: var(--navy-light); color: var(--navy-mid); padding: 4px 10px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; margin-bottom: 12px; display: inline-block; width: fit-content; font-family: var(--fb); }
[data-theme="dark"] .badge-cat { background: rgba(170,93,198,0.2); color: var(--gold); }
.blog-content h5 { font-family: var(--fd); font-size: 1.1rem; font-weight: 700; color: var(--navy); margin-bottom: 10px; line-height: 1.5; }
[data-theme="dark"] .blog-content h5 { color: var(--ink); }
.blog-content p { font-size: 0.95rem; color: var(--muted); margin-bottom: 20px; line-height: 1.6; }
.btn-read { background: var(--navy-mid); color: white; width: 100%; border-radius: 8px; padding: 10px; font-size: 0.95rem; font-weight: 700; border: none; text-decoration: none; text-align: center; margin-top: auto; display: block; transition: 0.3s; font-family: var(--fb); }
[data-theme="dark"] .btn-read { background: var(--gold); color: var(--navy-deep); }
.btn-read:hover { background: var(--navy); color: white; }
[data-theme="dark"] .btn-read:hover { background: #e6c555; color: var(--navy-deep); }

/* Table of Contents (TOC) */
.toc-section { background: var(--white); border-radius: var(--r); padding: 30px; margin-top: 50px; border-top: 5px solid var(--navy-mid); box-shadow: var(--sh); border: 1px solid var(--cream); }
[data-theme="dark"] .toc-section { background: var(--ghost); border-color: rgba(255,255,255,0.05); border-top-color: var(--gold); }
.toc-title { font-family: var(--fd); font-weight: 800; margin-bottom: 20px; color: var(--navy); font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
[data-theme="dark"] .toc-title { color: var(--ink); }
.toc-title i { color: var(--navy-mid); }
[data-theme="dark"] .toc-title i { color: var(--gold); }
.toc-list { column-count: 2; list-style: none; padding: 0; margin: 0; gap: 20px; }
@media (max-width: 768px) { .toc-list { column-count: 1; } }
.toc-list li a { text-decoration: none; color: var(--muted); font-size: 0.95rem; font-weight: 600; transition: 0.3s; display: block; padding: 10px 0; border-bottom: 1px dashed var(--cream); }
[data-theme="dark"] .toc-list li a { border-bottom-color: rgba(255,255,255,0.1); }
.toc-list li a:hover { color: var(--navy-mid); padding-left: 5px; }
[data-theme="dark"] .toc-list li a:hover { color: var(--gold); }
/* Page Switch Links */
.page-switch { display: flex; justify-content: center; gap: 20px; margin: 32px 0 16px; padding: 0 24px; }
.page-switch a { padding: 12px 24px; border-radius: 50px; text-decoration: none; font-weight: 700; color: var(--muted); border: 2px solid var(--cream); transition: .3s; }
[data-theme='dark'] .page-switch a { border-color: rgba(255,255,255,.1); }
.page-switch a:hover { background: var(--navy-mid); color: white; border-color: var(--navy-mid); }
[data-theme='dark'] .page-switch a:hover { background: var(--gold); border-color: var(--gold); }

/* Single Post Layout */
.post-main { max-width: 800px; margin: 60px auto 80px; padding: 0 24px; }
.post-header { text-align: center; margin-bottom: 40px; }
.post-meta { margin-bottom: 15px; }
.post-meta .post-date { color: var(--muted); font-size: 0.9rem; margin-left: 10px; }
.post-title { font-family: var(--fd); font-weight: 800; color: var(--navy); line-height: 1.4; }
[data-theme="dark"] .post-title { color: var(--ink); }
.post-cover { width: 100%; border-radius: var(--r); margin-bottom: 40px; box-shadow: var(--sh); }
.post-content { font-size: 1.05rem; line-height: 1.8; color: var(--text-dark); }
.post-back { margin-top: 50px; text-align: center; }
.post-back .btn-read { display: inline-block; width: auto; padding: 10px 30px; }

/* ── Single Post Page ── */
.single-wrap { max-width: 820px; margin: 0 auto; padding: 48px 24px 80px; }
.single-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); margin-bottom: 28px; }
.single-breadcrumb a { color: var(--navy-mid); text-decoration: none; font-weight: 600; }
.single-breadcrumb a:hover { color: var(--gold); }
.single-breadcrumb i { font-size: .75rem; }
.single-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.single-meta .post-date, .single-meta .post-author { color: var(--muted); font-size: .9rem; }
.single-title { font-family: var(--fd); font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; color: var(--navy); line-height: 1.35; margin-bottom: 28px; }
[data-theme="dark"] .single-title { color: var(--ink); }
.single-cover { width: 100%; border-radius: var(--r); margin-bottom: 36px; box-shadow: var(--sh); max-height: 420px; object-fit: cover; }
.single-content { font-size: 1.05rem; line-height: 1.9; color: var(--ink); }
.single-content h2, .single-content h3 { font-family: var(--fd); color: var(--navy); margin: 2rem 0 .8rem; }
[data-theme="dark"] .single-content h2, [data-theme="dark"] .single-content h3 { color: var(--gold); }
.single-content p { margin-bottom: 1.2rem; }
.single-content ul, .single-content ol { padding-left: 1.4rem; margin-bottom: 1.2rem; }
.single-content li { margin-bottom: .5rem; }
.single-content code { background: var(--navy-light); color: var(--navy-mid); padding: 2px 7px; border-radius: 5px; font-size: .92em; }
.single-content blockquote { border-left: 4px solid var(--navy-mid); padding: 12px 20px; background: var(--navy-light); border-radius: 0 var(--r) var(--r) 0; margin: 24px 0; color: var(--muted); font-style: italic; }
.single-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--cream); }
.single-tags .tag-icon { color: var(--muted); margin-top: 4px; }
.single-tags a { padding: 5px 14px; border-radius: 20px; background: var(--navy-light); color: var(--navy-mid); font-size: .85rem; font-weight: 600; text-decoration: none; transition: .2s; }
.single-tags a:hover { background: var(--navy-mid); color: #fff; }
[data-theme="dark"] .single-tags a { background: var(--gold-light); color: var(--gold); }
[data-theme="dark"] .single-tags a:hover { background: var(--gold); color: var(--navy-deep); }
.single-related { background: var(--ghost); border-radius: var(--r); padding: 28px; margin-top: 40px; border: 1px solid var(--cream); }
[data-theme="dark"] .single-related { border-color: rgba(255,255,255,.06); }
.single-related h4 { font-family: var(--fd); color: var(--navy); font-size: 1.05rem; font-weight: 800; margin-bottom: 16px; }
[data-theme="dark"] .single-related h4 { color: var(--ink); }
.related-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--cream); text-decoration: none; color: var(--ink); transition: .2s; }
[data-theme="dark"] .related-item { border-color: rgba(255,255,255,.06); }
.related-item:last-child { border-bottom: none; }
.related-item:hover { color: var(--navy-mid); padding-left: 4px; }
[data-theme="dark"] .related-item:hover { color: var(--gold); }
.related-item i { color: var(--navy-mid); margin-top: 3px; flex-shrink: 0; }
[data-theme="dark"] .related-item i { color: var(--gold); }
.related-item span { font-size: .93rem; font-weight: 600; line-height: 1.4; }
.back-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 36px; padding: 11px 28px; border-radius: 50px; background: var(--navy-mid); color: #fff; font-weight: 700; text-decoration: none; transition: .3s; font-size: .95rem; }
.back-btn:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }
[data-theme="dark"] .back-btn { background: var(--gold); color: var(--navy-deep); }
[data-theme="dark"] .back-btn:hover { background: var(--orange); }

/* ── Newsletter Box (Single Post) ── */
.newsletter-box { background: var(--navy-light); border-radius: var(--r); padding: 25px; margin-block-start: 40px; box-shadow: var(--sh); }
[data-theme="dark"] .newsletter-box { background: var(--ghost); }
.newsletter-title { font-size: 1.1rem; font-weight: 700; color: var(--navy); margin-block-end: 14px; display: flex; align-items: center; gap: 8px; padding-block-end: 8px; border-block-end: 2px solid var(--navy-mid); }
[data-theme="dark"] .newsletter-title { color: var(--ink); border-block-end-color: var(--gold); }
.newsletter-title i { color: var(--navy-mid); }
[data-theme="dark"] .newsletter-title i { color: var(--gold); }
.newsletter-desc { color: var(--muted); font-size: .88rem; font-weight: 600; margin-block-end: 16px; }
.newsletter-form { display: flex; flex-direction: column; gap: 12px; }
.newsletter-input { inline-size: 100%; padding: 12px 16px; border-radius: 8px; border: none; background: var(--white); color: var(--ink); font-size: .95rem; outline: none; box-shadow: var(--sh); transition: .3s; box-sizing: border-box; }
.newsletter-input:focus { box-shadow: 0 0 0 2px var(--navy-mid); }
[data-theme="dark"] .newsletter-input:focus { box-shadow: 0 0 0 2px var(--gold); }
.newsletter-btn { inline-size: 100%; padding: 11px; border-radius: 8px; border: none; background: var(--navy-mid); color: #fff; font-weight: 700; font-size: .95rem; cursor: pointer; transition: .3s; box-shadow: var(--sh); }
.newsletter-btn:hover { background: var(--navy); transform: translateY(-2px); }
[data-theme="dark"] .newsletter-btn { background: var(--gold); color: var(--navy-deep); }
[data-theme="dark"] .newsletter-btn:hover { background: var(--orange); }

/* ── Article (Single Post) Layout ── */
.article-header { padding: 40px 24px 30px; background: var(--white); border-block-end: 1px solid var(--cream); }
[data-theme="dark"] .article-header { background: var(--ghost); border-block-end-color: rgba(255,255,255,.06); }
.art-inner { max-width: 1200px; margin: 0 auto; }
.art-title { font-family: var(--fd); font-size: clamp(1.5rem,4vw,2.2rem); font-weight: 800; color: var(--navy); line-height: 1.35; margin-block: 16px; }
[data-theme="dark"] .art-title { color: var(--ink); }
.art-meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font-size: .9rem; font-weight: 600; }
.art-meta i { color: var(--navy-mid); margin-inline-end: 4px; }
[data-theme="dark"] .art-meta i { color: var(--gold); }
.art-layout { max-width: 1200px; margin: 40px auto 80px; padding: 0 24px; display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
@media (max-width: 900px) { .art-layout { grid-template-columns: 1fr; } }
.art-cover { inline-size: 100%; border-radius: var(--r); margin-block-end: 28px; box-shadow: var(--sh); max-block-size: 420px; object-fit: cover; }
.art-share { display: flex; align-items: center; gap: 10px; padding-block: 20px; border-block: 1px solid var(--cream); margin-block-start: 32px; font-weight: 600; color: var(--muted); font-size: .93rem; flex-wrap: wrap; }
[data-theme="dark"] .art-share { border-color: rgba(255,255,255,.07); }
.share-btn { display: inline-flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 36px; border-radius: 50%; font-size: 1rem; text-decoration: none; transition: .3s; }
.share-fb { background: var(--navy-light); color: #1877f2; }
.share-tw { background: var(--navy-light); color: var(--ink); }
.share-tg { background: var(--navy-light); color: #229ed9; }
.share-btn:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.art-sidebar { display: flex; flex-direction: column; gap: 20px; }
.sidebar-widget { background: var(--white); border-radius: var(--r); padding: 22px; box-shadow: var(--sh); border: 1px solid var(--cream); }
[data-theme="dark"] .sidebar-widget { background: var(--ghost); border-color: rgba(255,255,255,.06); }
.widget-title { font-size: 1rem; font-weight: 700; color: var(--navy); margin-block-end: 16px; padding-block-end: 8px; border-block-end: 2px solid var(--navy-mid); display: flex; align-items: center; gap: 8px; }
[data-theme="dark"] .widget-title { color: var(--ink); border-block-end-color: var(--gold); }
.widget-title i { color: var(--navy-mid); }
[data-theme="dark"] .widget-title i { color: var(--gold); }
.widget-desc { font-size: .87rem; color: var(--muted); font-weight: 600; margin-block-end: 14px; }
.popular-item { display: block; padding: 10px 8px; border-radius: 8px; text-decoration: none; transition: .3s; margin-block-end: 4px; }
.popular-item:hover { background: var(--navy-light); transform: translateX(4px); }
[data-theme="dark"] .popular-item:hover { background: var(--gold-light); }
.popular-title { font-size: .9rem; font-weight: 600; color: var(--navy); margin: 0 0 4px; line-height: 1.4; }
[data-theme="dark"] .popular-title { color: var(--ink); }
.popular-cat { color: var(--muted); font-size: .8rem; font-weight: 600; }

/* ── Single Post (Bootstrap layout) ── */
.article-header { padding: 36px 0 28px; background: var(--white); border-block-end: 4px solid var(--navy-mid); }
[data-theme="dark"] .article-header { background: var(--ghost); border-block-end-color: var(--gold); }
.art-breadcrumb { color: var(--muted); font-size: .88rem; font-weight: 600; margin-block-end: 14px; }
.art-breadcrumb a { color: var(--navy-mid); text-decoration: none; }
[data-theme="dark"] .art-breadcrumb a { color: var(--gold); }
.art-breadcrumb a:hover { text-decoration: underline; }
.art-title { font-family: var(--fd); font-weight: 800; color: var(--navy); line-height: 1.4; font-size: clamp(1.5rem,3.5vw,2rem); margin-block-end: 14px; }
[data-theme="dark"] .art-title { color: var(--ink); }
.art-meta { color: var(--muted); font-size: .9rem; font-weight: 600; display: flex; flex-wrap: wrap; gap: 12px; }
.art-meta i { color: var(--navy-mid); }
[data-theme="dark"] .art-meta i { color: var(--gold); }
.art-body { padding-block: 36px 80px; }
.art-cover { inline-size: 100%; border-radius: var(--r); margin-block-end: 28px; box-shadow: var(--sh); max-block-size: 420px; object-fit: cover; }
.content-area { font-size: 1.05rem; color: var(--ink); line-height: 1.9; }
.content-area h2, .content-area h3 { font-family: var(--fd); color: var(--navy); margin-block: 1.8rem .7rem; }
[data-theme="dark"] .content-area h2, [data-theme="dark"] .content-area h3 { color: var(--gold); }
.content-area blockquote { border-inline-start: 5px solid var(--navy-mid); padding: 15px 25px; background: var(--navy-light); font-style: italic; margin: 24px 0; border-radius: 0 var(--r) var(--r) 0; color: var(--navy); font-weight: 600; }
[data-theme="dark"] .content-area blockquote { color: var(--ink); }
.content-area code { background: var(--navy-light); color: var(--navy-mid); padding: 2px 7px; border-radius: 5px; font-size: .9em; }
.share-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-block: 20px; border-block: 1px solid var(--cream); margin-block: 28px; }
[data-theme="dark"] .share-row { border-color: rgba(255,255,255,.08); }
.share-row span { font-weight: 700; color: var(--navy); font-size: .9rem; }
[data-theme="dark"] .share-row span { color: var(--ink); }
.share-btn { display: inline-flex; align-items: center; justify-content: center; inline-size: 34px; block-size: 34px; border-radius: 50%; text-decoration: none; font-size: 1rem; transition: .3s; }
.share-fb { background: #e7f0ff; color: #1877f2; }
.share-tw { background: var(--navy-light); color: var(--ink); }
.share-tg { background: #e3f6ff; color: #229ed9; }
.share-btn:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.sidebar-widget { background: var(--white); padding: 22px; border-radius: var(--r); margin-block-end: 20px; box-shadow: var(--sh); border: 1px solid var(--cream); }
[data-theme="dark"] .sidebar-widget { background: var(--ghost); border-color: rgba(255,255,255,.06); }
.widget-title { font-size: 1rem; font-weight: 700; margin-block-end: 16px; padding-block-end: 8px; border-block-end: 2px solid var(--navy-mid); display: flex; align-items: center; gap: 8px; color: var(--navy); }
[data-theme="dark"] .widget-title { color: var(--ink); border-block-end-color: var(--gold); }
.widget-title i { color: var(--navy-mid); }
[data-theme="dark"] .widget-title i { color: var(--gold); }
.nl-desc { font-size: .87rem; color: var(--muted); font-weight: 600; margin-block-end: 14px; }
.nl-input { inline-size: 100%; padding: 11px 16px; border-radius: 8px; border: none; background: var(--ghost); color: var(--ink); font-size: .93rem; box-shadow: var(--sh); outline: none; margin-block-end: 10px; box-sizing: border-box; }
.nl-input:focus { box-shadow: 0 0 0 2px var(--navy-mid); }
[data-theme="dark"] .nl-input:focus { box-shadow: 0 0 0 2px var(--gold); }
.nl-btn { inline-size: 100%; padding: 11px; border-radius: 8px; border: none; background: var(--navy-mid); color: #fff; font-weight: 700; font-size: .93rem; cursor: pointer; transition: .3s; box-shadow: var(--sh); }
.nl-btn:hover { background: var(--navy); transform: translateY(-2px); }
[data-theme="dark"] .nl-btn { background: var(--gold); color: var(--navy-deep); }
[data-theme="dark"] .nl-btn:hover { background: var(--orange); }
.popular-item { display: flex; align-items: flex-start; padding: 10px 8px; border-radius: 8px; text-decoration: none; transition: .3s; margin-block-end: 4px; }
.popular-item:hover { background: var(--navy-light); transform: translateX(4px); }
[data-theme="dark"] .popular-item:hover { background: var(--gold-light); }
.popular-title { font-size: .9rem; font-weight: 600; color: var(--navy); margin: 0 0 4px; line-height: 1.4; }
[data-theme="dark"] .popular-title { color: var(--ink); }
.popular-cat { color: var(--muted); font-size: .8rem; font-weight: 600; }
.popular-cat i { color: var(--navy-mid); }
[data-theme="dark"] .popular-cat i { color: var(--gold); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud a { display: inline-block; padding: 5px 14px; background: var(--navy-light); color: var(--navy-mid); text-decoration: none; border-radius: 20px; font-size: .83rem; border: 1px solid var(--cream); font-weight: 600; transition: .3s; }
[data-theme="dark"] .tag-cloud a { background: var(--gold-light); color: var(--gold); border-color: transparent; }
.tag-cloud a:hover { background: var(--navy-mid); color: #fff; }
[data-theme="dark"] .tag-cloud a:hover { background: var(--gold); color: var(--navy-deep); }
.back-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 50px; background: var(--navy-mid); color: #fff; font-weight: 700; text-decoration: none; transition: .3s; font-size: .9rem; margin-block-start: 4px; }
.back-btn:hover { background: var(--navy); color: #fff; }
[data-theme="dark"] .back-btn { background: var(--gold); color: var(--navy-deep); }

/* posts list page */
.posts-body { padding-block: 28px 80px; }
.sb-nl-desc { font-size: .83rem; color: var(--muted); font-weight: 600; margin-block-end: 12px; }

/* nav — logo */
.nav-logo { block-size: 44px; inline-size: auto; max-inline-size: 160px; object-fit: contain; display: block; }
.brand { display: flex !important; align-items: center; flex-shrink: 0; }

/* nav — mob-actions */
.mob-actions { display: flex; gap: 16px; margin-block-start: 20px; }

/* nav — dropdown folder labels */
.nav-drop-label { display: block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 8px 16px 4px; pointer-events: none; }
.nav-drop-label:first-child { padding-block-start: 4px; }

/* nav — mob-sub folder labels */
.mob-sub-label { display: block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 10px 12px 4px; pointer-events: none; }