/* VDC-v2 giai đoạn 4: trang danh mục tin / dịch vụ và trang chi tiết bài viết */
.vdn,.vdp{--ink:#17202b;--mute:#5d6875;--line:#e2e6eb;--soft:#f3f5f8;--red:#d6322a;--red-d:#a31d17;--green:#1e8a5a;font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);max-width:1160px}
.vdn *,.vdp *{box-sizing:border-box}
.vdn a,.vdp a{color:inherit}
.vdn-bc{background:none;padding:14px 0 6px;margin:0;font-size:13px}

/* ===== Đầu trang danh mục ===== */
.vdn-head{margin:4px 0 22px}
.vdn-head h1{font-size:30px;font-weight:800;line-height:1.25;margin:6px 0 14px}
.vdn-pills{display:flex;flex-wrap:wrap;gap:8px}
.vdn-pills a{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--line);border-radius:99px;font-size:14px;font-weight:600;text-decoration:none;background:#fff;transition:.15s}
.vdn-pills a span{font-size:12px;font-weight:600;color:var(--mute);background:var(--soft);border-radius:99px;padding:1px 8px}
.vdn-pills a:hover{border-color:var(--red);color:var(--red)}
.vdn-pills a.on{background:var(--red);border-color:var(--red);color:#fff}
.vdn-pills a.on span{background:rgba(255,255,255,.22);color:#fff}

/* ===== Bài nổi bật ===== */
.vdn-feat{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;margin-bottom:26px}
.vdn-feat-main{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.vdn-feat-main .vdn-img img{height:300px}
.vdn-feat-main .vdn-body{padding:16px 18px 18px}
.vdn-feat-main h2{font-size:22px;font-weight:800;line-height:1.35;margin:0 0 8px}
.vdn-feat-side{display:flex;flex-direction:column;gap:12px}
.vdn-mini{display:flex;gap:12px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fff}
.vdn-mini-img{flex:0 0 112px}
.vdn-mini-img img{width:112px;height:72px;object-fit:cover;border-radius:9px;display:block}
.vdn-mini h3{font-size:14.5px;font-weight:700;line-height:1.4;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ===== Lưới bài viết ===== */
.vdn-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.vdn-grid-3{grid-template-columns:repeat(3,1fr)}
.vdn-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;transition:box-shadow .2s,transform .2s}
.vdn-card:hover,.vdn-feat-main:hover{box-shadow:0 12px 30px rgba(23,32,43,.10);transform:translateY(-2px)}
.vdn-img{display:block;overflow:hidden;background:var(--soft)}
.vdn-img img{display:block;width:100%;height:176px;object-fit:cover;transition:transform .35s}
.vdn-card:hover .vdn-img img,.vdn-feat-main:hover .vdn-img img{transform:scale(1.04)}
.vdn-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.vdn-card h3{font-size:16.5px;font-weight:700;line-height:1.4;margin:0 0 6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vdn-card h3 a,.vdn-feat-main h2 a,.vdn-mini h3 a{text-decoration:none}
.vdn-card:hover h3 a,.vdn-feat-main:hover h2 a,.vdn-mini:hover h3 a{color:var(--red)}
.vdn-ex{font-size:13.5px;line-height:1.6;color:var(--mute);margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vdn-meta{margin-top:auto;font-size:12.5px;color:#8a95a1}
.vdn-pager{text-align:center;margin:26px 0 8px}
.vdn-empty{padding:30px;text-align:center;color:var(--mute)}
.vdn-desc{margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}

/* ===== Thanh bên ===== */
.vdn-side{padding-top:2px}
.vdn-box{border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:16px;background:#fff}
.vdn-box h4{font-size:15px;font-weight:800;margin:0 0 10px}
.vdn-cta{background:linear-gradient(135deg,#17202b,#2b3a4d);color:#fff;border:0}
.vdn-cta b{display:block;font-size:16.5px;margin-bottom:4px}
.vdn-cta p{font-size:13px;opacity:.88;margin:0 0 12px}
.vdn-btn{display:block;text-align:center;background:var(--red);color:#fff!important;font-weight:700;font-size:14.5px;padding:11px;border-radius:11px;text-decoration:none!important;margin-bottom:8px}
.vdn-btn:hover{background:var(--red-d)}
.vdn-btn-zalo{background:#0068ff}.vdn-btn-zalo:hover{background:#0052cc}
.vdn-pop{display:flex;gap:10px;padding:9px 0;border-top:1px solid #f0f2f5;text-decoration:none;font-size:13.5px;font-weight:600;line-height:1.4}
.vdn-pop:first-of-type{border-top:0}
.vdn-pop small{display:block;font-weight:400;font-size:12px;color:#8a95a1;margin-top:2px}
.vdn-pop-n{flex:0 0 24px;height:24px;border-radius:7px;background:var(--soft);color:var(--mute);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.vdn-pop:nth-of-type(-n+3) .vdn-pop-n{background:var(--red);color:#fff}

/* ===== Trang chi tiết ===== */
.vdp-head{margin:4px 0 22px}
.vdp-cat{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--red)!important;background:#fdecea;border-radius:99px;padding:4px 13px;text-decoration:none;margin-bottom:10px}
.vdp-head h1{font-size:32px;font-weight:800;line-height:1.28;margin:4px 0 12px}
.vdp-meta{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;font-size:13.5px;color:var(--mute)}
.vdp-meta span{display:inline-flex;align-items:center;gap:6px}
.vdp-meta-call{margin-left:auto;font-weight:700;color:var(--red)!important;text-decoration:none}

/* khung bố cục: mẫu Dịch vụ = 1 cột giữa trang, mẫu Tin tức = nội dung + cột phải */
.vdp-main{min-width:0}
.vdp-service .vdp-head,.vdp-service .vdp-main{max-width:940px;margin-left:auto;margin-right:auto}
.vdp-news .vdp-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start}

/* cột phải (chỉ mẫu Tin tức, chỉ hiện trên máy tính) */
.vdp-side{min-width:0}
.vdp-sticky{position:sticky;top:84px}
.vdp-side .vdn-box{margin-bottom:16px}
.vdp-ad{margin:0 0 16px;padding:10px;border:1px dashed #d5dbe2;border-radius:14px;background:#fafbfc;text-align:center;overflow:hidden}
.vdp-ad-l{display:block;font-size:10.5px;letter-spacing:.7px;text-transform:uppercase;color:#9aa3ad;margin-bottom:6px}
.vdp-ad img,.vdp-ad iframe{max-width:100%}
.vdp-ad img{height:auto;border-radius:8px}
.vdp-toc ol{margin:0;padding:0;list-style:none;max-height:44vh;overflow:auto}
.vdp-toc li{margin:0}
.vdp-toc a{display:block;padding:6px 0 6px 12px;border-left:2px solid var(--line);font-size:13.5px;line-height:1.4;color:var(--mute);text-decoration:none}
.vdp-toc a:hover{color:var(--red)}
.vdp-toc a.on{color:var(--red);border-left-color:var(--red);font-weight:700}
.vdp-toc li.l3 a{padding-left:24px;font-size:13px}

/* ảnh đại diện + mục lục đầu bài */
.vdp-hero{margin:0 0 22px}
.vdp-hero img{display:block;width:100%;height:auto;max-height:430px;object-fit:cover;border-radius:16px}
.vdp-toc-inline{border:1px solid var(--line);border-radius:14px;background:#f8fafc;margin:0 0 28px}
.vdp-toc-inline summary{cursor:pointer;font-weight:800;font-size:16px;padding:14px 46px 14px 18px;list-style:none;position:relative}
.vdp-toc-inline summary::-webkit-details-marker{display:none}
.vdp-toc-inline summary:after{content:"–";position:absolute;right:18px;top:9px;font-size:22px;font-weight:400;color:var(--red)}
.vdp-toc-inline:not([open]) summary:after{content:"+"}
.vdp-toc-inline ol{list-style:none;margin:0;padding:0 18px 12px;counter-reset:vdt;columns:1}
.vdp-toc-inline li{counter-increment:vdt;margin:0;break-inside:avoid}
.vdp-toc-inline li a{display:flex;gap:10px;padding:6px 0;color:var(--ink);font-size:14.5px;line-height:1.45;text-decoration:none}
.vdp-toc-inline li a:before{content:counter(vdt,decimal-leading-zero) ".";color:var(--red);font-weight:800;min-width:26px}
.vdp-toc-inline li a:hover{color:var(--red)}

/* nội dung bài viết */
.vdp-body{font-size:16.5px;line-height:1.78;color:#26323f;word-wrap:break-word;overflow-wrap:anywhere}
.vdp-body>*:first-child{margin-top:0}
.vdp-body>p:first-child{font-size:18px;line-height:1.7;color:#334152}
.vdp-body p{margin:0 0 16px}
.vdp-body h2{font-size:25px;font-weight:800;line-height:1.35;margin:40px 0 14px;padding-bottom:10px;border-bottom:2px solid var(--soft);color:var(--ink);scroll-margin-top:90px}
.vdp-body h2:before{content:"";display:inline-block;width:6px;height:22px;background:var(--red);border-radius:3px;margin-right:10px;vertical-align:-3px}
.vdp-body h3{font-size:20px;font-weight:700;line-height:1.4;margin:28px 0 10px;color:var(--ink);scroll-margin-top:90px}
.vdp-body h4{font-size:17px;font-weight:700;margin:22px 0 8px}
.vdp-body a{color:#0b63ce;text-decoration:underline;text-underline-offset:2px}
.vdp-body ul,.vdp-body ol{margin:0 0 18px;padding-left:22px}
.vdp-body li{margin-bottom:7px}
.vdp-body>ul{list-style:none;padding-left:0}
.vdp-body>ul>li{position:relative;padding-left:22px}
.vdp-body>ul>li:before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--red)}
.vdp-body img{display:block;max-width:100%;height:auto;margin:16px auto;border-radius:12px}
.vdp-body p>img{margin-top:6px}
.vdp-body img+em,.vdp-body p>em:only-child{display:block;text-align:center;font-size:13.5px;color:var(--mute);margin:-6px 0 14px}
.vdp-body figure{margin:18px 0}.vdp-body figcaption{text-align:center;color:var(--mute);font-size:13.5px}
.vdp-body blockquote{margin:20px 0;padding:14px 18px;border-left:4px solid var(--red);background:var(--soft);border-radius:0 12px 12px 0;color:#3a4654}
.vdp-body blockquote p:last-child{margin-bottom:0}
.vdp-body table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px;display:block;overflow-x:auto}
.vdp-body th,.vdp-body td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.vdp-body th{background:var(--soft)}
.vdp-body iframe,.vdp-body video{max-width:100%;border-radius:12px}
.vdp-body .vdsc-box img{margin:0 auto;border-radius:8px}

/* chia sẻ, thẻ, bài liên quan */
.vdp-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:30px 0 8px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--mute)}
.vdp-share a,.vdp-share button{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--ink)!important;font:inherit;font-size:13.5px;font-weight:600;text-decoration:none!important;cursor:pointer}
.vdp-share a:hover,.vdp-share button:hover{border-color:var(--red);color:var(--red)!important}
.vdp-tags{margin:14px 0 8px;font-size:13.5px;color:var(--mute)}
.vdp-tags a{display:inline-block;margin:0 6px 6px 0;padding:4px 12px;background:var(--soft);border-radius:99px;text-decoration:none}
.vdp-tags a:hover{background:var(--red);color:#fff}
.vdp-related{margin-top:36px}
.vdp-related>h3{font-size:21px;font-weight:800;margin:0 0 16px}

/* thanh gọi cố định trên điện thoại */
.vdp-callbar{display:none}

/* ===== Responsive ===== */
@media(max-width:991px){
  .vdn-feat{grid-template-columns:1fr}
  .vdn-grid-3{grid-template-columns:repeat(2,1fr)}
  .vdn-side{display:none}
  .vdp-news .vdp-grid{display:block}
  .vdp-side{display:none}
}
@media(max-width:640px){
  .vdn-head h1,.vdp-head h1{font-size:24px}
  .vdn-grid,.vdn-grid-3{grid-template-columns:1fr}
  .vdn-feat-main .vdn-img img{height:210px}
  .vdp-body{font-size:16px}
  .vdp-body>p:first-child{font-size:17px}
  .vdp-body h2{font-size:21px}
  .vdp-meta-call{margin-left:0}
  .vdp-callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:900;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(23,32,43,.10)}
  .vdp-callbar a{flex:1;text-align:center;padding:12px;border-radius:11px;font-weight:700;font-size:15px;color:#fff!important;text-decoration:none}
  .vdp-cb-call{background:var(--red)}.vdp-cb-zalo{background:#0068ff}
  body{padding-bottom:64px}
}
@media(min-width:1200px){
  .vdp-toc-inline ol{columns:2;column-gap:28px}
}