:root{
  --cream:#F4F1EA;
  --cream-2:#EDE8DD;
  --surface:#FFFFFF;
  --forest:#27503C;
  --forest-deep:#1D4434;
  --forest-lite:#3F6B54;
  --gold:#C9A25E;
  --gold-lite:#DFC08A;
  --gold-deep:#8F6E30;
  --gold-wash:#F2E7CF;

  --bg:var(--cream);
  --surface-2:#EDE8DD;
  --ink:#232B26;
  --ink-2:#59635C;
  --ink-3:#8A9289;
  --line:#E3DDD0;
  --line-strong:#CFC7B6;

  --panel:#27503C;
  --panel-ink:#EDE9E0;
  --panel-soft:#B9C9BE;
  --accent-on-panel:#DFC08A;

  --gold-ink:#8F6E30;
  --head-ink:#1D4434;

  --shadow:0 1px 2px rgba(35,43,38,.05), 0 10px 30px rgba(35,43,38,.07);
  --shadow-lg:0 20px 55px rgba(29,68,52,.16);
  --r:12px;
  --maxw:1160px;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  text-wrap:balance;margin:0;line-height:1.2;letter-spacing:-.005em;font-weight:600;
}
h1{font-size:clamp(2.15rem,4.6vw,3.5rem);line-height:1.13}
h2{font-size:clamp(1.6rem,2.9vw,2.35rem)}
h3{font-size:1.12rem;font-weight:600}
p{margin:0}
a{color:var(--forest);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
img{max-width:100%}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-ink);
}
.lead{font-size:1.06rem;color:var(--ink-2)}

/* ---------- top bar ---------- */
.topline{background:var(--panel);color:var(--panel-ink);font-size:.79rem}
.topline .wrap{display:flex;gap:18px;align-items:center;justify-content:space-between;
  min-height:38px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.topline b{color:var(--accent-on-panel);font-weight:600}
.topline .tl-r{display:flex;gap:18px;flex-wrap:wrap}

header.nav{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
}
header.nav .wrap{display:flex;align-items:center;gap:14px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;margin-right:auto}
.brand:hover{text-decoration:none}
.mark{
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%, var(--forest-lite), var(--forest-deep) 70%);
  display:grid;place-items:center;
  font-weight:700;font-size:.8rem;color:var(--gold-lite);letter-spacing:.04em;
  box-shadow:inset 0 -6px 12px rgba(201,162,94,.35), 0 0 0 1px rgba(201,162,94,.35);
}
.brand-txt{line-height:1.18}
.brand-txt strong{display:block;font-family:"Playfair Display",Georgia,serif;font-weight:700;
  font-size:1.22rem;letter-spacing:-.01em}
.brand-txt span{display:block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500}

nav.menu{display:flex;align-items:center;gap:2px}
nav.menu a{padding:9px 12px;border-radius:8px;font-size:.87rem;font-weight:500;color:var(--ink-2)}
nav.menu a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
nav.menu a.active{color:var(--forest);font-weight:600;background:var(--surface-2)}
.nav-cta{
  font-size:.85rem;font-weight:600;background:var(--forest-deep);color:#fff;
  padding:11px 20px;border-radius:10px;white-space:nowrap;box-shadow:0 6px 16px rgba(29,68,52,.22)
}
.nav-cta:hover{background:var(--forest);text-decoration:none;color:#fff}
.burger{display:none;background:none;border:1px solid var(--line-strong);border-radius:9px;
  width:44px;height:40px;cursor:pointer;color:var(--ink);font-size:1.1rem}

@media (max-width:1400px) and (min-width:1181px){
  nav.menu a{padding:9px 9px;font-size:.81rem}
  .brand-txt strong{font-size:1.08rem}
  .nav-cta{padding:10px 15px;font-size:.81rem}
  header.nav .wrap{gap:10px}
}
@media (max-width:1180px){
  nav.menu{
    position:absolute;top:100%;left:0;right:0;background:var(--surface);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    padding:8px 16px 16px;gap:0;display:none;box-shadow:var(--shadow)
  }
  nav.menu.open{display:flex}
  nav.menu a{padding:12px 8px;border-bottom:1px solid var(--line);font-size:.95rem;border-radius:0}
  .burger{display:block}
  .nav-cta{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--bg)}
.hero::before{
  content:"";position:absolute;inset:-20% -10% auto auto;width:62%;height:150%;
  background:radial-gradient(closest-side, rgba(201,162,94,.16), transparent 72%);
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.12fr .88fr;
  gap:52px;padding-top:78px;padding-bottom:78px;align-items:start}
.hero h1{margin-top:16px;color:var(--ink)}
.hero h1 em{font-style:italic;color:var(--forest)}
.hero .lead{margin-top:20px;max-width:54ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{
  font-family:"Be Vietnam Pro",sans-serif;font-weight:600;font-size:.92rem;
  padding:14px 24px;border-radius:11px;border:1px solid transparent;cursor:pointer;display:inline-block;
  transition:transform .16s ease, background .16s ease
}
.btn:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}
.btn-primary{background:var(--forest-deep);color:#fff;box-shadow:0 8px 22px rgba(29,68,52,.24)}
.btn-primary:hover{background:var(--forest);color:#fff;text-decoration:none}
.btn-outline{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn-outline:hover{background:var(--surface);text-decoration:none;color:var(--ink)}
.btn-gold{background:var(--gold-lite);color:#3B2E10}
.btn-gold:hover{background:#fff;text-decoration:none;color:#3B2E10}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:44px;
  border-top:1px solid var(--line-strong);padding-top:24px}
.stats div span{
  display:block;font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:2rem;
  color:var(--forest);font-variant-numeric:tabular-nums;line-height:1.1
}
.stats div small{font-size:.78rem;color:var(--ink-3)}

/* hero form card */
.formcard{
  background:var(--surface);color:var(--ink);border-radius:var(--r);padding:28px 26px;
  box-shadow:var(--shadow-lg);border:1px solid var(--line);
}
.formcard h3{font-size:1.24rem}
.formcard p.small{font-size:.85rem;color:var(--ink-2);margin-top:6px}
.field{display:block;margin-top:15px}
.field span{display:block;font-size:.74rem;font-weight:600;letter-spacing:.07em;
  color:var(--ink-3);margin-bottom:6px;text-transform:uppercase}
.field input,.field select,.field textarea{
  width:100%;padding:12px 13px;border:1px solid var(--line-strong);border-radius:9px;
  background:var(--bg);color:var(--ink);font-family:inherit;font-size:.93rem
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--forest);outline:none;
  box-shadow:0 0 0 3px rgba(39,80,60,.12)}
.field textarea{min-height:92px;resize:vertical}
.formcard .btn{width:100%;margin-top:20px}
.formnote{font-size:.8rem;color:var(--ink-3);margin-top:14px;text-align:center}
.formmsg{display:none;margin-top:14px;padding:12px 14px;border-radius:9px;
  font-size:.87rem;font-weight:500;line-height:1.55;border-left:3px solid var(--gold)}
.formmsg.show{display:block}
.formmsg.ok{background:var(--gold-wash);color:var(--head-ink)}
.formmsg.err{background:#FBE9E4;color:#8A2E17;border-left-color:#C0492A}
.formmsg a{color:inherit;text-decoration:underline}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formcard button[disabled]{opacity:.65;cursor:progress}

@media (max-width:940px){
  .hero .wrap{grid-template-columns:1fr;gap:36px;padding-top:54px;padding-bottom:54px}
}

/* ---------- sections ---------- */
.page{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.page.active{animation:none}}

section.band{padding:74px 0}
section.band.alt{background:var(--surface-2)}
section.band.forest{background:var(--panel);color:var(--panel-ink)}
section.band.forest h2,section.band.forest h3{color:#fff}
section.band.forest .eyebrow{color:var(--accent-on-panel)}
section.band.forest p{color:var(--panel-soft)}
section.band.forest .sec-head p{color:var(--panel-soft)}

.sec-head{max-width:64ch;margin-bottom:38px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{margin-top:10px}
.sec-head p{margin-top:14px;color:var(--ink-2)}

.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:940px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;
  display:flex;flex-direction:column;gap:11px;box-shadow:var(--shadow);
  transition:box-shadow .2s ease, transform .2s ease
}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.card:hover{transform:none}}
.card h3{color:var(--head-ink)}
.card p{color:var(--ink-2);font-size:.95rem}
.card ul{margin:4px 0 0;padding-left:0;list-style:none;color:var(--ink-2);font-size:.93rem}
.card ul li{margin-bottom:6px;padding-left:22px;position:relative}
.card ul li::before{content:"✓";position:absolute;left:0;color:var(--forest-lite);font-weight:700}
.card .more{font-size:.85rem;font-weight:600;margin-top:auto;padding-top:10px;color:var(--forest)}

.tick{width:44px;height:44px;border-radius:11px;background:var(--gold-wash);color:var(--gold-ink);
  display:grid;place-items:center;font-weight:700;font-size:.92rem;letter-spacing:.02em}

/* process on forest band */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{padding:26px 24px;border-radius:var(--r);
  background:rgba(255,255,255,.055);border:1px solid rgba(223,192,138,.22)}
.step b{display:block;font-family:"Playfair Display",Georgia,serif;font-size:2.05rem;font-weight:600;
  color:var(--accent-on-panel);line-height:1;margin-bottom:14px;font-variant-numeric:tabular-nums}
.step h3{font-size:1.05rem;margin-bottom:8px}
.step p{font-size:.92rem}
@media (max-width:940px){.steps{grid-template-columns:1fr}}

/* tables */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:.92rem}
thead th{background:var(--panel);color:var(--panel-ink);text-align:left;padding:14px 18px;font-weight:600;
  font-size:.76rem;letter-spacing:.11em;text-transform:uppercase}
td,tbody th{padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
tbody th{font-weight:600;color:var(--ink)}
td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--head-ink);white-space:nowrap}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
.pricenote{font-size:.86rem;color:var(--ink-3);margin-top:14px}

/* FAQ */
details{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-bottom:12px;
  box-shadow:var(--shadow)}
details summary{
  cursor:pointer;padding:17px 20px;font-weight:600;font-size:.98rem;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center
}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--gold-ink);font-weight:600;font-size:1.3rem;flex:0 0 auto}
details[open] summary::after{content:"–"}
details .ans{padding:0 20px 20px;color:var(--ink-2);font-size:.96rem}

/* article list */
.post{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.post .date{font-size:.8rem;color:var(--ink-3);padding-top:5px;font-variant-numeric:tabular-nums}
.post h3{margin-bottom:7px}
.post p{color:var(--ink-2);font-size:.94rem}
.tag{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-ink);background:var(--gold-wash);padding:4px 10px;border-radius:20px;margin-bottom:9px}
@media (max-width:640px){.post{grid-template-columns:1fr;gap:6px}}

/* cta band */
.ctaband{
  background:var(--panel);color:var(--panel-ink);border-radius:var(--r);padding:38px 36px;
  display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  box-shadow:var(--shadow-lg)
}
.ctaband h2{color:#fff}
.ctaband p{color:var(--panel-soft);margin-top:10px;max-width:52ch}

.callout{border-left:3px solid var(--gold);background:var(--gold-wash);color:var(--head-ink);
  padding:16px 20px;border-radius:0 9px 9px 0;font-size:.95rem}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
@media (max-width:940px){.split{grid-template-columns:1fr;gap:30px}}

.deflist{display:grid;gap:0;border-top:1px solid var(--line);margin:0}
.deflist div{display:grid;grid-template-columns:168px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.deflist dt{font-size:.76rem;font-weight:600;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.09em;margin:0;padding-top:3px}
.deflist dd{margin:0;font-size:.96rem}
@media (max-width:640px){.deflist div{grid-template-columns:1fr;gap:2px}}

.fill{background:var(--gold-wash);color:var(--gold-ink);padding:2px 8px;border-radius:6px;
  font-size:.85em;font-weight:600}

/* footer */
footer{background:var(--panel);color:var(--panel-ink);padding:60px 0 28px;font-size:.92rem}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
@media (max-width:940px){footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:580px){footer .cols{grid-template-columns:1fr}}
footer h4{font-family:"Be Vietnam Pro",sans-serif;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-on-panel);margin-bottom:16px;font-weight:600}
footer a{color:var(--panel-soft);display:block;padding:5px 0;font-size:.9rem}
footer a:hover{color:var(--accent-on-panel);text-decoration:none}
footer p{color:var(--panel-soft);font-size:.9rem}
footer .brand-txt span{color:var(--panel-soft)}
.copy{margin-top:40px;padding-top:20px;border-top:1px solid rgba(223,192,138,.22);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.83rem;color:var(--panel-soft)}

.floatcall{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;gap:10px}
.floatcall a{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  font-weight:600;font-size:.68rem;background:var(--forest-deep);color:#fff;
  box-shadow:0 8px 22px rgba(29,68,52,.3)
}
.floatcall a.zalo{background:var(--gold);color:#3B2E10}
.floatcall a:hover{text-decoration:none;filter:brightness(1.07)}
@media (max-width:580px){.floatcall a{width:46px;height:46px;font-size:.62rem}}

/* ================= CÔNG CỤ TÍNH ================= */
.tool-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.tool-nav a{
  font-size:.82rem;font-weight:600;padding:8px 15px;border-radius:20px;
  border:1px solid var(--line-strong);color:var(--ink-2);background:var(--surface)
}
.tool-nav a:hover{background:var(--forest);color:#fff;border-color:var(--forest);text-decoration:none}

.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;align-items:start}
@media (max-width:1040px){.tool-grid{grid-template-columns:1fr}}

.tool{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 26px;box-shadow:var(--shadow);scroll-margin-top:130px
}
.tool.wide{grid-column:1 / -1}
.tool > h3{font-size:1.22rem;color:var(--head-ink)}
.tool > p.hint{font-size:.87rem;color:var(--ink-2);margin-top:8px;line-height:1.6}
.toolcols{display:grid;grid-template-columns:minmax(280px,.9fr) 1.1fr;gap:30px;align-items:start;margin-top:18px}
@media (max-width:860px){.toolcols{grid-template-columns:1fr;gap:22px}}

.pillrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.pill{
  flex:1 1 auto;min-width:76px;text-align:center;cursor:pointer;
  padding:11px 14px;border-radius:9px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink-2);font-family:inherit;font-size:.87rem;font-weight:500;
  transition:background .15s ease,color .15s ease,border-color .15s ease
}
.pill:hover{border-color:var(--forest-lite)}
.pill[aria-pressed="true"]{background:var(--forest-deep);border-color:var(--forest-deep);color:#fff;font-weight:600}
.pill.sm{min-width:52px;padding:9px 10px;font-size:.83rem;flex:0 1 auto}

.tworow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.tworow{grid-template-columns:1fr}}
.subhint{font-size:.78rem;color:var(--ink-3);margin-top:6px;line-height:1.55}

.result{
  margin-top:22px;background:var(--panel);color:var(--panel-ink);
  border-radius:var(--r);padding:22px 24px
}
.result .rlabel{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-on-panel)}
.result .rbig{
  font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.85rem,3.6vw,2.45rem);font-weight:600;
  color:#fff;line-height:1.15;margin-top:8px;font-variant-numeric:tabular-nums
}
.result .rsub{font-size:.85rem;color:var(--panel-soft);margin-top:8px;line-height:1.55}
.rrows{margin-top:18px;padding-top:16px;border-top:1px solid rgba(223,192,138,.24);display:grid;gap:9px}
.rrow{display:flex;justify-content:space-between;gap:16px;font-size:.88rem;color:var(--panel-soft)}
.rrow b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.rrow.em b{color:var(--accent-on-panel)}
.rnote{font-size:.79rem;color:var(--ink-3);margin-top:14px;line-height:1.6}
.rwarn{margin-top:18px;background:var(--gold-wash);color:var(--head-ink);border-left:3px solid var(--gold);
  border-radius:0 9px 9px 0;padding:13px 16px;font-size:.87rem;line-height:1.6}

/* bảng diễn giải chi tiết */
.dwrap{overflow-x:auto;margin-top:20px}
.dcap{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px}
.dtab{width:100%;border-collapse:collapse;font-size:.86rem;min-width:100%}
.dtab thead th{background:var(--surface-2);font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-3);font-weight:600;padding:9px 11px;text-align:left;white-space:nowrap}
.dtab td,.dtab th[scope="row"]{padding:9px 11px;border-bottom:1px solid var(--line);text-align:left;
  font-weight:400;color:var(--ink-2)}
.dtab td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.dtab td.n.minus{color:#8A4A2E}
.dtab tr.tot td,.dtab tr.tot th{font-weight:700;color:var(--head-ink);
  border-top:2px solid var(--line-strong);border-bottom:none}
.dtab tr.dim td{color:var(--ink-3)}

/* bảng nhập giai đoạn đóng BHXH */
.periods{display:grid;gap:10px;margin-top:14px}
.phead{display:grid;grid-template-columns:1fr 190px 34px;gap:12px;
  font-size:.68rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.prow{display:grid;grid-template-columns:1fr 190px 34px;gap:12px;align-items:center}
.pdates{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pdates select{padding:9px 7px;border:1px solid var(--line-strong);border-radius:8px;
  background:var(--bg);color:var(--ink);font-family:inherit;font-size:.85rem}
.pdates span{font-size:.8rem;color:var(--ink-3);padding:0 2px}
.prow input.pmoney{width:100%;padding:10px 11px;border:1px solid var(--line-strong);border-radius:8px;
  background:var(--bg);color:var(--ink);font-family:inherit;font-size:.88rem;
  font-variant-numeric:tabular-nums;text-align:right}
.pdel{width:34px;height:34px;border-radius:8px;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink-3);cursor:pointer;font-size:1rem;line-height:1}
.pdel:hover{border-color:#C0492A;color:#C0492A}
@media (max-width:760px){
  .phead{display:none}
  .prow{grid-template-columns:1fr;gap:8px;padding:14px;border:1px solid var(--line);border-radius:9px;
    background:var(--bg)}
  .prow .pdel{justify-self:end}
}
.btn-add{margin-top:14px;padding:11px 18px;border-radius:9px;border:1px dashed var(--line-strong);
  background:transparent;color:var(--forest);font-family:inherit;font-weight:600;font-size:.87rem;cursor:pointer}
.btn-add:hover{border-color:var(--forest);background:var(--surface-2)}
.btn-link{background:none;border:none;padding:0;color:var(--accent-on-panel);font-family:inherit;
  font-size:.82rem;font-weight:600;cursor:pointer;text-decoration:underline;margin-top:12px}
.btn-link:hover{color:#fff}

/* diễn giải dạng dòng của BHXH một lần */
.steps-calc{margin-top:20px;font-size:.87rem;line-height:1.75;color:var(--ink-2)}
.steps-calc h4{font-family:"Be Vietnam Pro",sans-serif;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;margin:18px 0 8px}
.steps-calc .ln{padding:3px 0}
.steps-calc .calc{font-variant-numeric:tabular-nums;color:var(--ink);padding-left:16px}
.steps-calc .sum{font-weight:600;color:var(--head-ink)}

/* ---------- bổ sung: đồng ý dữ liệu, banner, breadcrumb, bài viết ---------- */
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:.84rem;color:var(--ink-2);line-height:1.5;cursor:pointer}
.consent input{margin-top:3px;width:17px;height:17px;flex:0 0 17px;accent-color:var(--forest)}
.consent a{text-decoration:underline}
.crumb{font-size:.8rem;color:var(--ink-3);padding-top:18px}
.crumb a{color:var(--ink-3)}
.legal-foot{margin-top:28px;padding-top:18px;border-top:1px solid rgba(223,192,138,.22);font-size:.82rem;color:var(--panel-soft);line-height:1.7}
.legal-foot b{color:var(--panel-ink);font-weight:600}
.prose{max-width:72ch}
.prose h2{margin:38px 0 12px;font-size:1.55rem;color:var(--head-ink)}
.prose h3{margin:26px 0 8px;color:var(--head-ink)}
.prose p,.prose ul,.prose ol{margin:0 0 14px;color:var(--ink)}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-bottom:6px}
.prose table{min-width:0;margin:10px 0 18px;border:1px solid var(--line)}
.prose a{text-decoration:underline}
.prose blockquote{margin:16px 0;border-left:3px solid var(--gold);background:var(--gold-wash);padding:12px 18px;border-radius:0 9px 9px 0}
.meta-line{font-size:.85rem;color:var(--ink-3);margin-top:10px}
.post h3 a{color:var(--head-ink)}
.disclaimer{font-size:.85rem;color:var(--ink-3);border-top:1px solid var(--line);margin-top:30px;padding-top:14px}
.cookiebar{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;max-width:720px;margin:0 auto;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:16px 18px;display:flex;gap:14px;
  align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:.9rem}
.cookiebar[hidden]{display:none}
.cookiebar .btn{padding:9px 16px;font-size:.85rem}
.h1-sec{font-size:clamp(1.6rem,2.9vw,2.35rem);margin-top:10px}
nav.menu a{white-space:nowrap}
@media (max-width:1400px) and (min-width:1181px){
  nav.menu a{padding:8px 7px;font-size:.79rem}
  .brand-txt span{letter-spacing:.12em;font-size:.56rem}
}
.brand{flex:0 0 auto}
.brand-txt{white-space:nowrap}
@media (max-width:1400px){ .brand-txt span{display:none} }
@media (max-width:1360px) and (min-width:1181px){ .nav-cta{display:none} }

/* ---------- co giãn theo màn hình ---------- */
:root{--maxw:1600px;--gutter:clamp(16px,4vw,72px)}
.wrap{max-width:var(--maxw);padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
body{font-size:clamp(15px,.35vw + 11.5px,17.5px)}
section.band{padding-block:clamp(48px,6vw,96px)}
.hero .wrap{padding-top:clamp(48px,6vw,96px);padding-bottom:clamp(48px,6vw,96px);gap:clamp(28px,4vw,72px)}
@media (min-width:1600px){ .g4{gap:28px} .grid{gap:26px} }

/* ---------- dải tin cậy + điểm nhấn HKD + bài mới ---------- */
.trust{background:var(--surface);border-block:1px solid var(--line)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-block:18px;font-size:.88rem;color:var(--ink-2)}
.trust b{display:block;color:var(--head-ink);font-weight:600}
@media (max-width:940px){.trust .wrap{grid-template-columns:repeat(2,1fr)}}
.spot{background:linear-gradient(180deg,var(--gold-wash),var(--bg))}
.spot-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,80px);align-items:center}
.spot h2{margin-top:10px}
@media (max-width:940px){.spot-grid{grid-template-columns:1fr}}
.deadline{background:var(--panel);color:var(--panel-ink);border-radius:var(--r);padding:28px 26px;box-shadow:var(--shadow-lg)}
.dl-label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-on-panel);font-weight:600}
.dl-date{font-family:"Playfair Display",Georgia,serif;font-size:clamp(2.2rem,4vw,3rem);color:#fff;line-height:1.1;margin-top:8px;font-variant-numeric:tabular-nums}
.dl-left{font-size:.9rem;color:var(--panel-soft);margin-top:4px}
.deadline ul{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid rgba(223,192,138,.24);display:grid;gap:8px;font-size:.9rem;color:var(--panel-soft)}
.deadline b{color:#fff;font-weight:600}
.postcard{text-decoration:none;color:inherit}
.postcard:hover{text-decoration:none}
.postcard h3{color:var(--head-ink)}
.more{font-weight:600;font-size:.9rem}
.postcard .tag{align-self:flex-start;margin-bottom:0}

/* ---------- DHP Tax Check ---------- */
.tc-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:clamp(24px,3vw,48px);align-items:start}
@media (max-width:980px){.tc-layout{grid-template-columns:1fr}}
.tc-quiz{display:grid;gap:14px}
#tc-questions{display:grid;gap:14px}
.tc-q{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:18px 20px;margin:0;transition:border-color .2s,box-shadow .2s}
.tc-q legend{float:left;width:100%;padding:0;font-weight:600;line-height:1.55;color:var(--ink)}
.tc-q legend + *{clear:both}
.tc-no{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--gold-wash);color:var(--gold-ink);font-size:.8rem;margin-right:10px;font-variant-numeric:tabular-nums}
.tc-nhom{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin:0 0 4px 38px}
.tc-opts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-left:38px}
.tc-opt{position:relative;cursor:pointer}
.tc-opt input{position:absolute;opacity:0;pointer-events:none}
.tc-opt span{display:inline-block;padding:9px 18px;border:1px solid var(--line-strong);border-radius:999px;font-size:.88rem;font-weight:500;background:var(--bg);transition:background .15s,color .15s,border-color .15s}
.tc-opt input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
.tc-opt input:checked + span{background:var(--forest-deep);border-color:var(--forest-deep);color:#fff}
.tc-q.is-ok{border-color:#9DBFA9}
.tc-q.is-risk{border-color:#D9A089;box-shadow:inset 3px 0 0 #C0492A}
.tc-q.is-unsure{border-color:var(--gold-lite);box-shadow:inset 3px 0 0 var(--gold)}
.tc-progress{font-size:.85rem;color:var(--ink-3)}
.tc-side{position:sticky;top:96px;display:grid;gap:14px}
@media (max-width:980px){.tc-side{position:static}}
.tc-gauge{height:10px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;margin:14px 0 6px}
.tc-gauge-fill{height:100%;width:0;border-radius:999px;transition:width .5s ease,background .3s}
.tc-gauge-fill.lv-thap{background:#7FBF95}
.tc-gauge-fill.lv-tb{background:var(--gold-lite)}
.tc-gauge-fill.lv-cao{background:#E07A5F}
@media (prefers-reduced-motion:reduce){.tc-gauge-fill{transition:none}}
.tc-flag{background:transparent;border:0;box-shadow:none;margin:0;border-radius:0;border-top:1px solid rgba(223,192,138,.18)}
.tc-flag summary{padding:10px 0;font-size:.88rem;color:#fff;font-weight:500;justify-content:flex-start;gap:10px}
.tc-flag summary::after{margin-left:auto;color:var(--accent-on-panel)}
.tc-flag p{font-size:.84rem;color:var(--panel-soft);padding:0 0 12px;line-height:1.6}
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.dot.red{background:#E07A5F}.dot.amber{background:var(--gold-lite)}
.tc-cta{text-align:center}
.tc-opts{padding-left:0}
.tc-nhom{margin-left:0}
.tc-q legend .tc-no{float:left;margin-top:-2px}
.tc-q legend .tc-nhom{padding-top:5px}
@media (max-width:1640px) and (min-width:1181px){
  .brand-txt span{display:none}
  nav.menu a{padding:8px 8px;font-size:.82rem}
  header.nav .wrap{gap:10px}
}
@media (max-width:1460px) and (min-width:1181px){ nav.menu a{padding:8px 6px;font-size:.79rem} }
@media (max-width:1360px) and (min-width:1181px){ .nav-cta{display:none} }
/* ---------- ảnh bài viết ---------- */
.post-cover{margin:22px 0 26px;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.post-cover img{display:block;width:100%;height:auto}
.post.post-img{grid-template-columns:minmax(180px,300px) 1fr;align-items:start}
.post-thumb{display:block;border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.post-thumb img{display:block;width:100%;height:auto;transition:transform .35s ease}
.post-thumb:hover img{transform:scale(1.03)}
@media (max-width:640px){.post.post-img{grid-template-columns:1fr}}
.postcard{padding-top:0;overflow:hidden}
.postcard-img{display:block;width:calc(100% + 48px);max-width:none;margin:0 -24px 6px;height:auto;aspect-ratio:1200/630;object-fit:cover;transition:transform .35s ease}
.postcard:hover .postcard-img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.post-thumb img,.postcard-img{transition:none}}
.tick.ico{background:var(--gold-wash);color:var(--forest-deep);transition:transform .25s ease,background .25s ease}
.card:hover .tick.ico{transform:rotate(-6deg) scale(1.06);background:var(--gold-lite)}
@media (prefers-reduced-motion:reduce){.card:hover .tick.ico{transform:none}}
.tc-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center;margin-bottom:38px}
.tc-head .sec-head{margin-bottom:0}
.tc-art{width:100%;max-width:520px;height:auto;justify-self:end;animation:float 6s ease-in-out infinite}
.hkd-art{max-width:640px;border-radius:var(--r);box-shadow:var(--shadow-lg);animation:none}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.tc-art{animation:none}}
@media (max-width:940px){.tc-head{grid-template-columns:1fr}.tc-art{justify-self:start;max-width:420px}}