/* ============================================================
   BLOG MỢ DUNG — KHUNG DÙNG CHUNG (menu · danh mục · chân trang)
   Dùng cho MỌI trang: trang chủ, trang danh mục và mọi bài viết.
   Tất cả class đều mang tiền tố .mdx- và biến --mdx- để KHÔNG đè
   lên style riêng của từng bài (bài dùng blog.css hay font Lora
   đều lắp được mà không vỡ giao diện).
   File này do build.mjs lắp vào trang — đừng sửa markup trong HTML.
   ============================================================ */

:root{
  --mdx-do:#c0122b;
  --mdx-do-dam:#9a0e22;
  --mdx-vang:#d4af37;
  --mdx-vang-sang:#e7c85f;
  --mdx-toi:#141210;
  --mdx-chu:#241d1b;
  --mdx-mo:#7a6f68;
  --mdx-vien:#ece2d6;
  --mdx-nen:#fffdf7;
  --mdx-kem:#fbf2e6;
  --mdx-tieude:'Montserrat',system-ui,-apple-system,"Segoe UI",sans-serif;
  --mdx-than:'Be Vietnam Pro',system-ui,-apple-system,"Segoe UI",sans-serif;
}

.mdx-nav *,.mdx-cats *,.mdx-foot *,.mdx-crumb *,.mdx-related *{box-sizing:border-box}

/* ============================ THANH MENU ============================ */
.mdx-nav{position:sticky;top:0;z-index:60;background:rgba(255,253,247,.92);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--mdx-vien);
  font-family:var(--mdx-than);line-height:1.6}
.mdx-nav .in{max-width:1140px;margin:0 auto;padding:0 22px;display:flex;align-items:center;
  justify-content:space-between;gap:14px;height:64px}
.mdx-brand{display:flex;align-items:center;gap:10px;font-family:var(--mdx-tieude);
  font-weight:900;font-size:1.3rem;color:var(--mdx-do);letter-spacing:-.3px;text-decoration:none}
.mdx-brand i{width:10px;height:10px;border-radius:50%;background:var(--mdx-vang);
  box-shadow:0 0 0 4px rgba(212,175,55,.22);display:block}
.mdx-brand b{color:var(--mdx-toi);font-weight:900}
.mdx-menu{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.mdx-menu a{color:var(--mdx-chu);font-weight:600;font-size:.95rem;text-decoration:none;
  padding:4px 0;position:relative}
.mdx-menu a:hover,.mdx-menu a.on{color:var(--mdx-do)}
.mdx-menu a.on::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--mdx-vang);border-radius:2px}
.mdx-cta{background:linear-gradient(180deg,#f7cf2e,#dfa400);color:#1a1310;padding:9px 19px;
  border-radius:9px;font-weight:800;font-size:.88rem;text-decoration:none;white-space:nowrap;
  box-shadow:0 6px 16px rgba(223,164,0,.32);transition:transform .16s,box-shadow .16s;
  font-family:var(--mdx-than)}
.mdx-cta:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(223,164,0,.45)}
.mdx-burger{display:none;background:none;border:0;font-size:1.5rem;color:var(--mdx-do);
  cursor:pointer;padding:4px 6px;line-height:1}

/* ============================ THANH DANH MỤC ============================ */
.mdx-cats{background:var(--mdx-nen);border-bottom:1px solid var(--mdx-vien);
  position:sticky;top:64px;z-index:50;font-family:var(--mdx-than)}
.mdx-cats .in{max-width:1140px;margin:0 auto;display:flex;gap:9px;padding:12px 22px;
  overflow-x:auto;scrollbar-width:none}
.mdx-cats .in::-webkit-scrollbar{display:none}
.mdx-chip{white-space:nowrap;border:1px solid var(--mdx-vien);background:#fff;color:var(--mdx-chu);
  padding:7px 15px;border-radius:999px;font-weight:600;font-size:.88rem;cursor:pointer;
  text-decoration:none;transition:all .16s;font-family:var(--mdx-than);line-height:1.5;display:inline-block}
.mdx-chip:hover{border-color:var(--mdx-vang);color:var(--mdx-do)}
.mdx-chip.on{background:var(--mdx-do);border-color:var(--mdx-do);color:#fff;
  box-shadow:0 6px 14px rgba(192,18,43,.26)}

/* ============================ ĐƯỜNG DẪN + THẺ DANH MỤC (đầu bài) ============================ */
.mdx-crumb{max-width:760px;margin:0 auto;padding:18px 20px 0;font-family:var(--mdx-than);
  font-size:.86rem;color:var(--mdx-mo);line-height:1.6}
.mdx-crumb a{color:var(--mdx-mo);text-decoration:none}
.mdx-crumb a:hover{color:var(--mdx-do)}
.mdx-crumb b{color:var(--mdx-do);font-weight:700}
.mdx-crumb .tag{display:inline-block;margin-top:10px;background:var(--mdx-do);color:#fff;
  padding:4px 13px;border-radius:999px;font-family:var(--mdx-tieude);font-weight:700;
  font-size:.7rem;letter-spacing:.5px;text-transform:uppercase;text-decoration:none}
.mdx-crumb .tag:hover{background:var(--mdx-do-dam)}

/* ============================ LINK NỘI BỘ THEO TỪ KHÓA ============================ */
a.tulien{color:var(--mdx-do);font-weight:600;text-decoration:none;
  border-bottom:1.5px solid rgba(192,18,43,.32)}
a.tulien:hover{border-bottom-color:var(--mdx-do)}

/* ============================ THẺ TỪ KHÓA ============================ */
.mdx-tags{font-family:var(--mdx-than);background:var(--mdx-nen);border-top:1px solid var(--mdx-vien)}
.mdx-tags .in{max-width:820px;margin:0 auto;padding:22px;display:flex;flex-wrap:wrap;
  align-items:center;gap:9px;line-height:1.9}
.mdx-tags b{font-family:var(--mdx-tieude);font-size:.76rem;text-transform:uppercase;
  letter-spacing:1.2px;color:var(--mdx-mo);margin-right:4px}
.mdx-tag{display:inline-block;background:var(--mdx-kem);border:1px solid var(--mdx-vien);
  color:var(--mdx-do);padding:5px 13px;border-radius:999px;font-size:.85rem;font-weight:600;
  text-decoration:none;transition:all .15s}
a.mdx-tag:hover{background:var(--mdx-do);border-color:var(--mdx-do);color:#fff}
.mdx-tag.off{color:var(--mdx-mo);background:#fff;font-weight:500}

/* ============================ ĐỌC TIẾP (bài liên quan) ============================ */
.mdx-related{background:var(--mdx-kem);border-top:1px solid var(--mdx-vien);
  font-family:var(--mdx-than);color:var(--mdx-chu);line-height:1.65}
.mdx-related .in{max-width:1140px;margin:0 auto;padding:42px 22px}
.mdx-related h2{font-family:var(--mdx-tieude);font-size:1.4rem;font-weight:800;color:var(--mdx-chu);
  margin:0 0 20px;display:flex;align-items:baseline;gap:14px}
.mdx-related h2::after{content:"";flex:1;height:1px;background:var(--mdx-vien)}
.mdx-related .ds{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;list-style:none;margin:0;padding:0}
.mdx-rcard{background:#fff;border:1px solid var(--mdx-vien);border-radius:14px;overflow:hidden;
  box-shadow:0 4px 16px rgba(90,30,40,.07);transition:transform .2s,box-shadow .2s;
  display:flex;flex-direction:column}
.mdx-rcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(90,30,40,.14)}
.mdx-rcard .top{height:104px;display:flex;align-items:center;justify-content:center;position:relative}
.mdx-rcard .top .em{font-size:2.5rem;filter:drop-shadow(0 6px 12px rgba(0,0,0,.26))}
.mdx-rcard .top .lb{position:absolute;top:11px;left:11px;background:rgba(255,255,255,.18);color:#fff;
  border:1px solid rgba(255,255,255,.38);padding:3px 10px;border-radius:999px;
  font-family:var(--mdx-tieude);font-weight:700;font-size:.64rem;letter-spacing:.5px;text-transform:uppercase}
.mdx-rcard .bd{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.mdx-rcard .dt{font-family:var(--mdx-tieude);font-size:.7rem;color:var(--mdx-mo);font-weight:600;
  letter-spacing:.4px;text-transform:uppercase;margin-bottom:7px}
.mdx-rcard h3{font-family:var(--mdx-tieude);font-size:1rem;line-height:1.35;margin:0;font-weight:800}
.mdx-rcard h3 a{color:var(--mdx-chu);text-decoration:none}
.mdx-rcard h3 a:hover{color:var(--mdx-do)}
.mdx-rcard.soon{opacity:.92}
.mdx-rcard.soon:hover{transform:none}
.mdx-rcard.soon h3{color:var(--mdx-mo)}
.mdx-rcard.soon .top{filter:grayscale(.4)}
.mdx-rcard .soonlb{position:absolute;top:11px;right:11px;background:rgba(20,18,16,.55);color:#f2e7d6;
  border:1px solid rgba(255,255,255,.3);padding:3px 10px;border-radius:999px;font-family:var(--mdx-tieude);
  font-weight:700;font-size:.62rem;letter-spacing:.5px;text-transform:uppercase}

/* nền thẻ theo danh mục (dùng chung tên với blog.css) */
.g-kdo{background:linear-gradient(135deg,#c0122b,#7a0a1c)}
.g-ban{background:linear-gradient(135deg,#d99b1f,#9c5c17)}
.g-mkt{background:linear-gradient(135deg,#e01e2f,#8f0d1f)}
.g-web{background:linear-gradient(135deg,#3a1620,#7a1226)}
.g-tiem{background:linear-gradient(135deg,#a8631a,#5c3210)}
.g-story{background:linear-gradient(135deg,#8a1230,#340a14)}

/* ============================ CHÂN TRANG ============================ */
.mdx-foot{background:var(--mdx-toi);color:#d8cabb;padding:48px 0 24px;font-family:var(--mdx-than);
  font-size:1rem;line-height:1.7}
.mdx-foot .in{max-width:1140px;margin:0 auto;padding:0 22px}
.mdx-foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1fr;gap:34px;margin-bottom:30px}
.mdx-foot .mdx-brand{color:#fff;margin-bottom:12px}
.mdx-foot .mdx-brand b{color:var(--mdx-vang)}
.mdx-foot p{color:#b7a898;font-size:.93rem;margin:0;max-width:330px}
.mdx-foot h4{color:#fff;font-family:var(--mdx-tieude);font-size:.78rem;text-transform:uppercase;
  letter-spacing:1.4px;margin:0 0 14px;font-weight:800}
.mdx-foot ul{list-style:none;margin:0;padding:0}
.mdx-foot li{margin-bottom:9px;font-size:.93rem}
.mdx-foot a{color:#c8b9a9;text-decoration:none}
.mdx-foot a:hover{color:var(--mdx-vang)}
.mdx-foot .tagbar{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;margin-bottom:4px}
.mdx-foot .tagbar h4{margin-bottom:12px}
.mdx-foot .tagbar .ds{display:flex;flex-wrap:wrap;gap:8px}
.mdx-foot .tagbar a{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:#c8b9a9;padding:5px 12px;border-radius:999px;font-size:.83rem}
.mdx-foot .tagbar a:hover{background:var(--mdx-do);border-color:var(--mdx-do);color:#fff}
.mdx-foot .bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:18px;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:10px;color:#8f8175;font-size:.84rem}

/* ============================ MÀN HÌNH NHỎ ============================ */
@media(max-width:940px){
  .mdx-related .ds{grid-template-columns:repeat(2,1fr)}
  .mdx-foot .cols{grid-template-columns:1fr 1fr;gap:26px}
}
@media(max-width:680px){
  .mdx-menu{display:none;position:absolute;top:64px;left:0;right:0;background:var(--mdx-nen);
    flex-direction:column;align-items:flex-start;padding:14px 22px 18px;gap:12px;
    border-bottom:1px solid var(--mdx-vien);box-shadow:0 12px 32px rgba(90,30,40,.10)}
  .mdx-menu.mo{display:flex}
  .mdx-burger{display:block}
  .mdx-nav .in{position:relative}
  .mdx-cta{padding:8px 14px;font-size:.82rem}
  .mdx-related .ds{grid-template-columns:1fr}
  .mdx-foot .cols{grid-template-columns:1fr;gap:24px}
  .mdx-crumb{padding-top:14px}
}