/* DBMC — trang con v1 (gioi-thieu · linh-vuc · tdp-media · doi-tac · lien-he)
   Load AFTER dbmc-rich.css. Mọi selector nằm dưới body.sub → không ảnh hưởng trang chủ. */

/* ── breadcrumb nối liền hero tối ── */
.sub .crumb{background:#0f1c44;border-bottom:1px solid rgba(0,174,223,.14)}
.sub .crumb .container{color:#9fb2d0}
.sub .crumb a{color:#b9c8e2;border-radius:6px;transition:color .2s}
.sub .crumb a:hover{color:#fff}
.sub .crumb .sep{color:#5d6f96}
.sub .crumb b{color:#fff}
.sub .crumb .oc{background:transparent;border-color:rgba(0,174,223,.3);color:#8fc9e6}

/* ── page hero ── */
.sub .phero{padding:88px 0 96px;background:radial-gradient(55% 70% at 88% 0%,rgba(0,174,223,.20),transparent 62%),radial-gradient(45% 60% at 0% 100%,rgba(244,121,32,.10),transparent 60%),linear-gradient(160deg,#13234F 0%,#1C3687 100%)}
.sub .phero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,174,223,.5),transparent)}
.sub .phero .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;margin-bottom:16px}
.sub .phero .eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor}
.sub .phero h1{font-size:clamp(2.1rem,4.6vw,3.35rem);line-height:1.08;letter-spacing:-.022em;max-width:820px;text-wrap:balance}
.sub .phero p{margin-top:18px;max-width:680px;font-size:1.12rem;text-wrap:pretty}
.sub .ph-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.sub .ph-grid h1{font-size:clamp(2rem,3.6vw,3.05rem)}
.sub .ph-panel{margin:0;position:relative;overflow:hidden;display:grid;place-items:center;min-height:280px;padding:44px;border-radius:18px;border:1px solid rgba(0,174,223,.35);background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:0 24px 60px rgba(4,12,40,.45)}
.sub .ph-panel .pat{position:absolute;inset:0;background:url(/assets/dbmc-pattern-darc-navy.png) center/cover;opacity:.2;pointer-events:none}
.sub .ph-panel img{position:relative;width:100%;max-width:440px;height:auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.3))}
@media(max-width:960px){.sub .ph-grid{grid-template-columns:1fr;gap:36px}.sub .ph-panel{min-height:200px;padding:32px}}
@media(max-width:560px){.sub .phero{padding:64px 0 72px}}

/* ── nhịp section + tiêu đề ── */
.sub .section--cta{padding-top:0}
.sub .h2,.sub .band h3,.sub .feat-card h3{text-wrap:balance}
.sub .lead{text-wrap:pretty}

/* ── thẻ & icon: viền mảnh, bóng ám navy, hover/focus nhất quán ── */
.sub .card,.sub .feat-card,.sub .cat,.sub .fact,.sub .value,.sub .tline-item{border-color:#E1E6F1}
.sub .cat{box-shadow:0 1px 2px rgba(19,35,79,.04),0 10px 28px rgba(19,35,79,.06);transition:transform .22s,box-shadow .22s,border-color .22s}
.sub .feat-card:hover,.sub .cat:hover,.sub .card:hover{transform:translateY(-4px);border-color:rgba(0,174,223,.45);box-shadow:0 20px 44px rgba(28,54,135,.14)}
.sub .cat:hover .ic-badge{transform:translateY(-2px) rotate(-4deg)}
.sub .ic-badge svg{fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sub .feat-card .checks{grid-template-columns:1fr;margin-top:18px}
.sub .feat.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.sub .feat.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.sub .feat.cols-4{grid-template-columns:1fr}}
.sub a:focus-visible,.sub .btn:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

/* giới thiệu: tầm nhìn/sứ mệnh + 6 giá trị dạng thẻ */
.sub #about .card{padding:32px;border-top:3px solid var(--orange)}
.sub .values{gap:16px}
.sub .value{background:#fff;border:1px solid #E1E6F1;border-left:3px solid var(--orange);border-radius:12px;padding:18px 20px;box-shadow:0 1px 2px rgba(19,35,79,.04),0 8px 22px rgba(19,35,79,.05);transition:transform .22s,border-color .22s}
.sub .value:hover{transform:translateY(-2px);border-color:rgba(0,174,223,.45);border-left-color:var(--orange)}
.sub #leaders .lead{margin-top:28px}
.sub #legal{padding:0}

/* số liệu: không tràn trên mobile */
@media(max-width:560px){.sub .fact{padding:16px 14px}.sub .fact b{font-size:1.28rem;overflow-wrap:anywhere}}

/* lộ trình TDP: 3 cột ngang trên desktop */
.sub .tline-item .tm,.sub .tline-item .tt{display:block}
@media(min-width:861px){
  .sub .tline{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;border-left:0;padding-left:0;border-top:2px solid var(--rule);padding-top:30px}
  .sub .tline-item{background:#fff;border:1px solid #E1E6F1;border-radius:16px;padding:24px 22px;box-shadow:0 1px 2px rgba(19,35,79,.04),0 10px 28px rgba(19,35,79,.06)}
  .sub .tline-item::before{left:22px;top:-38px;border-color:var(--surface)}
}

/* đối tác: lý do hợp tác dạng thẻ */
.sub-doi-tac .checks{margin-top:36px;gap:14px 18px}
.sub-doi-tac .checks li{background:var(--surface);border:1px solid #E1E6F1;border-radius:14px;padding:18px 20px 18px 54px;transition:border-color .2s,transform .2s}
.sub-doi-tac .checks li:hover{border-color:rgba(0,174,223,.45);transform:translateY(-2px)}
.sub-doi-tac .checks li::before{left:20px;top:21px}

/* ── CTA band ── */
.sub .band{margin-top:0;padding:48px 52px;background:radial-gradient(60% 90% at 100% 0%,rgba(0,174,223,.26),transparent 60%),linear-gradient(120deg,#1C3687,#13234F);box-shadow:0 30px 60px rgba(19,35,79,.22)}
.sub .band>div{position:relative}
.sub .band .pat{position:absolute}
.sub .band-cta{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:560px){.sub .band{padding:32px 24px}.sub .band h3{font-size:1.3rem}}

/* ── liên hệ ── */
.sub .lh-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.sub .lh-main .ct-grid{margin-top:0;grid-template-columns:repeat(2,1fr)}
.sub .ct-item{display:flex;flex-direction:column;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.sub .ct-ic{width:26px;height:26px;margin-bottom:12px;fill:none;stroke:var(--orange);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sub .ct-item b{overflow-wrap:anywhere}
.sub .eco{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px}
.sub .section--dark .eco a{background:rgba(255,255,255,.06);border-color:rgba(0,174,223,.3);color:#fff}
.sub .section--dark .eco a:hover{background:rgba(0,174,223,.14);border-color:var(--cyan)}
@media(max-width:960px){.sub .lh-grid{grid-template-columns:1fr;gap:36px}}
@media(max-width:480px){.sub .lh-main .ct-grid{grid-template-columns:1fr}}

/* chống tràn ngang với từ dài (ru) trên màn hẹp */
.sub .catalog,.sub .values,.sub .facts{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
.sub .values{--cols:3}
@media(max-width:960px){.sub .catalog{--cols:2}}
@media(max-width:860px){.sub .facts{--cols:2}}
@media(max-width:760px){.sub .values{--cols:2}}
.sub .cat b,.sub .cat span,.sub .value b,.sub .fact span,.sub .h2,.sub .phero h1{overflow-wrap:break-word;hyphens:auto}