/* DH Software – giao diện website công khai thiết kế lại (03/10/2026).
   Dùng token màu/phông của dh_site.css (--dh-c-*). Tiền tố: wb- (khung chung), tl- (công cụ), dl- (tải phần mềm),
   pr- (bảng giá), ab- (hồ sơ năng lực), ps- (bài viết), jb- (tuyển dụng).
   Trang mới tắt bộ CSS cũ (block legacy_css) nên có phần nền tảng tối thiểu ở đầu file. */

:root{--wb-radius:16px;--wb-radius-lg:22px;--wb-shadow:0 18px 44px -24px rgba(10,21,41,.28);--wb-mono:ui-monospace,'SFMono-Regular','Cascadia Mono',Consolas,monospace}

/* ---------- Nền tảng (độ ưu tiên 0, mọi CSS khác ghi đè được) ---------- */
:where(.ds-public){margin:0;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(.ds-public) :where(h1,h2,h3,h4,p,ul,ol,figure){margin-top:0}
:where(.ds-public) :where(img,svg,video,iframe){max-width:100%}
:where(.ds-public) :where(img){height:auto}
:where(.ds-public) :where(a){color:var(--dh-c-blue-d)}
:where(.ds-public) :where(button,input,select,textarea){font:inherit}
:where(.ds-public) :where(code){font-family:var(--wb-mono)}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
html.wb-nav-open,html.wb-nav-open body{overflow:hidden}

/* ---------- Đầu trang ---------- */
/* Quy tắc cốt lõi của menu thả xuống nhắc lại ở đây: nếu trình duyệt còn giữ dh_site.css cũ thì menu vẫn ẩn, không bung ra */
.ds-hdr{position:sticky;top:0;z-index:50;background:#fff}
.ds-hdr-in{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.ds-nav{position:relative;display:flex;align-items:center;gap:2px}
.ds-nav-group{position:relative;display:flex;align-items:center;height:68px}
.ds-nav-trigger{display:inline-flex;align-items:center;gap:6px;border:0;background:none;cursor:pointer;font-family:inherit}
.ds-nav-menu{position:absolute;top:calc(100% - 6px);left:50%;z-index:60;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,8px);background:#fff;border:1px solid var(--dh-c-line);border-radius:16px;box-shadow:0 20px 50px -24px rgba(10,21,41,.35)}
.ds-nav-group:hover .ds-nav-menu,.ds-nav-group:focus-within .ds-nav-menu,.ds-nav-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.ds-nav-menu-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.ds-nav-menu-links a{display:flex;border-radius:10px;text-decoration:none}
.ds-nav-menu-links a:hover{background:var(--dh-c-soft)}
.ds-nav-menu-links small{color:var(--dh-c-muted);font-size:12px;line-height:1.45}
.ds-burger{display:none}
@media (max-width:1080px){.ds-nav,.ds-login{display:none}.ds-burger{display:inline-flex}}
.ds-nav-trigger,.ds-nav-contact{position:relative;padding:9px 12px;border-radius:10px;font-size:15px;font-weight:600;color:var(--dh-c-ink);transition:background .15s,color .15s}
.ds-nav-trigger:hover,.ds-nav-contact:hover{background:var(--dh-c-soft);color:var(--dh-c-blue-d)}
.ds-nav-trigger svg{transition:transform .15s;opacity:.7}
.ds-nav-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.ds-nav-group.is-active .ds-nav-trigger,.ds-nav-contact.is-active{color:var(--dh-c-blue-d)}
.ds-nav-group.is-active .ds-nav-trigger:after,.ds-nav-contact.is-active:after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--dh-c-blue)}
.ds-nav-contact{color:var(--dh-c-ink)!important}
.ds-nav-contact.is-active,.ds-nav-contact:hover{color:var(--dh-c-blue-d)!important}
.ds-nav-menu{width:min(560px,calc(100vw - 32px));padding:14px}
.wb-nav-desc{margin:2px 8px 10px;color:var(--dh-c-muted);font-size:13px;line-height:1.5}
.ds-nav-menu-links{padding-top:0}
.ds-nav-menu-links a{flex-direction:row;align-items:flex-start;gap:12px;padding:10px;color:var(--dh-c-ink)}
.ds-nav-menu-links a>span:last-child{display:flex;flex-direction:column;gap:2px}
.ds-nav-menu-links a[aria-current="page"]{background:var(--dh-c-tint)}
.wb-nav-ico{flex:none;width:36px;height:36px;border-radius:10px;background:var(--dh-c-tint);color:var(--dh-c-blue);display:grid;place-items:center}
.ds-hdr-act{gap:12px}
.ds-lang{border-radius:8px}
.ds-lang a{height:32px;min-width:34px;font-size:12px}
.wb-hdr-cta{height:42px;padding:0 18px;font-size:14px}

/* Menu điện thoại: phủ toàn màn hình dưới thanh đầu trang */
/* Đầu trang có backdrop-filter -> phần tử fixed bên trong bị "nhốt" theo khung đầu trang; dùng absolute + chiều cao màn hình */
.ds-mnav{position:absolute;top:100%;left:0;right:0;height:calc(100vh - 68px);height:calc(100dvh - 68px);z-index:70;background:#fff;overflow-y:auto;border-top:1px solid var(--dh-c-line);padding:0;display:none;overscroll-behavior:contain}
.ds-mnav.open{display:block}
.wb-mnav-in{padding-top:8px;padding-bottom:32px}
.ds-mnav summary{padding:16px 0;font-size:17px}
.wb-mnav-links{display:flex;flex-direction:column;padding:4px 0 12px}
.ds-mnav .wb-mnav-links a{display:flex;align-items:center;gap:12px;padding:10px 4px;border:0;background:none;font-size:15px;font-weight:600;color:var(--dh-c-ink)}
.ds-mnav .wb-mnav-links a[aria-current="page"]{color:var(--dh-c-blue-d)}
.ds-mnav .wb-mnav-top{display:block;padding:16px 0;font-size:17px;font-weight:600;color:var(--dh-c-ink);border-bottom:1px solid #EEF2F7}
.wb-mnav-act{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.ds-mnav .wb-mnav-act a{justify-content:center;padding:0}
.ds-mnav .wb-mnav-act .ds-btn{color:#fff;border:0}
.ds-mnav .wb-mnav-act .ds-btn-out{border:1.5px solid var(--dh-c-blue)}
html.wb-nav-open .ds-mbar,html.wb-nav-open .dh-chat{display:none}
.ds-mbar .ds-btn-out{justify-content:center}

/* ---------- Chân trang ---------- */
.ds-ftr{margin-top:0}
.wb-ftr-grid{grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:32px}
.ds-ftr address strong{color:var(--dh-c-ink)}

/* ---------- Kiểu chữ & khối chung ---------- */
.wb-eyebrow{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dh-c-blue-d)}
.wb-h1{margin:0 0 14px;max-width:960px;font-size:clamp(30px,3.5vw,52px);line-height:1.14;font-weight:700;letter-spacing:-.02em;color:var(--dh-c-ink);text-wrap:balance}
.wb-h2{margin:0;font-size:clamp(24px,2.3vw,36px);line-height:1.2;font-weight:700;letter-spacing:-.015em;color:var(--dh-c-ink);text-wrap:balance}
.wb-h3{margin:0 0 16px;font-size:20px;font-weight:700;color:var(--dh-c-ink)}
.wb-lead{margin:0;max-width:760px;font-size:clamp(16px,1.25vw,19px);line-height:1.65;color:var(--dh-c-body)}
.wb-sub{margin:10px 0 0;max-width:680px;font-size:16px;line-height:1.65;color:var(--dh-c-body)}
.wb-center,.wb-center-head{text-align:center;margin-left:auto;margin-right:auto}
.wb-center-head{max-width:760px;margin-bottom:36px}
.wb-center-head .wb-sub,.wb-sub.wb-center{margin-left:auto;margin-right:auto}
.wb-narrow{max-width:880px}
.wb-hero{background:linear-gradient(180deg,#F2F7FD 0%,#FFFFFF 100%);border-bottom:1px solid var(--dh-c-line);padding:clamp(24px,3.5vw,48px) 0 clamp(32px,4vw,56px)}
.wb-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px;font-size:13px;color:var(--dh-c-muted)}
.wb-crumb a{color:var(--dh-c-body);text-decoration:none}
.wb-crumb a:hover{color:var(--dh-c-blue-d);text-decoration:underline}
.wb-crumb [aria-current]{color:var(--dh-c-ink);font-weight:600;max-width:52ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-hero-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.wb-sec{padding:clamp(48px,6vw,88px) 0}
.wb-sec-tight{padding:clamp(32px,4vw,56px) 0}
.wb-alt{background:var(--dh-c-soft);border-top:1px solid var(--dh-c-line);border-bottom:1px solid var(--dh-c-line)}
.wb-sec-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px 32px;margin-bottom:28px}
.wb-sec-head>div{max-width:760px}
.wb-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--dh-c-blue-d);font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap}
.wb-more:hover{text-decoration:underline;text-underline-offset:4px}
.wb-block{width:100%;justify-content:center}
.ds-btn-out.ds-btn-lg{height:56px;padding:0 24px;font-size:16px}
.wb-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
.wb-split .wb-sec-head{margin-bottom:0}
.wb-grid2,.wb-grid3,.wb-grid4{display:grid;gap:clamp(14px,1.6vw,24px)}
.wb-grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.wb-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wb-grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.wb-ico{flex:none;width:44px;height:44px;border-radius:12px;background:var(--dh-c-tint);color:var(--dh-c-blue);display:grid;place-items:center}
.wb-ico-lg{width:60px;height:60px;border-radius:16px}
.wb-card{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--dh-c-line);border-radius:var(--wb-radius);background:#fff;color:var(--dh-c-ink);text-decoration:none}
.wb-card h3{margin:6px 0 0;font-size:18px;line-height:1.35;color:var(--dh-c-ink)}
.wb-card p{margin:0;font-size:15px;line-height:1.6;color:var(--dh-c-body)}
.wb-card-link{transition:border-color .15s,box-shadow .15s,transform .15s}
.wb-card-link:hover{border-color:#9ED7FF;box-shadow:var(--wb-shadow);transform:translateY(-2px)}
.wb-card-cta{margin-top:auto;padding-top:6px;color:var(--dh-c-blue-d);font-size:14px;font-weight:700}
.wb-card-brand{background:linear-gradient(160deg,#EAF3FE,#FFFFFF 70%)}
.wb-pill{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:7px 14px;border:1px solid #CFE3F8;border-radius:999px;background:#fff;color:var(--dh-c-blue-d);font-size:12px;font-weight:700;letter-spacing:.08em}
.wb-checks{display:flex;flex-wrap:wrap;gap:10px 22px;margin:20px 0 0;padding:0;list-style:none;font-size:14px;color:var(--dh-c-body)}
.wb-checks li{display:flex;align-items:center;gap:8px}
.wb-checks svg,.wb-ticks svg{color:#15803D;flex:none}
.wb-ticks{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;font-size:14px;color:var(--dh-c-body)}
.wb-ticks li{display:flex;align-items:flex-start;gap:8px}
.wb-ticks svg{margin-top:3px}
.wb-badge{display:inline-block;padding:5px 12px;border-radius:999px;background:var(--dh-c-blue);color:#fff;font-size:12px;font-weight:700;white-space:nowrap}
.wb-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.wb-chips li{padding:10px 16px;border:1px solid var(--dh-c-line2);border-radius:999px;background:#fff;font-size:14px;font-weight:600;color:var(--dh-c-ink)}
.wb-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin:0;padding:0;list-style:none}
.wb-steps4{grid-template-columns:repeat(4,minmax(0,1fr))}
.wb-steps5{grid-template-columns:repeat(5,minmax(0,1fr))}
.wb-steps li{display:flex;flex-direction:column;gap:8px;padding:24px;border:1px solid var(--dh-c-line);border-radius:var(--wb-radius);background:#fff}
.wb-steps h3{margin:6px 0 0;font-size:17px;color:var(--dh-c-ink)}
.wb-steps p{margin:0;font-size:15px;line-height:1.6;color:var(--dh-c-body)}
.wb-step-n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--dh-c-blue);color:#fff;font-weight:700;font-size:15px}
.wb-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;counter-reset:wb}
.wb-list li{display:grid;gap:4px;padding:16px 0 16px 48px;border-bottom:1px solid var(--dh-c-line);position:relative;counter-increment:wb}
.wb-list li:before{content:counter(wb);position:absolute;left:0;top:16px;width:32px;height:32px;border-radius:50%;background:#fff;border:1.5px solid var(--dh-c-blue);color:var(--dh-c-blue-d);display:grid;place-items:center;font-weight:700;font-size:14px}
.wb-list strong{color:var(--dh-c-ink)}
.wb-list span{color:var(--dh-c-body);font-size:15px;line-height:1.6}
.wb-faq{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.wb-faq details{border:1px solid var(--dh-c-line);border-radius:14px;background:#fff;transition:border-color .2s ease,box-shadow .2s ease}
.wb-faq details[open]{border-color:#BBDCFB;box-shadow:0 4px 16px -6px rgba(0,119,214,.10);background:#FAFDFE}
.wb-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;font-size:16px;font-weight:600;color:var(--dh-c-ink);cursor:pointer;list-style:none}
.wb-faq summary::-webkit-details-marker{display:none}
.wb-faq summary:after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;background:var(--dh-c-tint);color:var(--dh-c-blue-d);display:grid;place-items:center;font-size:18px;font-weight:700;transition:transform .2s ease}
.wb-faq details[open] summary:after{content:"−";transform:rotate(180deg)}
.wb-faq p{margin:0;padding:0 20px 20px;font-size:15px;line-height:1.7;color:var(--dh-c-body)}
.wb-faq details[open] p{animation:dhTabFadeIn .25s cubic-bezier(0.16,1,0.3,1)}
.wb-prose{font-size:17px;line-height:1.75;color:var(--dh-c-body)}
.wb-prose p{margin:0 0 1.1em}
.wb-prose h2,.wb-prose h3{margin:1.6em 0 .6em;color:var(--dh-c-ink);line-height:1.3}
.wb-prose>h2:first-child{margin-top:0}
.wb-prose h2{font-size:24px}.wb-prose h3{font-size:20px}
.wb-prose ul,.wb-prose ol{padding-left:1.3em;margin:0 0 1.1em}
.wb-prose li{margin-bottom:.4em}
.wb-prose img{border-radius:12px}
.wb-prose a{color:var(--dh-c-blue-d)}
.wb-band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:center;margin-top:clamp(28px,4vw,48px);padding:clamp(28px,4vw,48px);border-radius:var(--wb-radius-lg);background:var(--dh-c-tint)}
.wb-band .wb-sub{margin-top:8px}
.wb-band-act{display:flex;flex-wrap:wrap;gap:12px}
.wb-band-blue,.wb-final{background:linear-gradient(135deg,#0077D6 0%,#005FAD 100%);color:#fff}
.wb-band-blue{margin-top:0}
.wb-band-blue .wb-eyebrow,.wb-band-blue .wb-sub{color:#DCEBFB}
.wb-band-blue .wb-h2{color:#fff}
.ds-btn-inv svg{flex:none}
.wb-final{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px 40px;padding:clamp(28px,4vw,56px) clamp(24px,4vw,64px);border-radius:var(--wb-radius-lg)}
.wb-final h2{margin:0;font-size:clamp(24px,2.4vw,34px);color:#fff}
.wb-final p{margin:10px 0 0;font-size:17px;color:#DCEBFB}
.wb-final-act{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.wb-final-tel,.wb-final-link{display:flex;flex-direction:column;color:#fff;text-decoration:none;font-weight:700}
.wb-final-tel span{font-size:13px;font-weight:500;color:#DCEBFB}
.wb-final-tel strong{font-size:20px}
.wb-note{display:flex;align-items:flex-start;gap:14px;max-width:880px;margin:0 auto;padding:18px 20px;border:1px solid var(--dh-c-line);border-radius:14px;background:var(--dh-c-soft);color:var(--dh-c-body)}
.wb-note>svg{flex:none;margin-top:2px;color:var(--dh-c-blue)}
.wb-note div{display:flex;flex-direction:column;gap:4px;font-size:15px;line-height:1.55}
.wb-note strong{color:var(--dh-c-ink)}
.wb-note.ok{background:var(--dh-c-ok-bg);border-color:#ABEFC6}
.wb-note.ok>svg{color:var(--dh-c-ok)}
.wb-empty,.wb-empty-box{color:var(--dh-c-body)}
.wb-empty-box{display:flex;flex-direction:column;align-items:center;gap:6px;padding:40px 24px;border:1.5px dashed var(--dh-c-line2);border-radius:var(--wb-radius);text-align:center;background:#fff}
.wb-empty-box strong{color:var(--dh-c-ink);font-size:17px}
.wb-disclaimer{margin:24px 0 0;font-size:13px;color:var(--dh-c-muted)}
.wb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wb-seg{display:inline-flex;flex-wrap:wrap;gap:6px;margin-top:22px;padding:5px;border:1px solid var(--dh-c-line);border-radius:14px;background:#fff}
.wb-seg a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:10px;color:var(--dh-c-body);font-size:14px;font-weight:600;text-decoration:none}
.wb-seg a[aria-current="page"]{background:var(--dh-c-ink);color:#fff}
.wb-arrow{flex:none;align-self:center;font-size:22px;color:var(--dh-c-blue);transition:transform .15s}

/* Biểu mẫu (trang mới không có CSS cũ) */
.ds-fld textarea,.ds-fld select{width:100%;border-radius:10px;border:1.5px solid var(--dh-c-line2);padding:12px 14px;font-size:15px;font-weight:400;color:var(--dh-c-ink);background:#fff;box-sizing:border-box}
.ds-fld select{height:50px;padding:0 12px}
.ds-fld textarea{min-height:120px;resize:vertical;line-height:1.55}
.ds-fld textarea:focus,.ds-fld select:focus{outline:3px solid #BBDCFB;border-color:var(--dh-c-blue)}
.wb-form{display:flex;flex-direction:column;gap:14px}

/* Video YouTube (tải khi bấm) */
.wb-yt{position:relative;aspect-ratio:16/9;border-radius:var(--wb-radius);overflow:hidden;background:#0A1529}
.wb-yt img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.wb-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wb-yt-play{position:absolute;inset:0;margin:auto;width:84px;height:60px;border:0;background:none;cursor:pointer;padding:0;transition:transform .15s}
.wb-yt-play:hover{transform:scale(1.08)}
.wb-yt-link{position:absolute;right:12px;bottom:12px;padding:6px 10px;border-radius:8px;background:rgba(10,21,41,.75);color:#fff!important;font-size:12px;font-weight:600;text-decoration:none}
.wb-video-empty{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;aspect-ratio:16/9;padding:20px;border:1.5px dashed var(--dh-c-line2);border-radius:var(--wb-radius);background:var(--dh-c-soft);text-align:center;font-size:14px;color:var(--dh-c-body)}
.wb-video-empty strong{color:var(--dh-c-ink);font-size:16px}

/* ---------- Trang chủ ---------- */
.wb-home-hero{position:relative;overflow:hidden;padding:clamp(32px,5vw,72px) 0 clamp(40px,5vw,72px);background:radial-gradient(1200px 520px at 85% -10%,#DCEEFF 0%,rgba(220,238,255,0) 60%),radial-gradient(900px 480px at -10% 110%,#EEF6FF 0%,rgba(238,246,255,0) 60%),#F8FBFF;border-bottom:1px solid var(--dh-c-line)}
.wb-home-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(28px,4vw,72px);align-items:start}
.wb-home-copy{padding-top:clamp(0px,2vw,28px)}
.wb-home-h1{font-size:clamp(30px,3vw,48px)}
.wb-home-links{margin-top:14px}
.wb-toolbox{background:#fff;border:1px solid #D7E5F5;border-radius:var(--wb-radius-lg);box-shadow:0 36px 70px -36px rgba(0,79,153,.35);padding:10px 10px 18px}
.wb-tabs{display:flex;gap:6px;padding:6px;border-radius:16px;background:var(--dh-c-soft)}
.wb-tabs button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 12px;border:0;border-radius:12px;background:none;color:var(--dh-c-body);font-size:15px;font-weight:700;cursor:pointer;transition:all 0.2s cubic-bezier(0.16,1,0.3,1)}
.wb-tabs button:hover{color:var(--dh-c-ink);background:rgba(255,255,255,0.6)}
.wb-tabs button[aria-selected="true"]{background:#fff;color:var(--dh-c-blue-d);box-shadow:0 4px 14px -6px rgba(10,21,41,.25);transform:translateY(-1px)}
.wb-tabpanel{padding:16px 14px 0;animation:dhTabFadeIn 0.3s cubic-bezier(0.16,1,0.3,1)}
.wb-tabpanel[hidden]{display:none!important}
.wb-tool-full{display:inline-flex;margin-top:12px;color:var(--dh-c-blue-d);font-size:14px;font-weight:700;text-decoration:none}
.wb-tool-full:hover{text-decoration:underline}
.wb-strip{border-bottom:1px solid var(--dh-c-line);background:#fff}
.wb-strip .ds-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;padding-top:18px;padding-bottom:18px}
.wb-strip span{font-size:13px;color:var(--dh-c-muted)}
.wb-strip em{font-style:normal;padding:7px 14px;border-radius:999px;background:var(--dh-c-soft);font-size:13px;font-weight:600;color:var(--dh-c-ink)}
.wb-tool-card{display:flex;align-items:flex-start;gap:20px;padding:28px;border:1px solid var(--dh-c-line);border-radius:var(--wb-radius-lg);background:#fff;color:var(--dh-c-ink);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.wb-tool-card:hover{border-color:#9ED7FF;box-shadow:var(--wb-shadow);transform:translateY(-2px)}
.wb-tool-card:hover .wb-arrow{transform:translateX(4px)}
.wb-tool-card>div{flex:1;min-width:0}
.wb-tool-card h2,.wb-tool-card h3{margin:0 0 6px;font-size:21px;color:var(--dh-c-ink)}
.wb-tool-card p{margin:0;font-size:15px;line-height:1.6;color:var(--dh-c-body)}
.wb-tool-card ul{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.wb-tool-card li{padding:5px 10px;border-radius:8px;background:var(--dh-c-soft);font-size:13px;font-weight:600;color:var(--dh-c-body)}
.wb-tool-card>.ds-btn{align-self:center}
.wb-prod{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--dh-c-line);border-radius:var(--wb-radius);background:#fff;transition:border-color .15s,box-shadow .15s}
.wb-prod:hover{border-color:#9ED7FF;box-shadow:var(--wb-shadow)}
.wb-prod h3{margin:6px 0 0;font-size:19px}
.wb-prod h3 a{color:var(--dh-c-ink);text-decoration:none}
.wb-prod h3 a:hover{color:var(--dh-c-blue-d)}
.wb-prod>p{margin:0;font-size:14.5px;line-height:1.6;color:var(--dh-c-body)}
.wb-prod-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid #EEF2F7}
.wb-prod-foot strong{font-size:15px;color:var(--dh-c-ink)}
.wb-prod-foot .ds-btn-out{height:40px;padding:0 14px;font-size:14px}
.wb-why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px}
.wb-why>div{padding:4px 0 4px 16px;border-left:3px solid var(--dh-c-blue)}
.wb-why strong{display:block;color:var(--dh-c-ink);font-size:16px;margin-bottom:4px}
.wb-why p{margin:0;font-size:14.5px;line-height:1.6;color:var(--dh-c-body)}
.wb-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1120px;margin:0 auto}
.wb-plan{position:relative;display:flex;flex-direction:column;gap:6px;padding:30px 24px 24px;border:1.5px solid var(--dh-c-line);border-radius:20px;background:#fff}
.wb-plan.is-hot{border-color:var(--dh-c-blue);box-shadow:0 24px 48px -28px rgba(0,119,214,.55)}
.wb-plan .wb-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%)}
.wb-plan-name{margin:0;font-size:15px;font-weight:700;color:var(--dh-c-body)}
.wb-plan-price{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px}
.wb-plan-price strong{font-size:clamp(26px,2.4vw,32px);color:var(--dh-c-ink);letter-spacing:-.01em}
.wb-plan-price span{font-size:14px;color:var(--dh-c-muted)}
.wb-plan-hint{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--dh-c-body);flex-grow:1}
.wb-post{display:flex;flex-direction:column;gap:8px;padding:24px;border:1px solid var(--dh-c-line);border-radius:var(--wb-radius);background:#fff;color:var(--dh-c-ink);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.wb-post:hover{border-color:#9ED7FF;box-shadow:var(--wb-shadow)}
.wb-post small,.ps-lead small{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dh-c-blue-d)}
.wb-post h3{margin:0;font-size:18px;line-height:1.4;color:var(--dh-c-ink)}
.wb-post p{margin:0;font-size:15px;line-height:1.6;color:var(--dh-c-body);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wb-post time,.ps-lead time{margin-top:auto;font-size:13px;color:var(--dh-c-muted)}

/* ---------- Công cụ ---------- */
.tl-hero{padding-bottom:clamp(32px,4vw,56px)}
.tl-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);grid-template-areas:"copy copy" "card side";gap:24px 28px;align-items:start}
.tl-hero-copy{grid-area:copy}
.tl-hero-copy .wb-h1{font-size:clamp(28px,3vw,46px)}
.tl-card{grid-area:card;padding:22px;border:1px solid #D7E5F5;border-radius:var(--wb-radius-lg);background:#fff;box-shadow:0 30px 60px -36px rgba(0,79,153,.35)}
.tl-side{grid-area:side;padding:22px;border:1px solid var(--dh-c-line);border-radius:var(--wb-radius-lg);background:#fff}
.tl-side-title{margin:0 0 6px;font-size:16px;color:var(--dh-c-ink)}
.tl-side-note{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--dh-c-muted)}
.tl-formats{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.tl-formats li{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-bottom:1px solid #EEF2F7;font-size:14px;color:var(--dh-c-ink)}
.tl-formats li:last-child{border-bottom:0}
.tl-formats code,.tl-side-note code{padding:6px 8px;border-radius:8px;background:var(--dh-c-soft);border:1px solid var(--dh-c-line);font-size:12.5px;color:var(--dh-c-body);word-break:break-all}
.tl-side-note code{padding:1px 6px}
.tl-tool{display:flex;flex-direction:column;gap:12px}
.tl-label{font-size:14px;font-weight:700;color:var(--dh-c-ink)}
.tl-input{width:100%;min-height:96px;padding:14px;border:1.5px solid var(--dh-c-line2);border-radius:14px;background:#FBFDFF;font-family:var(--wb-mono);font-size:14.5px;line-height:1.6;color:var(--dh-c-ink);resize:vertical;box-sizing:border-box}
.tl-input:focus{outline:3px solid #BBDCFB;border-color:var(--dh-c-blue);background:#fff}
.tl-input::placeholder{color:#8696AC}
.tl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tl-go{height:48px;padding:0 22px}
.tl-ghost{height:40px;padding:0 14px;border:1px solid var(--dh-c-line2);border-radius:10px;background:#fff;color:var(--dh-c-ink);font-size:14px;font-weight:600;cursor:pointer}
.tl-ghost:hover{border-color:var(--dh-c-blue);color:var(--dh-c-blue-d)}
.tl-timer{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:10px 12px;border-radius:12px;background:var(--dh-c-soft);font-size:14px;color:var(--dh-c-body)}
.tl-timer[hidden]{display:none}
.tl-ring{position:relative;width:40px;height:40px;flex:none}
.tl-ring svg{width:40px;height:40px;transform:rotate(-90deg)}
.tl-ring circle{fill:none;stroke:var(--dh-c-line);stroke-width:3.5}
.tl-ring .tl-ring-val{stroke:var(--dh-c-blue);stroke-dasharray:97.4;stroke-linecap:round;transition:stroke-dashoffset .9s linear,stroke .2s}
.tl-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:var(--dh-c-ink)}
.is-ending .tl-ring .tl-ring-val{stroke:var(--dh-c-err)}
.tl-copyall{margin-left:auto}
.tl-results{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.tl-results:empty{display:none}
.tl-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px 10px 16px;border:1px solid var(--dh-c-line);border-radius:14px;background:#fff}
.tl-acc{flex:1 1 140px;min-width:0;font-size:13px;color:var(--dh-c-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-code{padding:4px 8px;border:0;border-radius:8px;background:none;font-family:var(--wb-mono);font-size:26px;font-weight:700;letter-spacing:.06em;color:var(--dh-c-blue-d);cursor:pointer}
.tl-code:hover{background:var(--dh-c-tint)}
.tl-code.is-new{animation:tl-flash .6s ease-out}
@keyframes tl-flash{from{background:#D4ECFF}to{background:transparent}}
.tl-uid{font-size:19px;letter-spacing:.02em}
.tl-kind{padding:4px 10px;border-radius:999px;background:var(--dh-c-ok-bg);color:var(--dh-c-ok);font-size:12px;font-weight:700}
.tl-copy{height:36px;padding:0 14px;border:0;border-radius:10px;background:var(--dh-c-blue);color:#fff;font-size:13px;font-weight:700;cursor:pointer}
.tl-copy:hover{background:var(--dh-c-blue-d)}
.tl-copy.is-done{background:var(--dh-c-ok)}
.tl-row.is-error{background:#FFFBFA;border-color:#FECDCA}
.tl-msg{flex-basis:100%;font-size:14px;line-height:1.5;color:var(--dh-c-err)}
.tl-guide{font-weight:700;color:var(--dh-c-blue-d)}
.tl-status{margin:0;font-size:14px;color:var(--dh-c-body)}
.tl-status:empty{display:none}
.tl-safe{display:flex;align-items:center;gap:6px;margin:2px 0 0;font-size:13px;color:var(--dh-c-muted)}
.tl-safe svg{flex:none;color:var(--dh-c-ok)}

/* Nút "Lấy UID DH" */
.tl-bm-box{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:start;padding:clamp(24px,3vw,40px);border:1.5px solid var(--dh-c-blue);border-radius:var(--wb-radius-lg);background:linear-gradient(135deg,#EAF3FE,#FFFFFF 70%)}
.tl-bm-copy code{padding:1px 6px;border-radius:6px;background:#fff;border:1px solid var(--dh-c-line);font-size:14px}
.tl-bm-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}
.tl-bm-btn{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 22px;border-radius:12px;background:var(--dh-c-ink);color:#fff!important;font-weight:700;font-size:16px;text-decoration:none;cursor:grab;box-shadow:0 10px 24px -12px rgba(10,21,41,.6)}
.tl-bm-btn:active{cursor:grabbing}
.tl-bm-copy .tl-status{margin-top:12px}
.tl-bm-steps{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;counter-reset:bm}
.tl-bm-steps li{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 16px 14px 56px;border:1px solid var(--dh-c-line);border-radius:14px;background:#fff;counter-increment:bm;font-size:14.5px;line-height:1.55;color:var(--dh-c-body)}
.tl-bm-steps li:before{content:counter(bm);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--dh-c-blue);color:#fff;font-weight:700;font-size:14px}
.tl-bm-steps strong{color:var(--dh-c-ink)}
.tl-bm-steps kbd{padding:1px 6px;border:1px solid var(--dh-c-line2);border-bottom-width:2px;border-radius:6px;background:#fff;font-size:12px}
@media (max-width:960px){.tl-bm-box{grid-template-columns:minmax(0,1fr)}}

/* ---------- Tải phần mềm ---------- */
.dl-gate{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1040px;margin:28px auto 0}
.dl-opt{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px;border:1.5px solid var(--dh-c-line);border-radius:var(--wb-radius-lg);background:#fff}
.dl-opt.is-primary{border-color:var(--dh-c-blue);box-shadow:0 24px 48px -30px rgba(0,119,214,.55)}
.dl-opt>.wb-badge{position:absolute;top:-13px;left:24px}
.dl-opt h3{display:flex;align-items:center;gap:10px;margin:0;font-size:19px;color:var(--dh-c-ink)}
.dl-opt h3 svg{color:var(--dh-c-blue)}
.dl-opt .wb-ticks{font-size:15px}
.dl-opt .ds-btn{margin-top:auto}
.dl-alt{margin:0;font-size:14px;line-height:1.55;color:var(--dh-c-body)}
.dl-fine{margin:0;font-size:12.5px;line-height:1.55;color:var(--dh-c-muted)}
.dl-list{display:flex;flex-direction:column;gap:20px}
.dl-item{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,3vw,40px);align-items:center;padding:clamp(20px,2.4vw,32px);border:1px solid var(--dh-c-line);border-radius:var(--wb-radius-lg);background:#fff;scroll-margin-top:90px}
.dl-info{display:flex;flex-direction:column;gap:14px}
.dl-info>p{margin:0;font-size:15px;line-height:1.65;color:var(--dh-c-body)}
.dl-head{display:flex;align-items:center;gap:14px}
.dl-head h3{margin:0;font-size:21px}
.dl-head h3 a{color:var(--dh-c-ink);text-decoration:none}
.dl-head h3 a:hover{color:var(--dh-c-blue-d)}
.dl-meta{margin:4px 0 0;font-size:13px;color:var(--dh-c-muted)}
.dl-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}

/* ---------- Bảng giá ---------- */
.pr-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pr-jump a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--dh-c-line2);border-radius:999px;background:#fff;color:var(--dh-c-ink);font-size:14px;font-weight:600;text-decoration:none}
.pr-jump a:hover{border-color:var(--dh-c-blue);color:var(--dh-c-blue-d)}
.pr-groups{display:flex;flex-direction:column;gap:clamp(40px,5vw,64px)}
.pr-group{scroll-margin-top:90px}
.pr-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-bottom:28px}
.pr-head>div{flex:1;min-width:240px}
.pr-head h2{margin:0;font-size:24px;color:var(--dh-c-ink)}
.pr-head p{margin:4px 0 0;font-size:15px;color:var(--dh-c-body)}
.pr-group .wb-plans{max-width:none}
.pr-others{padding-top:32px;border-top:1px solid var(--dh-c-line)}
.pr-incl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:28px 0 0;padding:0;list-style:none}
.pr-incl li{display:flex;flex-direction:column;gap:8px;padding:22px;border:1px solid var(--dh-c-line);border-radius:var(--wb-radius);background:#fff}
.pr-incl strong{color:var(--dh-c-ink)}
.pr-incl span:last-child{font-size:14px;line-height:1.6;color:var(--dh-c-body)}

/* ---------- Hồ sơ năng lực ---------- */
.ab-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:32px 0 0;padding:0;list-style:none}
.ab-facts li{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border:1px solid var(--dh-c-line);border-radius:var(--wb-radius);background:#fff}
.ab-facts strong{font-size:28px;line-height:1.1;color:var(--dh-c-blue-d)}
.ab-facts span{font-size:13.5px;line-height:1.45;color:var(--dh-c-body)}
.ab-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ab-products a{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--dh-c-line);border-radius:14px;background:#fff;color:var(--dh-c-ink);text-decoration:none}
.ab-products a:hover{border-color:#9ED7FF}
.ab-products a>span:nth-child(2){display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ab-products small{font-size:13px;line-height:1.5;color:var(--dh-c-body)}
.ab-state{flex:none;padding:4px 10px;border-radius:999px;font-style:normal;font-size:12px;font-weight:700;background:var(--dh-c-neutral-bg);color:var(--dh-c-neutral)}
.ab-state.live{background:var(--dh-c-ok-bg);color:var(--dh-c-ok)}

/* ---------- Bài viết ---------- */
.ps-lead{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;padding:clamp(24px,3vw,40px);border:1px solid var(--dh-c-line);border-radius:var(--wb-radius-lg);background:linear-gradient(135deg,#F4F9FF,#FFFFFF 60%);color:var(--dh-c-ink);text-decoration:none}
.ps-lead:hover{border-color:#9ED7FF;box-shadow:var(--wb-shadow)}
.ps-lead h2{margin:0;max-width:820px;font-size:clamp(22px,2.2vw,30px);line-height:1.3;color:var(--dh-c-ink)}
.ps-lead p{margin:0;max-width:760px;font-size:16px;line-height:1.65;color:var(--dh-c-body)}
.ps-head{padding-bottom:clamp(24px,3vw,40px)}
.ps-h1{font-size:clamp(28px,3vw,44px)}
.ps-meta{margin:14px 0 0;font-size:14px;color:var(--dh-c-muted)}
.ps-body{padding:clamp(28px,4vw,48px) 0 8px}
.ps-cta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin:8px 0 clamp(40px,5vw,64px);padding:24px;border-radius:var(--wb-radius);background:var(--dh-c-tint)}
.ps-cta div:first-child{display:flex;flex-direction:column;gap:4px}
.ps-cta strong{color:var(--dh-c-ink)}
.ps-cta span{font-size:14px;color:var(--dh-c-body)}
.ps-cta-act{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Tuyển dụng ---------- */
.jb-list{display:flex;flex-direction:column;gap:12px}
.jb-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px 24px;padding:22px 24px;border:1px solid var(--dh-c-line);border-radius:var(--wb-radius);background:#fff;color:var(--dh-c-ink);text-decoration:none}
.jb-item:hover{border-color:#9ED7FF;box-shadow:var(--wb-shadow)}
.jb-item h3{margin:0 0 6px;font-size:18px}
.jb-item p{margin:0;font-size:14.5px;line-height:1.6;color:var(--dh-c-body)}
.jb-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.wb-hero .jb-tags{margin-top:4px}
.jb-tags li{padding:6px 12px;border-radius:999px;background:var(--dh-c-soft);border:1px solid var(--dh-c-line);font-size:13px;font-weight:600;color:var(--dh-c-body)}
.jb-detail{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.jb-apply{position:sticky;top:88px;display:flex;flex-direction:column;gap:12px;padding:28px;border:1px solid var(--dh-c-line);border-radius:var(--wb-radius-lg);background:#fff;box-shadow:var(--wb-shadow)}
.jb-apply h2{margin:0;font-size:20px;color:var(--dh-c-ink)}
.jb-apply>p{margin:0;font-size:14px;color:var(--dh-c-body)}

/* ---------- Trang sản phẩm: video ---------- */
#video .wb-yt,#video .wb-video-empty{width:100%}

/* ---------- Máy tính bảng ---------- */
@media (max-width:1180px){
  .wb-grid4,.wb-why,.pr-incl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wb-steps5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1080px){
  .wb-home-grid,.wb-split,.jb-detail{grid-template-columns:minmax(0,1fr)}
  .wb-ftr-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wb-ftr-grid .ds-ftr-brand{grid-column:1/-1}
  .jb-apply{position:static}
  .wb-steps4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .tl-hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "card" "side"}
  .dl-item{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .wb-grid3,.wb-grid2,.wb-steps,.wb-steps5,.wb-plans,.dl-gate,.ab-products{grid-template-columns:minmax(0,1fr)}
  .ab-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wb-band{grid-template-columns:minmax(0,1fr)}
  .jb-item{grid-template-columns:minmax(0,1fr)}
  .jb-item .wb-arrow{display:none}
  .wb-plans{max-width:520px}
  .wb-plan.is-hot{order:-1}
}

/* ---------- Điện thoại ---------- */
@media (max-width:640px){
  .ds-hdr-in{height:60px}
  .ds-nav-group{height:60px}
  .ds-mnav{height:calc(100vh - 60px);height:calc(100dvh - 60px)}
  .ds-brand{font-size:18px}
  .ds-lang a{min-width:32px}
  .wb-ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .wb-grid4,.wb-why,.pr-incl,.wb-steps4{grid-template-columns:minmax(0,1fr)}
  .wb-sec-head{align-items:flex-start}
  /* Điện thoại: công cụ ngay dưới tiêu đề (đoạn giới thiệu xuống dưới) để khách dùng được ngay màn hình đầu */
  .wb-home-hero{padding:16px 0 28px}
  .wb-home-grid{gap:14px}
  .wb-home-copy{display:contents}
  .wb-pill{order:1;justify-self:start;margin:0}
  .wb-home-h1{order:2;margin:0;font-size:27px}
  .wb-toolbox{order:3}
  .wb-home-copy .wb-lead{order:4;font-size:15.5px}
  .wb-home-links{order:5;margin:0}
  .wb-home-copy .wb-checks{display:none}
  .wb-toolbox{padding:8px 8px 16px;border-radius:20px}
  .wb-tabs button{font-size:14px;gap:6px;padding:0 6px;white-space:nowrap}
  .wb-tabs button svg{display:none}
  .wb-tabpanel{padding:14px 8px 0}
  .tl-card,.tl-side{padding:16px}
  .tl-go{flex:1 1 100%}
  .tl-ghost{flex:1}
  .tl-code{font-size:24px}
  .tl-copyall{margin-left:0}
  .wb-tool-card{flex-wrap:wrap;padding:22px}
  .wb-tool-card>.ds-btn{width:100%;justify-content:center}
  .wb-final,.wb-band{padding:24px}
  .wb-final-act,.wb-final-act .ds-btn,.wb-band-act,.wb-band-act a,.wb-hero-act a,.ps-cta-act a{width:100%;justify-content:center}
  .dl-opt{padding:22px}
  .dl-act .ds-btn{flex:1 1 100%;justify-content:center}
  .wb-crumb [aria-current]{max-width:26ch}
  .wb-prose{font-size:16px}
  .wb-seg{display:flex}
  .wb-seg a{flex:1;justify-content:center}
}

/* ========================================================
   DH SOFTWARE - 3D SAAS PRODUCT MOCKUP SYSTEM (ENTERPRISE)
   ======================================================== */
.dh-hero-showcase {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.dh-stage-switch {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  background: #EAF3FE;
  border-radius: 12px;
  border: 1px solid #D5E4F5;
  align-self: flex-start;
}
.dh-stage-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--dh-c-body);
  cursor: pointer;
  transition: all 0.2s ease;
}
.dh-stage-btn.is-active,
.dh-stage-btn[aria-selected="true"] {
  background: #FFFFFF;
  color: var(--dh-c-blue-d);
  box-shadow: 0 4px 12px -4px rgba(10, 21, 41, 0.15);
  transform: translateY(-1px);
}
.dh-stage-panel {
  display: none;
  width: 100%;
}
.dh-stage-panel.is-active {
  display: block;
  animation: dhTabFadeIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dhTabFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#dh-mockup-inner-content {
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.dh-mockup-wrap {
  position: relative;
  perspective: 1400px;
  width: 100%;
  padding: 10px 0 30px;
}
.dh-mockup-glow {
  position: absolute;
  inset: -10px;
  background: radial-gradient(circle at 65% 35%, rgba(2, 145, 249, 0.22) 0%, rgba(0, 119, 214, 0.08) 45%, transparent 70%);
  filter: blur(28px);
  z-index: 0;
  pointer-events: none;
}
.dh-mockup-window {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  transform: rotateY(-5deg) rotateX(3.5deg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s;
  background: #FFFFFF;
  border: 1px solid #D7E5F5;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 28px 64px -20px rgba(10, 21, 41, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}
.dh-mockup-wrap:hover .dh-mockup-window {
  transform: rotateY(-1.5deg) rotateX(1deg) translateY(-4px);
  box-shadow: 0 36px 80px -20px rgba(0, 119, 214, 0.32), 0 0 0 1px #BBDCFB inset;
}
.dh-win-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #F8FBFE;
  border-bottom: 1px solid #E1EAF4;
  font-size: 11px;
  color: var(--dh-c-muted);
}
.dh-win-dots {
  display: flex;
  gap: 6px;
}
.dh-win-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.dh-win-dot.red { background: #EF4444; }
.dh-win-dot.amber { background: #F59E0B; }
.dh-win-dot.green { background: #10B981; }
.dh-win-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--dh-c-ink);
  letter-spacing: -0.01em;
}
.dh-win-tag {
  background: #EAF3FE;
  color: var(--dh-c-blue);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
}
.dh-win-body {
  display: grid;
  grid-template-columns: 88px 1fr;
  min-height: 290px;
  background: #FFFFFF;
}
.dh-win-side {
  background: #F4F8FD;
  border-right: 1px solid #E1EAF4;
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 11px;
  color: var(--dh-c-muted);
}
.dh-win-side-brand {
  font-weight: 800;
  color: var(--dh-c-blue-d);
  font-size: 12px;
  margin-bottom: 4px;
}
.dh-win-side-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  font-weight: 600;
}
.dh-win-side-item.is-active {
  background: #EAF3FE;
  color: var(--dh-c-blue-d);
}
.dh-win-content {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dh-win-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dh-win-top-bar h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--dh-c-ink);
}
.dh-win-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.dh-win-kpi {
  padding: 10px 12px;
  background: #F8FBFE;
  border: 1px solid #E1EAF4;
  border-radius: 10px;
}
.dh-win-kpi span {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--dh-c-muted);
  text-transform: uppercase;
}
.dh-win-kpi strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--dh-c-ink);
  letter-spacing: -0.02em;
}
.dh-win-table {
  font-size: 12px;
  border: 1px solid #E1EAF4;
  border-radius: 10px;
  overflow: hidden;
}
.dh-win-tr {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  padding: 8px 12px;
  align-items: center;
  border-bottom: 1px solid #EEF3F8;
}
.dh-win-tr:last-child {
  border-bottom: 0;
}
.dh-win-tr.head {
  background: #F8FBFE;
  font-weight: 700;
  color: var(--dh-c-muted);
  font-size: 10.5px;
  text-transform: uppercase;
}
.dh-win-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
}
.dh-win-status.ok { background: #E4F6EC; color: #0B6B3A; }
.dh-win-status.progress { background: #EAF3FE; color: #0077D6; }
.dh-win-status.wait { background: #FFF5E8; color: #814B08; }

.dh-float-toast {
  position: absolute;
  bottom: 0px;
  left: -20px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  border: 1px solid #BBDCFB;
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 18px 38px -10px rgba(0, 79, 153, 0.28);
  animation: dhFloatAnim 4.5s ease-in-out infinite;
}
@keyframes dhFloatAnim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.dh-float-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #10B981;
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-size: 15px;
  flex-shrink: 0;
}
.dh-float-toast strong {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--dh-c-ink);
}
.dh-float-toast small {
  display: block;
  font-size: 11px;
  color: #059669;
  font-weight: 600;
}
.dh-float-badge {
  position: absolute;
  top: -8px;
  right: -14px;
  z-index: 10;
  background: #0A1529;
  color: #FFFFFF;
  border: 1px solid #314562;
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 12px 24px -6px rgba(10, 21, 41, 0.35);
}
.dh-float-badge svg, .dh-float-badge i {
  color: #0291F9;
}
.dh-product-switcher {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.dh-prod-btn {
  flex: 1;
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid #D5E4F5;
  background: #FFFFFF;
  border-radius: 8px;
  color: var(--dh-c-body);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.dh-prod-btn:hover {
  background: #F4F8FD;
  border-color: #9ED7FF;
}
.dh-prod-btn.is-active {
  background: #0077D6;
  border-color: #0077D6;
  color: #FFFFFF;
}

@media (max-width: 800px) {
  .dh-mockup-window {
    transform: none !important;
  }
  .dh-mockup-wrap {
    perspective: none;
    padding: 0 0 16px;
  }
  .dh-float-toast {
    position: static;
    margin-top: 12px;
    animation: none;
  }
  .dh-float-badge {
    position: static;
    margin-bottom: 8px;
    align-self: flex-start;
  }
  .dh-win-body {
    grid-template-columns: 1fr;
  }
  .dh-win-side {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dh-mockup-window, .dh-float-toast {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}