/* Cẩm nang HomeSB – trang tập hợp, trang chủ đề, trang bài (dựng bởi tools/cam-nang.js; dùng màu của khung chung hsb-khung.css) */
.cn{font-family:var(--hk-f,'Be Vietnam Pro',system-ui,sans-serif);color:var(--hk-ink,#10203A);background:var(--hk-ivory,#F6F2EA);padding:22px 0 40px}
.cn *{box-sizing:border-box}
.cn a{color:inherit}
.cn-in{max-width:1180px;margin:0 auto;padding:0 24px}
.cn-k{margin:0 0 4px;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hk-gold,#E0A31A)}
.cn-hd{background:#fff;border:1px solid var(--hk-line,#E4DED3);border-radius:16px;padding:20px 22px;margin:0 0 16px}
.cn-hd h1{margin:0 0 4px;font:800 clamp(24px,3vw,34px)/1.2 var(--hk-f);color:var(--hk-navy,#0A1F44);letter-spacing:-.01em}
.cn-hd>p{margin:0;color:var(--hk-mut,#56627A);font-size:15px}
.cn-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;align-items:center}
.cn-chips b{font-size:12.5px;letter-spacing:.04em;margin-right:2px;white-space:nowrap}
.cn-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;background:var(--hk-ivory,#F6F2EA);border:1px solid var(--hk-line,#E4DED3);font-size:13.5px;font-weight:600;color:var(--hk-navy,#0A1F44);text-decoration:none;white-space:nowrap}
.cn-chip:hover,.cn-chip[aria-current]{border-color:var(--hk-gold,#E0A31A);background:#fff}
.cn-chip[aria-current]{background:var(--hk-navy,#0A1F44);color:#fff;border-color:var(--hk-navy,#0A1F44)}
.cn-chip small{font-weight:500;opacity:.7}
.cn-g{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
.cn-card{background:#fff;border:1px solid var(--hk-line,#E4DED3);border-radius:16px;padding:18px 20px;margin:0 0 16px}
.cn-card>h2{margin:0 0 12px;font:800 19px/1.3 var(--hk-f);color:var(--hk-navy,#0A1F44)}
.cn-ph{display:block;border-radius:12px;overflow:hidden;background:#E9E2D6;aspect-ratio:16/9}
.cn-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
a:hover .cn-ph img{transform:scale(1.03)}
.cn-feat{display:grid;grid-template-columns:1.55fr 1fr;gap:18px}
.cn-feat-m{text-decoration:none;display:block}
.cn-feat-m h3{margin:12px 0 6px;font:800 clamp(19px,2vw,24px)/1.3 var(--hk-f);color:var(--hk-navy,#0A1F44)}
.cn-feat-m p{margin:0 0 6px;color:var(--hk-mut,#56627A);font-size:14.5px;line-height:1.55}
.cn-meta{font-size:12.5px;color:#8A93A5}
.cn-side-l{display:flex;flex-direction:column;gap:12px}
.cn-mini{display:block;text-decoration:none}
.cn-mini .cn-ph{aspect-ratio:16/8}
.cn-mini b{display:block;margin-top:7px;font-size:15px;line-height:1.35;color:var(--hk-navy,#0A1F44)}
.cn-li{display:grid;grid-template-columns:190px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid #EEE7DA;text-decoration:none}
.cn-li:first-of-type{border-top:0;padding-top:2px}
.cn-li .cn-ph{aspect-ratio:16/10}
.cn-li h3{margin:0 0 5px;font:700 16.5px/1.35 var(--hk-f);color:var(--hk-navy,#0A1F44)}
.cn-li p{margin:0 0 6px;color:var(--hk-mut,#56627A);font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cn-tag{display:inline-block;font-size:12px;font-weight:700;color:var(--hk-acc-d,#8A5A00);margin-right:6px}
.cn-gd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cn-gd h3{margin:0 0 6px;font:800 14px/1.3 var(--hk-f);color:var(--hk-navy,#0A1F44)}
.cn-gd ul{margin:0;padding:0;list-style:none}.cn-gd li{margin:0 0 6px;font-size:14px;line-height:1.4}
.cn-gd a{text-decoration:none;color:var(--hk-mut,#56627A)}.cn-gd a:hover{color:var(--hk-navy,#0A1F44);text-decoration:underline}
.cn-empty{color:var(--hk-mut,#56627A);font-size:14px;margin:0}
.cn-cta{background:var(--hk-navy,#0A1F44);color:#fff;border-radius:16px;padding:18px 20px;margin:0 0 16px}
.cn-cta b{display:block;color:var(--hk-gold2,#F2C14E);font-size:17px;line-height:1.3;margin-bottom:3px}
.cn-cta p{margin:0 0 10px;color:#C8D0DE;font-size:14px}
.cn-btns{display:flex;flex-wrap:wrap;gap:8px}
.cn-btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;border-radius:999px;background:var(--hk-gold,#E0A31A);color:var(--hk-navy,#0A1F44)!important;font-weight:800;font-size:14px;text-decoration:none}
.cn-btn.w{background:#fff}
.cn-tools a{display:flex;justify-content:space-between;gap:8px;padding:9px 0;border-top:1px solid #EEE7DA;text-decoration:none;font-size:14.5px;font-weight:600;color:var(--hk-navy,#0A1F44)}
.cn-tools a:first-child{border-top:0;padding-top:0}.cn-tools a i{font-style:normal;color:var(--hk-gold,#E0A31A)}
.cn-ct{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cn-ct a{text-decoration:none;font-size:13px;font-weight:600;line-height:1.35;color:var(--hk-navy,#0A1F44)}.cn-ct .cn-ph{aspect-ratio:4/3;margin-bottom:5px}
.cn-ol{margin:0;padding:0 0 0 20px}.cn-ol li{margin:0 0 7px;font-size:14px;line-height:1.4}.cn-ol a{text-decoration:none}.cn-ol a:hover{text-decoration:underline}
/* ---- Trang bài ---- */
.cn-art{background:#fff;border:1px solid var(--hk-line,#E4DED3);border-radius:16px;padding:24px 28px 26px;margin:0 0 16px;min-width:0}
.cn-art h1{margin:0 0 8px;font:800 clamp(25px,3.1vw,36px)/1.22 var(--hk-f);color:var(--hk-navy,#0A1F44);letter-spacing:-.01em}
.cn-by{margin:0 0 14px;font-size:13.5px;color:var(--hk-mut,#56627A)}.cn-by b{color:var(--hk-ink,#10203A)}
.cn-cover{margin:0 0 14px}.cn-cover .cn-ph{aspect-ratio:16/9}
.cn-sum{background:#FFF8E6;border-left:4px solid var(--hk-gold,#E0A31A);border-radius:10px;padding:12px 16px;margin:0 0 14px}
.cn-sum b{display:block;margin-bottom:4px;font-size:14.5px}
.cn-sum ul{margin:0;padding:0 0 0 18px}.cn-sum li{margin:3px 0;font-size:15px;line-height:1.5}
.cn-toc{background:var(--hk-ivory,#F6F2EA);border-radius:12px;padding:12px 16px;margin:0 0 18px}
.cn-toc b{display:block;font-size:14px;margin-bottom:4px}
.cn-toc ol{margin:0;padding:0 0 0 20px}.cn-toc li{margin:3px 0;font-size:14.5px}.cn-toc a{text-decoration:none;color:var(--hk-navy,#0A1F44)}.cn-toc a:hover{text-decoration:underline}
.cn-body{font-size:16.5px;line-height:1.75;color:#24324A}
.cn-body h2{margin:28px 0 10px;font:800 23px/1.3 var(--hk-f);color:var(--hk-navy,#0A1F44);scroll-margin-top:170px}
.cn-body h3{margin:20px 0 8px;font:800 18.5px/1.35 var(--hk-f);color:var(--hk-navy,#0A1F44);scroll-margin-top:170px}
.cn-body p{margin:0 0 14px}
.cn-body ul,.cn-body ol{margin:0 0 14px;padding:0 0 0 22px}.cn-body li{margin:0 0 6px}
.cn-body a{color:#1E5FB4;text-decoration:underline;text-underline-offset:2px}
.cn-body strong{color:var(--hk-ink,#10203A)}
.cn-fig{margin:8px 0 18px}.cn-fig img{display:block;width:100%;height:auto;border-radius:12px;background:#E9E2D6}
.cn-fig figcaption{margin-top:6px;font-size:13.5px;color:var(--hk-mut,#56627A);text-align:center}
.cn-note{margin:4px 0 16px;padding:12px 16px;border-radius:10px;background:#FFF8E6;border:1px solid #F1DEB0;font-size:15.5px;line-height:1.6}
.cn-tbl{overflow-x:auto;margin:6px 0 18px;-webkit-overflow-scrolling:touch}
.cn-tbl table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.45;min-width:420px}
.cn-tbl th{background:var(--hk-navy,#0A1F44);color:#fff;text-align:left;padding:9px 11px;font-weight:700}
.cn-tbl td{padding:9px 11px;border-bottom:1px solid #EEE7DA;background:#FFFDF9;vertical-align:top}
.cn-tbl tr:nth-child(even) td{background:var(--hk-ivory,#F6F2EA)}
.cn-faq{border:1px solid var(--hk-line,#E4DED3);border-radius:12px;margin:0 0 9px;background:var(--hk-ivory,#F6F2EA)}
.cn-faq[open]{background:#fff;border-color:#E9C877}
.cn-faq summary{cursor:pointer;list-style:none;padding:12px 44px 12px 15px;font-weight:700;font-size:15.5px;position:relative;line-height:1.4}
.cn-faq summary::-webkit-details-marker{display:none}
.cn-faq summary::after{content:"+";position:absolute;right:14px;top:9px;width:22px;height:22px;border-radius:50%;background:var(--hk-navy,#0A1F44);color:#fff;font:700 16px/22px sans-serif;text-align:center}
.cn-faq[open] summary::after{content:"–";background:var(--hk-gold,#E0A31A)}
.cn-faq p{margin:0;padding:0 15px 14px;font-size:15.5px;color:var(--hk-mut,#56627A)}
.cn-sol{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center;margin:8px 0 18px;padding:14px;border-radius:14px;border:2px dashed #E9C877;background:#FFF8E6;text-decoration:none!important;color:inherit!important}
.cn-sol .cn-ph{aspect-ratio:4/3}
.cn-sol small{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hk-acc-d,#8A5A00)}
.cn-sol b{display:block;font-size:17px;line-height:1.3;color:var(--hk-navy,#0A1F44);margin:2px 0 4px}
.cn-sol span{display:block;font-size:14px;line-height:1.5;color:var(--hk-mut,#56627A)}
.cn-sol em{font-style:normal;font-weight:800;color:var(--hk-navy,#0A1F44)}
.cn-body .cn-cta{margin:10px 0 18px}
.cn-au{display:flex;gap:12px;align-items:flex-start;margin:22px 0 0;padding:14px 16px;border-radius:12px;background:var(--hk-ivory,#F6F2EA)}
.cn-au i{flex:none;width:44px;height:44px;border-radius:50%;background:var(--hk-navy,#0A1F44);color:var(--hk-gold2,#F2C14E);font:800 17px/44px var(--hk-f);text-align:center;font-style:normal}
.cn-au p{margin:0;font-size:14px;color:var(--hk-mut,#56627A);line-height:1.5}.cn-au b{display:block;color:var(--hk-ink,#10203A);font-size:15px}
.cn-rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cn-rel a{text-decoration:none}.cn-rel .cn-ph{aspect-ratio:16/10}.cn-rel b{display:block;margin-top:7px;font-size:14.5px;line-height:1.35;color:var(--hk-navy,#0A1F44)}
.cn-stick{position:sticky;top:calc(var(--hk-top,104px) + 64px)}
.cn-stoc a{display:block;padding:6px 0 6px 10px;border-left:2px solid #EEE7DA;font-size:14px;text-decoration:none;color:var(--hk-mut,#56627A);line-height:1.35}
.cn-stoc a.on,.cn-stoc a:hover{border-color:var(--hk-gold,#E0A31A);color:var(--hk-navy,#0A1F44);font-weight:600}
@media (max-width:980px){
  .cn-g{grid-template-columns:minmax(0,1fr)}
  .cn-stick{position:static}.cn-side-toc{display:none}
}
@media (max-width:760px){
  .cn{padding:14px 0 26px}.cn-in{padding:0 14px}
  .cn-hd{padding:16px;border-radius:14px}.cn-hd h1{font-size:23px}
  .cn-chips{flex-wrap:nowrap;overflow-x:auto;margin-right:-16px;padding-right:16px;scrollbar-width:none}.cn-chips::-webkit-scrollbar{display:none}
  .cn-card{padding:14px;border-radius:14px}
  .cn-feat{grid-template-columns:1fr;gap:12px}
  .cn-side-l{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cn-mini b{font-size:13.5px}
  .cn-li{grid-template-columns:112px minmax(0,1fr);gap:11px;padding:11px 0}.cn-li h3{font-size:15px}.cn-li p{display:none}
  .cn-gd{grid-template-columns:1fr;gap:10px}
  .cn-art{padding:16px 15px 18px;border-radius:14px}.cn-art h1{font-size:24px}
  .cn-body{font-size:16px;line-height:1.7}.cn-body h2{font-size:20.5px;margin-top:22px}.cn-body h3{font-size:17px}
  .cn-sol{grid-template-columns:96px minmax(0,1fr);gap:11px;padding:11px}.cn-sol b{font-size:15.5px}.cn-sol span{font-size:13.5px}
  .cn-rel{grid-template-columns:1fr 1fr;gap:10px}.cn-rel a:nth-child(3){display:none}
}