/* ===== EntryVN RU — skin cho trang bài viết. Cùng design system với trang chủ ===== */
:root{
  --deep:#062A33; --deep-2:#0A3D48; --sea:#0E6B75; --foam:#7FD4CE;
  --sand:#F6EFE3; --sand-2:#EDE2D0; --paper:#FFFDF9;
  --sun:#F2A93B; --coral:#E4572E;
  --ink:#0B1B20; --ink-soft:#4A6068; --ink-faint:#8AA0A6;
  --tg:#2AABEE; --wa:#25D366;
  --r:18px; --r-lg:26px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Onest",-apple-system,system-ui,sans-serif;color:var(--ink);background:var(--sand);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* HERO */
.hero{background:var(--deep);color:var(--sand);padding:60px 24px 50px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-170px;right:-130px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(242,169,59,.24),transparent 65%)}
.hero-inner{max-width:1080px;margin:0 auto;position:relative}
.breadcrumb{font-size:13px;color:rgba(246,239,227,.55);margin-bottom:14px}
.breadcrumb a{color:rgba(246,239,227,.55);text-decoration:none}
.breadcrumb a:hover{color:var(--foam)}
.cat-badge{display:inline-block;background:rgba(127,212,206,.14);color:var(--foam);border:none;
  padding:7px 15px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.04em}
.hero h1{font-family:"Unbounded",sans-serif;font-size:clamp(26px,3.6vw,40px);line-height:1.24;margin:18px 0 16px;font-weight:800;letter-spacing:-.02em;color:var(--sand)}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.5px;color:rgba(246,239,227,.6)}
.hero-meta .author{color:var(--foam)}

/* LAYOUT */
.page-wrap{max-width:1080px;margin:0 auto;padding:48px 24px 72px;display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:920px){.page-wrap{grid-template-columns:minmax(0,1fr) 300px}}
.article-body{min-width:0;word-break:break-word;overflow-wrap:break-word}
.article-body img{max-width:100%;height:auto;display:block}
.page-wrap>*{min-width:0}

.intro-box{background:var(--paper);border:1px solid var(--sand-2);border-left:4px solid var(--sea);padding:22px 24px;border-radius:0 var(--r) var(--r) 0;margin-bottom:32px;font-size:16.5px}
.article-body h2{font-family:"Unbounded",sans-serif;color:var(--ink);font-size:clamp(21px,2.6vw,27px);margin:44px 0 14px;line-height:1.3;font-weight:600;letter-spacing:-.02em}
.article-body h3{font-family:"Onest",sans-serif;color:var(--ink);font-size:18px;margin:28px 0 10px;font-weight:600}
.article-body p{margin-bottom:15px}
.article-body ul,.article-body ol{margin:0 0 16px 22px}
.article-body li{margin-bottom:8px}
.article-body a{color:var(--sea)}

/* TABLES */
.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);border:1px solid var(--sand-2);margin:22px 0;background:var(--paper)}
.info-table{width:100%;min-width:380px;border-collapse:collapse;font-size:15px}
.info-table th{background:var(--deep);color:var(--sand);text-align:left;padding:13px 15px;font-weight:600}
.info-table td{padding:12px 15px;border-top:1px solid var(--sand-2);vertical-align:top;color:var(--ink-soft)}
.info-table td strong{color:var(--ink)}
.info-table tr:nth-child(even) td{background:rgba(246,239,227,.45)}

/* BOXES */
.warn-box,.ok-box,.danger-box{padding:18px 20px;border-radius:0 var(--r) var(--r) 0;margin:22px 0;font-size:15.5px;background:var(--paper);border:1px solid var(--sand-2)}
.warn-box{border-left:4px solid var(--sun)}
.ok-box{border-left:4px solid var(--sea)}
.danger-box{border-left:4px solid var(--coral)}

/* STEPS */
.steps{counter-reset:s;margin:24px 0}
.step{position:relative;padding:0 0 20px 46px;counter-increment:s;border-left:2px solid var(--sand-2);margin-left:14px}
.step:last-child{border-left-color:transparent;padding-bottom:0}
.step::before{content:counter(s);position:absolute;left:-16px;top:-2px;width:30px;height:30px;border-radius:50%;
  background:var(--sun);color:var(--deep);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;font-family:"Unbounded",sans-serif}
.step h3{margin:0 0 4px}

/* CHECKLIST */
.checklist{list-style:none;margin:20px 0}
.checklist li{position:relative;padding-left:30px;margin-bottom:10px}
.checklist li::before{content:"✓";position:absolute;left:0;top:0;color:var(--sea);font-weight:700;font-size:17px}

/* INLINE CTA */
.inline-cta{background:var(--deep);color:var(--sand);border-radius:var(--r-lg);padding:26px 28px;margin:34px 0;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.inline-cta p{margin:0;font-size:16px;opacity:.85}
.inline-cta strong{color:var(--sun);opacity:1}
.inline-cta a{background:var(--tg);color:#fff;text-decoration:none;font-weight:600;padding:14px 22px;border-radius:13px;white-space:nowrap;transition:transform .15s}
.inline-cta a:hover{transform:translateY(-2px)}

/* FAQ */
.faq-item{border:1px solid var(--sand-2);border-radius:var(--r);margin-bottom:12px;overflow:hidden;background:var(--paper)}
.faq-q{width:100%;background:transparent;border:0;text-align:left;padding:17px 20px;font-family:"Onest",sans-serif;
  font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq-icon{color:var(--ink-faint);font-size:20px;flex:0 0 auto;transition:transform .2s}
.faq-q.open .faq-icon{transform:rotate(45deg);color:var(--sun)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease}
.faq-a p{padding:0 20px 18px;margin:0;font-size:15.5px;color:var(--ink-soft)}

/* SIDEBAR */
.sidebar{min-width:0}
@media(max-width:919px){.sidebar{display:none}}
@media(min-width:920px){.sidebar{position:sticky;top:24px;align-self:start}}
.toc-box{background:var(--deep);border-radius:var(--r);padding:22px 24px;margin-bottom:18px}
.toc-box h4{color:var(--sand);font-family:"Unbounded",sans-serif;font-size:15px;font-weight:600;margin-bottom:14px}
.toc-box ol{margin:0 0 0 18px;color:rgba(246,239,227,.6);font-size:14px}
.toc-box li{margin-bottom:9px}
.toc-box a{color:rgba(246,239,227,.6);text-decoration:none}
.toc-box a:hover{color:var(--foam)}
.sb-cta{background:var(--sun);border-radius:var(--r);padding:22px 24px;margin-bottom:16px}
.sb-cta h4{font-family:"Onest",sans-serif;color:var(--deep);font-size:17px;font-weight:600;margin-bottom:8px}
.sb-cta p{font-size:14.5px;color:#5C4415;margin-bottom:16px}
.sb-cta a{display:block;text-align:center;background:var(--deep);color:var(--sand);text-decoration:none;font-weight:600;padding:12px;border-radius:12px}
.sb-wa{background:var(--tg);border-radius:var(--r);padding:22px 24px}
.sb-wa h4{color:#fff;font-family:"Onest",sans-serif;font-size:17px;font-weight:600;margin-bottom:8px}
.sb-wa p{color:rgba(255,255,255,.85);font-size:14.5px;margin-bottom:16px}
.sb-wa a{display:block;text-align:center;background:#fff;color:var(--tg);text-decoration:none;font-weight:600;padding:12px;border-radius:12px}

/* RELATED */
.related{background:var(--deep-2);padding:52px 24px}
.related-inner{max-width:1080px;margin:0 auto}
.related-inner h3{font-family:"Unbounded",sans-serif;color:var(--sand);font-size:24px;font-weight:600;margin-bottom:24px;letter-spacing:-.02em}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.related-card{background:var(--paper);border-radius:var(--r);overflow:hidden;text-decoration:none;border:none;display:block;transition:transform .2s}
.related-card:hover{transform:translateY(-4px)}
.card-cat{background:var(--deep);color:var(--foam);font-size:11.5px;font-weight:600;letter-spacing:.06em;padding:9px 18px;text-transform:uppercase}
.card-body{padding:18px}
.card-body h4{font-family:"Onest",sans-serif;color:var(--ink);font-size:16px;font-weight:600;margin-bottom:8px;line-height:1.35}
.card-body p{color:var(--sea);font-size:14px;font-weight:600;margin:0}

/* FLOAT */
.float-wa{position:fixed;right:20px;bottom:20px;width:54px;height:54px;border-radius:50%;background:var(--tg);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.22);z-index:9999;transition:transform .15s}
.float-wa:hover{transform:scale(1.08)}

.src-note{font-size:13.5px;color:var(--ink-faint);border-top:1px solid var(--sand-2);padding-top:18px;margin-top:36px;line-height:1.6}

@media(max-width:640px){
  .hero{padding:40px 16px 34px}
  .page-wrap{padding:30px 16px 56px}
  .article-body p,.article-body li{font-size:15px}
  .inline-cta{flex-direction:column;align-items:flex-start;padding:20px 18px}
  .related{padding:36px 16px}
  .related-grid{grid-template-columns:1fr !important}
  .float-wa{width:48px;height:48px;font-size:20px;bottom:16px;right:16px}
}


/* === Ghi de cac rule trung ten class voi CSS toan site (.hero .hero-meta .steps) === */
body .steps{display:block;grid-template-columns:none;gap:0}
body .hero{padding:60px 24px 50px}
body .hero-meta{opacity:1;margin-top:0}