*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --pr:#1a6ef5;--prl:#e8f0fe;--prd:#1252b8;
  --ok:#0ea05e;--okl:#e6f7f0;
  --wa:#d97706;--wal:#fef3c7;
  --pu:#7c3aed;--pul:#ede9fe;
  --er:#dc2626;--erl:#fee2e2;
  --tx:#111827;--t2:#6b7280;--t3:#9ca3af;
  --bd:#e5e7eb;--bg:#f3f4f6;--wh:#ffffff;
  --rd:10px;--sh:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04)
}

/* ── Header ── */
.hdr{background:var(--wh);border-bottom:1px solid var(--bd);padding:0 1.5rem;height:56px;display:flex;align-items:center;position:sticky;top:0;z-index:200;box-shadow:var(--sh)}
.hdr-in{max-width:1260px;margin:0 auto;width:100%;display:flex;align-items:center;gap:10px}
.logo{width:32px;height:32px;background:var(--pr);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex-shrink:0}
.hdr-ttl{font-size:15px;font-weight:600}
.hdr-badge{margin-left:auto;background:var(--okl);color:var(--ok);font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;white-space:nowrap}

.wrap{max-width:1260px;margin:0 auto;padding:1.5rem}

/* ── Page hero ── */
.hero{margin-bottom:1.25rem}
.hero h1{font-size:21px;font-weight:700;margin-bottom:10px;text-align:center;}
.hero p{color:var(--t2)}
.ltag{display:inline-flex;align-items:center;gap:5px;color:#9F2125;font-size:13.5px;font-weight:500;margin-top:5px;margin-bottom:20px}

/* ── Main tab switcher (3 types) ── */
.main-tabs{display:flex;gap:0;background:#F5F6F9;border-radius:12px 12px 0 0;overflow:hidden;box-shadow:var(--sh)}
.mtab{border:none;border-bottom:1px dashed #0059ff;;font-size: inherit;flex:1;height:48px;background:transparent;font-family:inherit;font-weight:600;color:var(--t2);cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center;gap:7px}
.mtab:hover{background:var(--bg);color:var(--tx)}
.mtab.bb.on{color:var(--pr);border-bottom-color:var(--pr);background:var(--prl);border-bottom: 3px solid var(--pr);}
.mtab.tv.on{color:var(--pu);border-bottom-color:var(--pu);background:var(--pul);border-bottom: 3px solid var(--pu);}
.mtab.co.on{color:var(--ok);border-bottom-color:var(--ok);background:var(--okl);border-bottom: 3px solid var(--ok);}
.mtab-icon{width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.mtab.bb .mtab-icon{background:var(--pr);color:#fff}
.mtab.tv .mtab-icon{background:var(--pu);color:#fff}
.mtab.co .mtab-icon{background:var(--ok);color:#fff}
.mtab.bb.on .mtab-icon{background:var(--pr)}
.mtab.tv.on .mtab-icon{background:var(--pu)}
.mtab.co.on .mtab-icon{background:var(--ok)}

.mpane{display:none;background:var(--wh);border-top:none;border-radius:0 0 12px 12px;}
.mpane.on{display:block}

/* ── Card ── */
.card{background:var(--wh);border:1px solid var(--bd);border-radius:12px;box-shadow:var(--sh);margin-top:15px}
.chd{padding:.9rem 1.2rem .8rem;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:8px}
.cic{width:27px;height:27px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ci-b{background:var(--prl)}.ci-g{background:var(--okl)}.ci-p{background:var(--pul)}.ci-y{background:var(--wal)}
.cttl{font-size:16px;font-weight:600}
.cbd1{padding:0.3rem 0rem}
.cbd{padding:1rem 1.2rem}
/* ── 2-col grid inside pane ── */
.g2{grid-template-columns:490px 1fr;gap:1.25rem;align-items:start;padding:1.25rem}
.g2-wide{grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start;padding:0.6em 1.25rem}

/* ── Period rows ── */
.plist{display:flex;flex-direction:column;gap:20px;margin:10px 0}
.prow{background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:12px 13px 8px;position:relative;transition:border-color .15s}
.prow:hover{border-color:#c0d0f5}.prow.bad{border-color:#fca5a5;background:#fff8f8}
/*.prow.tv-row:hover{border-color:#c4b5fd}.prow.tv-row{border-color:#ddd6fe}*/
.pnum{position:absolute;top:-8px;left:12px;color:#fff;font-size:12px;font-weight:700;padding:1px 7px;border-radius:20px}
.pnum.bb{background:var(--pr)}.pnum.tv{background:var(--pu)}
.pf{display:grid;grid-template-columns:1fr 1fr 1.2fr 32px;gap:18px;align-items:end}
.fg label{display:block;font-size:12px;font-weight:500;color:var(--t2);margin-bottom:3px}
.dpair{display:flex;gap:8px}
.fg select,.fg input{width:100%;height:35px;border:1px solid var(--bd);border-radius:8px;font-family:inherit;color:var(--tx);background:var(--wh);padding:0 7px;outline:none;transition:border-color .15s;appearance:none;-webkit-appearance:none}
.fg select:focus,.fg input:focus{border-color:var(--pr);box-shadow:0 0 0 3px rgba(26,110,245,.1)}
/* .tv-form .fg select:focus,.tv-form .fg input:focus{border-color:var(--pu);box-shadow:0 0 0 3px rgba(124,58,237,.1)} */
.fg .mo{width:50px;flex-shrink:0;padding:0 3px;text-align:center}.fg .yr{flex:1}
.pmeta{display:none;align-items:center;justify-content:space-between;margin-top:6px;min-height:15px}
.pdur{font-size:12px;font-weight:600}
.pdur.bb{color:var(--ok)}.pdur.tv{color:var(--pu)}
.perr{font-size:12px;color:var(--er);font-weight:500}
.pnte{font-size:12px;color:var(--t3)}
.brm{width:35px;height:35px;border-radius:7px;border:none;background:var(--erl);color:var(--er);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.brm:hover{background:#fca5a5}.brm:disabled{opacity:.3;cursor:not-allowed}

.badd{width:35%;height:38px;border-radius:9px;font-family:inherit;font-weight:600;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:.9rem}
.badd.bb{border:1.5px dashed #93c5fd;background:var(--prl);color:var(--pr)}
.badd.bb:hover{background:#dbeafe;border-color:var(--pr)}
.badd.tv{border:1.5px dashed #c4b5fd;background:var(--pul);color:var(--pu)}
.badd.tv:hover{background:#ddd6fe;border-color:var(--pu)}

/* ── Summary bar ── */
.sbar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:.9rem;padding:9px 13px;background:var(--bg);border-radius:9px;border:1px solid var(--bd)}
.si .sl{font-size:13px;color:var(--t3);margin-bottom:1px}
.si .sv{font-size:13px;font-weight:700}
.sv.bl{color:var(--pr)}.sv.gn{color:var(--ok)}.sv.pu{color:var(--pu)}

.ferr{background:var(--erl);border:1px solid #fca5a5;border-radius:8px;padding:8px 12px;font-size:13px;color:var(--er);margin-bottom:8px;display:none}
.ferr.on{display:block}
.bgo{width:50%;height:42px;border:none;border-radius:var(--rd);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;color:#fff;transition:filter .15s,transform .1s;display:block;margin:0 auto}
.bgo.bb{background:var(--pr)}.bgo.bb:hover{filter:brightness(1.1)}
.bgo.tv{background:var(--pu)}.bgo.tv:hover{filter:brightness(1.1)}
.bgo.co{background:#0ea05e}.bgo.co:hover{filter:brightness(1.08)}
.bgo:active{transform:scale(.99)}
.brst{width:20%;background:transparent;color:var(--t2);border:1px solid var(--bd);border-radius:var(--rd);font-family:inherit;font-size:13px;cursor:pointer;transition:all .15s}
.brst:hover{border-color:var(--t3);color:var(--tx)}

/* ── Result placeholder ── */
.rph{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;gap:12px}
.rph .ico{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:21px}
.rph p{color:var(--t3);font-size:13px;text-align:center}

/* ── Total box ── */
.tbox{border-radius:12px;padding:1.1rem 1.4rem;color:#fff;margin-bottom:.9rem;display:flex;align-items:center;justify-content:space-between}
.tbox.bb{background:linear-gradient(135deg,#1a6ef5,#2563eb)}
.tbox.tv{background:linear-gradient(135deg,#7c3aed,#6d28d9)}
.tbox.co{background:#0ea05e}
.tbox .tl{font-size:12px;opacity:.82;margin-bottom:3px}
.tbox .ta{font-size:25px;font-weight:700;letter-spacing:-.5px}
.tbox .ts{font-size:12px;opacity:.72;margin-top:2px}
.tico{width:42px;height:42px;background:rgba(255,255,255,.15);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}

/* ── Metric cards ── */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:.9rem}
.mc{background:var(--bg);border:1px solid var(--bd);border-radius:9px;padding:.8rem .9rem}
.mc .ml{font-size:12px;color:var(--t2);margin-bottom:2px}
.mc .mv{font-size:15px;font-weight:700;color:var(--tx)}
.mc .ms{font-size:10.5px;color:var(--t3);margin-top:1px}
.mc.gn .mv{color:var(--ok)}.mc.or .mv{color:var(--wa)}.mc.bl .mv{color:var(--pr)}.mc.pu .mv{color:var(--pu)}

/* ── Result tabs ── */
.rtabs{display:flex;border-bottom:2px solid var(--bd);margin-bottom:.9rem}
.rtab{padding:6px 13px;font-family:inherit;font-size:13px;font-weight:500;color:var(--t2);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;margin-bottom:-2px;transition:all .15s}
.rtab.on.bb{color:var(--pr);border-bottom-color:var(--pr)}
.rtab.on.tv{color:var(--pu);border-bottom-color:var(--pu)}
.rtab.on.co{color:var(--ok);border-bottom-color:var(--ok)}
.rpane{display:none}.rpane.on{display:block}

/* ── Detail table ── */
.dg-tbl{width:100%;border-collapse:collapse;margin-bottom:.9rem;font-size:13px}
.dg-tbl thead tr.bb{background:var(--pr)}.dg-tbl thead tr.tv{background:var(--pu)}.dg-tbl thead tr.co{background:var(--ok)}
.dg-tbl thead th{color:#fff;font-size:11.5px;font-weight:600;padding:8px 12px;text-align:right;white-space:nowrap;border:none}
.dg-tbl thead th:first-child{text-align:center}
.dg-tbl thead th:nth-child(3){text-align:center}
.dg-tbl tbody tr:nth-child(odd){background:var(--wh)}
.dg-tbl tbody tr:nth-child(even){background:#f9fafb}
.dg-tbl tbody td{padding:8px 12px;border-bottom:1px solid var(--bd);text-align:right;color:var(--tx)}
.dg-tbl tbody td:first-child{text-align:center;font-weight:700;font-size:13.5px}
.dg-tbl tbody td:nth-child(3){text-align:center;font-weight:600;font-size:13px}
.dg-tbl tbody td:nth-child(4){color:var(--t3);font-size:12px}
.dg-tbl tbody td:last-child{font-weight:600}
.dg-tbl tbody tr.r-b14 td:first-child{color:#92400e}
.dg-tbl tbody tr.r-a14 td:first-child{color:var(--pr)}
.dg-tbl tbody tr.r-a14-tv td:first-child{color:var(--pu)}
.dg-tbl tbody td:last-child.gn{color:var(--ok)}
.dg-tbl tbody td:last-child.pu{color:var(--pu)}
.dg-tbl tfoot tr.bb{background:var(--prl);border-top:2px solid var(--pr)}
.dg-tbl tfoot tr.tv{background:var(--pul);border-top:2px solid var(--pu)}
.dg-tbl tfoot tr.co{background:var(--okl);border-top:2px solid var(--ok)}
.dg-tbl tfoot td{padding:9px 12px;font-weight:700;text-align:right;font-size:13px}
.dg-tbl tfoot td:first-child{text-align:center}
.dg-tbl tfoot td:nth-child(3){text-align:center}
.dg-tbl tfoot tr.bb td{color:var(--prd)}.dg-tbl tfoot tr.tv td{color:#5b21b6}.dg-tbl tfoot tr.co td{color:#065f46}

.ptag{display:inline-block;font-size:10px;font-weight:600;padding:1px 5px;border-radius:3px;margin-left:2px;vertical-align:middle}
.ptag.b14{background:#fef3c7;color:#92400e}.ptag.a14b{background:var(--prl);color:var(--pr)}.ptag.a14v{background:var(--pul);color:#5b21b6}

/* ── Summary table ── */
table.sum{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:.9rem}
.sum thead th{background:var(--bg);font-size:12.5px;font-weight:600;color:var(--t2);text-align:left;padding:7px 10px;border-bottom:1px solid var(--bd)}
.sum thead th:last-child{text-align:right}
.sum tbody td{padding:8px 10px;border-bottom:1px solid var(--bd);color:var(--tx)}
.sum tbody td:last-child{text-align:right;font-weight:500;white-space:nowrap}
.sum tbody tr:last-child td{border-bottom:none}
.sum tr.tot td{font-weight:700;border-top:2px solid;border-bottom:none}
.sum tr.tot.bb td{background:var(--prl);color:var(--prd);border-top-color:var(--pr)}
.sum tr.tot.tv td{background:var(--pul);color:#5b21b6;border-top-color:var(--pu)}
.sum tr.tot.co td{background:var(--okl);color:#065f46;border-top-color:var(--ok)}
.sum tr.tgn td{background:var(--okl)}.sum tr.twa td{background:var(--wal)}.sum tr.tpu td{background:var(--pul)}
.stag{display:inline-block;font-size:10px;font-weight:600;padding:1px 6px;border-radius:20px;margin-left:4px}
.stag.b14{background:#fef3c7;color:#92400e}.stag.a14{background:var(--prl);color:var(--pr)}.stag.a14v{background:var(--pul);color:#5b21b6}

/* ── Combined breakdown ── */
.co-section{margin-bottom:1rem}
.co-section-title{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;margin-bottom:8px;padding:5px 10px;border-radius:6px}
.co-section-title.bb{background:var(--prl);color:var(--prd)}
.co-section-title.tv{background:var(--pul);color:#5b21b6}

/* ── Notes ── */
.nb{border-radius:8px;padding:9px 13px;font-size:13px;line-height:1.65;margin-bottom:8px}
.nb.bl{background:var(--prl);border:1px solid #bfdbfe;color:#1e40af}
.nb.gn{background:var(--okl);border:1px solid #6ee7b7;color:#065f46}
.nb.wa{background:var(--wal);border:1px solid #fde68a;color:#78350f}
.nb.er{background:var(--erl);border:1px solid #fca5a5;color:#991b1b}
.nb.pu{background:var(--pul);border:1px solid #c4b5fd;color:#5b21b6}


/* ── Coef section ── */
.coef-wrap{margin-top:1.25rem;width:790px}
.coef-grid{display:flex;flex-direction:column;gap:1rem}
.dg-tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── Coef grid — desktop: flex ngang, mobile: dọc 2 cột ── */
.cf-wrap{position:relative}

/* Desktop: nhóm tối đa 15 cột, mỗi nhóm = cặp hàng năm + hệ số */
.cf-desktop{display:flex;flex-direction:column;gap:10px}
.cf-group{display:flex;flex-direction:column;gap:2px;border-radius:8px;overflow:hidden;border:1px solid var(--bd)}
.cf-drow{display:flex;gap:0}
.cf-drow.head .cf-cell{font-size:14px;font-weight:400;color:#111827;padding:6px 4px;text-align:center}
.cf-drow.head.bb .cf-cell{background:#E0EDFE}
.cf-drow.head.tv .cf-cell{background:#EEE6FE}
.cf-drow.vals .cf-cell{font-size:14px;padding:7px 4px;text-align:center;background:var(--wh)}
.cf-drow.vals .cf-cell:nth-child(even){background:#e0edfe4d}
.cf-cell{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-cell.label{flex:0 0 50px;font-size:11px;font-weight:600;color:var(--t2);text-align:left;padding-left:6px}

/* Mobile: danh sách dọc */
.cf-mobile{display:none;border-radius:8px;overflow:hidden;border:1px solid var(--bd)}
.cf-mhead{display:grid;grid-template-columns:1fr 1fr;font-size:11.5px;font-weight:700;color:#fff;padding:7px 12px}
.cf-mhead.bb{background:var(--pr)}.cf-mhead.tv{background:var(--pu)}
.cf-mrow{display:grid;grid-template-columns:1fr 1fr;padding:8px 12px;font-size:13px;border-top:1px solid var(--bd)}
.cf-mrow:nth-child(odd){background:var(--wh)}.cf-mrow:nth-child(even){background:#f9fafb}
.cf-mrow .yr{color:var(--t2);font-weight:500}
.cf-mrow .hs{font-weight:700;text-align:right;color:var(--tx)}
.cf-more{display:none;width:100%;margin-top:8px;height:36px;border:1px solid var(--bd);border-radius:8px;background:var(--bg);font-family:inherit;font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;transition:all .15s}
.cf-more:hover{background:var(--bd);color:var(--tx)}
.cf-collapse{display:none;width:100%;margin-top:4px;height:30px;border:none;background:transparent;font-family:inherit;font-size:12px;color:var(--t3);cursor:pointer}
.cf-collapse:hover{color:var(--t2)}

@media(max-width:640px){
  .cf-desktop{display:none}
  .cf-mobile{display:block}
  .cf-more{display:block}
}
/* ── FAQ ── */
.faq{margin-top:1.75rem}
.faq h2{font-size:16px;font-weight:700;margin-bottom:.9rem}
.faq-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.fi{background:var(--wh);border:1px solid var(--bd);border-radius:9px;padding:.85rem .95rem}
.fi h3{font-size:13.5px;font-weight:600;margin-bottom:4px}
.fi p{font-size:13px;color:var(--t2);line-height:1.65}
.cc-salary-container{max-width:1190px;display:flex;grid-template-columns:1fr 1fr;gap: 0 30px}
/* ── Animations ── */
@keyframes fi{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.ani{animation:fi .25s ease}

@media(max-width:1060px){.g2{grid-template-columns:1fr}.g2-wide{grid-template-columns:1fr}.faq-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .pf{grid-template-columns:1fr 1fr}.pf .fg:nth-child(3){grid-column:span 2}.pf .brm{display:none}
  .mgrid{grid-template-columns:1fr}.main-tabs{flex-wrap:wrap}
  .faq-grid{grid-template-columns:1fr}.wrap{padding:1rem .9rem}
  .mtab{font-size:13px}
  /* Bảng diễn giải: ẩn cột công thức, giữ cột quan trọng */
  .dg-tbl{font-size:12px;min-width:320px}
  .dg-tbl thead th{padding:6px 8px;font-size:10.5px}
  .dg-tbl tbody td{padding:6px 8px}
  .dg-tbl tfoot td{padding:7px 8px;font-size:12px}
  .dg-tbl .col-formula{display:none}

  /* Bảng tổng hợp */
  .sum{font-size:12px}
  .sum thead th,.sum tbody td{padding:6px 8px}

  /* Tổng box */
  .tbox .ta{font-size:20px}
  .tbox .ts{font-size:10.5px}
  .tico{display:none}
  .cbd{padding: 1rem 0.6rem;}
  .bt-div .brst{width:25%}
  .badd{width:50%}
  .cc-salary-container{flex-direction:column}
  .ads-faq{text-align:center;padding:10px}
  .cc-salary a{display:block}
}
.bt-div{display:flex;justify-content:space-between}
.badd.bs {
    border: 1px solid #DFE1ED;
    background: #fff;
    color: #7B7E8F
}
.bt-div .co{display:inline;margin:0 0}
.cc-faqs-container{max-width:1170px}
.cc-salary-wrapper, .cc-faqs-wrapper, .coef-wrap-wrapper{max-width:790px;width:100%}

.menu-faq{background:#fff;border-radius:12px;padding: 20px 15px;}
.menu-faq h2{ font-family: "Inter", sans-serif;font-size:20px;font-weight: 600;}
.menu-faq .item{ font-family: "Inter", sans-serif;font-size:15px;border-bottom:1px dotted #E4EDFF;line-height:30px; padding: 7px 2px;font-weight:500}
.menu-faq .item:hover{color:#0019CB}
.short-faq{display:flex;gap:25px 0px;flex-direction: column;}
.cc-salary-title{margin-bottom:7px}
.cc-salary-calculator::before{content:"";position:absolute;top:-120px;right:-22px;width:150px;height:150px;background:url('https://vn.joboko.com/_v5/images/df.png') no-repeat center/contain;pointer-events:none}
.chd1{padding 5px 0px;font-size:16px}
.rst{padding-top:1.2em}
.cc-salary{padding-bottom:15px}
.cc-faqs{padding-top:15px;padding-bottom: 30px;}

.cc-salary-calculator:has(.mtab.co.on){
	border: 1px dashed var(--ok);
	--current-color: var(--ok);
}
.cc-salary-calculator:has(.mtab.tv.on){
	border: 1px dashed var(--pu);
	--current-color: var(--pu);
}
.mtab{
	border-bottom: 1px dashed var(--current-color);
}