/* Breakout Blog, brand style dong bo landing (2026-08-06) */
:root { --red:#E11D2A; --red-dark:#B3141F; --red-soft:rgba(225,29,42,0.10); --black:#000000; --gray-1:#141414; --gray-2:#242424; --gray-3:#343434; --white:#FFFFFF; --gray:#B0B0B0; --gray-light:#E6E6E6; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:-apple-system,BlinkMacSystemFont,"Inter","Be Vietnam Pro","Plus Jakarta Sans","Segoe UI",sans-serif; background:var(--black); color:var(--white); line-height:1.75; }
.topbar { position:sticky; top:0; z-index:100; background:rgba(0,0,0,0.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--gray-2); padding:12px 0; }
.topbar-inner { max-width:1180px; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo { color:var(--white); font-weight:800; font-size:18px; letter-spacing:2px; text-decoration:none; }
.logo b { color:var(--red); }
.topnav a { color:var(--gray-light); text-decoration:none; font-size:14px; font-weight:600; margin-left:20px; }
.topnav a:hover { color:var(--white); }
.wrap { max-width:760px; margin:0 auto; padding:48px 20px 80px; }
.kicker { color:var(--red); font-weight:800; font-size:13px; letter-spacing:2px; text-transform:uppercase; margin-bottom:14px; }
h1 { font-size:36px; font-weight:800; line-height:1.2; letter-spacing:-0.5px; margin-bottom:14px; }
.meta-line { color:var(--gray); font-size:14px; margin-bottom:34px; }
.lead { font-size:19px; color:var(--gray-light); margin-bottom:26px; }
article h2 { font-size:26px; font-weight:800; line-height:1.3; margin:44px 0 16px; }
article h3 { font-size:19px; font-weight:800; margin:30px 0 10px; }
article p { margin-bottom:18px; font-size:17px; color:var(--gray-light); }
article strong { color:var(--white); }
article ul, article ol { margin:0 0 18px 22px; }
article li { margin-bottom:10px; font-size:17px; color:var(--gray-light); }
article a { color:var(--red); text-decoration:none; border-bottom:1px solid rgba(225,29,42,0.4); }
article a:hover { border-bottom-color:var(--red); }
.callout { background:var(--gray-1); border:1px solid var(--gray-2); border-left:4px solid var(--red); border-radius:10px; padding:20px 22px; margin:26px 0; }
.callout p { margin-bottom:0; }
.quote { border-left:3px solid var(--red); padding-left:18px; color:var(--white); font-size:18px; font-style:italic; margin:24px 0; }
.divider { border:none; border-top:1px solid var(--gray-2); margin:44px 0; }
.post-card { display:block; background:var(--gray-1); border:1px solid var(--gray-2); border-radius:14px; padding:26px 28px; margin-bottom:18px; text-decoration:none; transition:border-color .2s ease, transform .2s ease; }
.post-card:hover { border-color:var(--red); transform:translateY(-2px); }
.post-card h2 { color:var(--white); font-size:21px; font-weight:800; line-height:1.35; margin:0 0 8px; }
.post-card p { color:var(--gray); font-size:15px; margin:0 0 10px; line-height:1.6; }
.post-card .tag { color:var(--red); font-size:12px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; }
.footer { border-top:1px solid var(--gray-2); padding:30px 20px 40px; text-align:center; color:var(--gray); font-size:14px; }
.footer a { color:var(--gray-light); text-decoration:none; }
.footer .slogan { color:var(--white); font-weight:700; margin-bottom:6px; }
.checklist li { margin-bottom:12px; }
@media (max-width:640px) {
  h1 { font-size:28px; }
  article h2 { font-size:22px; }
  .wrap { padding:34px 18px 60px; }
  .lead { font-size:17px; }
}