:root {
  --bg: #fbf7f2;
  --surface: #ffffff;
  --ink: #2e2a27;
  --muted: #6f655d;
  --accent: #b5654a;
  --accent-dark: #8f4537;
  --line: #ece3d8;
  --shadow: 0 6px 24px rgba(120, 90, 70, 0.08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 22px; }

/* Header */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font-weight: 700; font-size: 20px; color: var(--ink); letter-spacing: .2px; }
.brand span { color: var(--accent); }
.nav a { color: var(--muted); margin-left: 20px; font-size: 16px; }
.nav a:hover { color: var(--accent); text-decoration: none; }

/* Hero */
.hero {
  text-align: center;
  padding: 64px 0 40px;
}
.hero h1 {
  font-family: "Times New Roman", Georgia, serif;
  font-size: 38px;
  line-height: 1.25;
  margin: 0 0 16px;
}
.hero p { color: var(--muted); font-size: 19px; max-width: 600px; margin: 0 auto; }

/* Post list */
.posts { padding: 20px 0 60px; }
.post-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 28px;
  margin-bottom: 22px;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(120,90,70,.13); }
.post-card .tag { color: var(--accent); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
.post-card h2 { font-family: "Times New Roman", Georgia, serif; font-size: 25px; line-height: 1.3; margin: 8px 0 10px; }
.post-card h2 a { color: var(--ink); }
.post-card h2 a:hover { color: var(--accent); text-decoration: none; }
.post-card p { color: var(--muted); margin: 0 0 14px; font-size: 17px; }
.read-more { font-weight: 600; font-size: 16px; }
.read-more::after { content: " →"; }

/* Article */
.article { padding: 50px 0 40px; }
.cover-img { display: block; width: 100%; height: auto; border-radius: 14px; margin: 6px 0 30px; box-shadow: var(--shadow); }
.article .tag { color: var(--accent); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
.article h1 {
  font-family: "Times New Roman", Georgia, serif;
  font-size: 33px;
  line-height: 1.3;
  margin: 12px 0 24px;
}
.article h2 {
  font-family: "Times New Roman", Georgia, serif;
  font-size: 24px;
  margin: 38px 0 12px;
}
.article p { margin: 0 0 18px; }
.article ol, .article ul { margin: 0 0 18px; padding-left: 26px; }
.article li { margin-bottom: 10px; }
.article blockquote {
  margin: 24px 0;
  padding: 16px 22px;
  background: #fff4ee;
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  color: #5a4a40;
  font-size: 18px;
}
.article blockquote p:last-child { margin-bottom: 0; }
.article em { color: #4a423b; }
.article hr { border: none; border-top: 1px solid var(--line); margin: 34px 0; }
.author-box {
  margin-top: 30px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 16px;
  color: var(--muted);
}
.author-box strong { color: var(--ink); }
.back-link { display: inline-block; margin: 10px 0 0; font-size: 16px; }
.back-link::before { content: "← "; }

/* Related posts */
.related {
  margin: 34px 0 0;
  padding: 22px 24px;
  background: #fff4ee;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.related strong { display: block; color: var(--ink); margin-bottom: 10px; font-size: 17px; }
.related ul { margin: 0; padding-left: 20px; }
.related li { margin-bottom: 8px; font-size: 16px; }
.related a { font-weight: 600; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 34px 0;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  background: var(--surface);
}

.footer-contact { margin-top: 12px; font-size: 16px; }
.footer-contact a {
  display: inline-block;
  margin-top: 6px;
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}
.footer-contact a:hover { background: var(--accent-dark); text-decoration: none; }

@media (max-width: 600px) {
  body { font-size: 17px; }
  .hero h1 { font-size: 30px; }
  .hero { padding: 44px 0 28px; }
  .article h1 { font-size: 27px; }
  .post-card { padding: 22px; }
  .nav a { margin-left: 14px; }
}

/* ===== Popup giữ chân khi khách định thoát (exit-intent) — dùng chung mọi trang ===== */
.xip-overlay{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:20px;
  background:rgba(25,12,7,.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.xip-overlay.show{ display:flex; animation:xipFade .25s ease; }
@keyframes xipFade{ from{opacity:0} to{opacity:1} }
.xip-card{ position:relative; max-width:440px; width:100%; border-radius:20px; padding:34px 30px 28px;
  background:linear-gradient(158deg,#5c2417 0%,#3c1610 80%); border:1px solid rgba(194,155,74,.5); color:#f3e6d8;
  box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 40px rgba(194,155,74,.10) inset; animation:xipPop .3s cubic-bezier(.2,.9,.3,1.2); }
@keyframes xipPop{ from{transform:scale(.92) translateY(10px);opacity:0} to{transform:none;opacity:1} }
.xip-close{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.08); color:#e9d9c6; font-size:17px; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.xip-close:hover{ background:rgba(255,255,255,.18); }
.xip-badge{ display:inline-flex; align-items:center; gap:6px; background:linear-gradient(90deg,#d8ad57,#c29b4a); color:#3a1c0c;
  font-weight:800; font-size:13px; padding:6px 14px; border-radius:999px; margin-bottom:16px; letter-spacing:.3px; }
.xip-card h2{ font-family:"Times New Roman",Georgia,serif; color:#fff; font-size:27px; line-height:1.2; margin:0 0 10px; }
.xip-sub{ color:#e7d3bf; opacity:.85; font-size:15px; margin:0 0 14px; line-height:1.5; }
.xip-body{ color:#f0e2d2; font-size:15.5px; line-height:1.6; margin:0 0 16px; }
.xip-body b{ color:#f2d493; }
.xip-highlight{ background:rgba(194,155,74,.14); border:1px solid rgba(194,155,74,.45); border-radius:12px;
  padding:14px 16px; color:#f6e8c9; font-size:15px; line-height:1.5; margin:0 0 14px; }
.xip-highlight b{ color:#f2d493; }
.xip-scar{ color:#e6b98f; font-size:14px; font-style:italic; margin:0 0 16px; }
.xip-cta{ display:block; width:100%; text-align:center; cursor:pointer; border:none; font-family:inherit; text-decoration:none;
  background:linear-gradient(100deg,#e0913f 0%,#c85a34 55%,#a6402e 100%); color:#fff !important; font-weight:800; font-size:18px;
  padding:16px; border-radius:14px; box-shadow:0 12px 26px rgba(180,80,45,.4); transition:transform .15s, box-shadow .15s; }
.xip-cta:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(180,80,45,.5); text-decoration:none; }
.xip-dismiss{ display:block; text-align:center; margin:14px auto 0; background:none; border:none; cursor:pointer;
  color:#d9c3ab; font-size:14px; text-decoration:underline; font-family:inherit; }
.xip-dismiss:hover{ color:#fff; }
@media (max-width:600px){ .xip-card{ padding:30px 22px 24px; } .xip-card h2{ font-size:23px; } }