/* Trang demo tương tác (/he-thong-ket-noi · /he-thong-quan-ly-nhan-vien) — dùng chung token của landing (--blue = cam) */
.dm-hero{padding:56px 0 26px}
.dm-hero .lead{font-size:17px;max-width:760px;margin:14px 0 20px}
.dm-hero h1{font-size:40px;margin-top:14px;max-width:820px}
.dm-anh{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin:26px 0 18px}
.dm-anh figure{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.dm-anh img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.dm-anh figcaption{padding:10px 14px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
.dm-camket{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.dm-camket li{list-style:none;background:var(--alt);border-radius:14px;padding:14px 16px;font-size:14px}
.dm-camket b{display:block;color:var(--ink);margin-bottom:3px}
.dm-luuy{font-size:13px;color:var(--muted);margin-top:14px}
.dm-chip{display:inline-flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.dm-chip span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--ink)}

/* 3 bước + 3 gói */
.dm-buoc{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:0 0 26px;padding:0;list-style:none}
.dm-buoc li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:14px;display:flex;gap:10px;align-items:center}
.dm-buoc li i{font-style:normal;width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px}
.dm-goi{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dm-goi-the{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;position:relative}
.dm-goi-the.noi{border-color:var(--blue);box-shadow:var(--shadow-h)}
.dm-goi-the .flag{position:absolute;top:-12px;left:18px;background:var(--blue);color:#fff;font-size:12px;font-weight:800;border-radius:999px;padding:4px 10px}
.dm-goi-the h3{font-size:22px}
.dm-goi-the .gia{font-size:30px;font-weight:900;color:var(--ink);letter-spacing:-.02em}
.dm-goi-the .gia small{font-size:14px;font-weight:600;color:var(--muted)}
.dm-goi-the .cho{font-size:13.5px;color:var(--muted)}
.dm-goi-the .hai{display:grid;grid-template-columns:1fr;gap:10px}
.dm-goi-the .hai h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);margin-bottom:6px}
.dm-goi-the .hai ul{margin:0;padding:0;list-style:none;font-size:13.5px}
.dm-goi-the .hai li{padding:3px 0 3px 18px;position:relative}
.dm-goi-the .hai li::before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:800}
.dm-goi-the .btn{margin-top:auto}
.dm-goi-the.dang-xem .btn{background:var(--blue-d)}

/* Xem thử: bảng điều khiển + hai khung */
.dm-san{background:#faf4f0;border:1px solid var(--line);border-radius:22px;padding:18px}
.dm-h2{font-size:22px;margin:0 0 14px}
.dm-dk{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.dm-them{margin:-6px 0 16px}
.dm-them summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--muted);list-style:none;display:inline-flex;align-items:center;gap:6px}
.dm-them summary::-webkit-details-marker{display:none}
.dm-them summary::before{content:"▸";font-size:12px;transition:.15s}
.dm-them[open] summary::before{transform:rotate(90deg)}
.dm-them .dm-dk{margin:12px 0 0;padding:12px 14px;border:1px dashed var(--line);border-radius:12px}
.dm-nhom{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dm-nhom>b{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-right:4px}
.dm-radio{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font-size:13.5px;font-weight:700;color:var(--body);cursor:pointer;transition:.15s}
.dm-radio:hover{border-color:var(--blue)}
.dm-radio.on{background:var(--blue);border-color:var(--blue);color:#fff}
.dm-khung{display:grid;grid-template-columns:410px minmax(0,1fr);gap:18px;align-items:start}
.dm-cot-dau{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-weight:700;color:var(--ink);font-size:14px}
.dm-cot-dau .nho{display:flex;gap:6px;align-items:center}
.dm-nho{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:700;color:var(--body);cursor:pointer}
.dm-nho.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.dm-dt-vo{width:410px;max-width:100%;margin:0 auto;background:#1a1f26;border-radius:38px;padding:10px;box-shadow:0 30px 60px rgba(20,10,5,.25);position:relative}
.dm-dt-vo::before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:120px;height:22px;background:#1a1f26;border-radius:0 0 14px 14px;z-index:2}
.dm-dt-vo iframe{display:block;width:100%;height:720px;border:0;border-radius:30px;background:#fff}
.dm-san[data-may="may-tinh"] .dm-khung{grid-template-columns:1fr}
.dm-san[data-may="may-tinh"] .dm-dt-vo{width:100%;border-radius:18px;padding:8px}
.dm-san[data-may="may-tinh"] .dm-dt-vo::before{display:none}
.dm-san[data-may="may-tinh"] .dm-dt-vo iframe{border-radius:12px;height:620px}
.dm-pm-vo{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.dm-pm-vo iframe{display:block;width:100%;height:720px;border:0}
.dm-san[data-xem="khach"] .dm-cot-pm{display:none}
.dm-san[data-xem="khach"] .dm-khung{grid-template-columns:1fr;justify-items:center}
.dm-san[data-xem="phan-mem"] .dm-cot-dt{display:none}
.dm-san[data-xem="phan-mem"] .dm-khung{grid-template-columns:1fr}
.dm-goi-y{margin-top:14px;font-size:14px;color:var(--body);background:#fff;border:1px dashed var(--line);border-radius:14px;padding:12px 16px}
.dm-cho{font-size:13px;color:var(--muted);text-align:center;padding:10px}

/* Thao tác nên thử */
.dm-tt-thanh{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.dm-tt-thanh button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:700;cursor:pointer;color:var(--body)}
.dm-tt-thanh button small{display:block;font-weight:600;color:var(--muted);font-size:11px}
.dm-tt-thanh button.on{border-color:var(--blue);color:var(--blue);background:var(--blue-l)}
.dm-tt{display:grid;gap:18px}
.dm-tt-the{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow);align-items:center}
.dm-tt-the .tu-goi{font-size:12px;font-weight:800;color:var(--blue);text-transform:uppercase;letter-spacing:.1em}
.dm-tt-the h3{font-size:21px;margin:6px 0 8px}
.dm-tt-the p{font-size:14.5px}
.dm-tt-the ol{margin:12px 0 16px;padding-left:0;list-style:none;display:grid;gap:8px}
.dm-tt-the ol li{display:flex;gap:10px;font-size:14px;align-items:flex-start}
.dm-tt-the ol li i{font-style:normal;flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--blue-l);color:var(--blue);display:grid;place-items:center;font-weight:800;font-size:12px}
.dm-tt-the figure{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#f6f0ec;aspect-ratio:3/2}
.dm-tt-the figure img{width:100%;height:100%;object-fit:cover}
.dm-vai-nut{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.dm-vai-nut button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font-size:13px;font-weight:700;cursor:pointer}
.dm-vai-nut button:hover{border-color:var(--blue);color:var(--blue)}

/* Phong cách */
.dm-pc{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dm-pc-the{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.dm-pc-the figure{margin:0;aspect-ratio:3/2;background:#f6f0ec}
.dm-pc-the figure img{width:100%;height:100%;object-fit:cover;display:block}
.dm-pc-the .than{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.dm-pc-the h3{font-size:18px}
.dm-pc-the .nhan{display:flex;gap:6px;flex-wrap:wrap}
.dm-pc-the .nhan span{background:var(--alt);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;color:var(--ink)}
.dm-pc-the .btn{margin-top:auto;align-self:flex-start}

/* Giải pháp kia */
.dm-kia{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dm-kia a{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;transition:.18s}
.dm-kia a:hover{transform:translateY(-3px);box-shadow:var(--shadow-h)}
.dm-kia .ic{font-size:28px}
.dm-kia h3{font-size:18px}
.dm-kia p{font-size:14px}
.dm-kia .link{margin-top:auto}

/* Hỏi nhanh */
.dm-hd details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:10px}
.dm-hd summary{cursor:pointer;font-weight:700;color:var(--ink);font-size:15px}
.dm-hd p{margin-top:8px;font-size:14px}

/* Tab điện thoại/phần mềm trên màn nhỏ */
.dm-tab-nho{display:none}
@media(max-width:980px){
  .dm-anh{grid-template-columns:1fr}.dm-camket{grid-template-columns:1fr}.dm-goi{grid-template-columns:1fr}.dm-pc{grid-template-columns:1fr}.dm-kia{grid-template-columns:1fr}
  .dm-tt-the{grid-template-columns:1fr}.dm-hero h1{font-size:30px}
}
@media(max-width:860px){
  .dm-khung,.dm-san[data-xem="ca-hai"] .dm-khung{grid-template-columns:1fr}
  .dm-tab-nho{display:flex;gap:8px;margin-bottom:12px}
  .dm-tab-nho button{flex:1;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px;font-weight:700;cursor:pointer}
  .dm-tab-nho button.on{background:var(--blue);color:#fff;border-color:var(--blue)}
  .dm-san[data-xem="ca-hai"][data-tab="khach"] .dm-cot-pm{display:none}
  .dm-san[data-xem="ca-hai"][data-tab="phan-mem"] .dm-cot-dt{display:none}
  .dm-dt-vo{width:100%;max-width:410px}
  .dm-dt-vo iframe,.dm-pm-vo iframe{height:78vh;min-height:560px}
  .dm-san{padding:12px;border-radius:16px}
  .dm-nhom{width:100%}
}

/* Sửa sau khi xem thật (05/10 23:40): bỏ tai thỏ che dải tên khách; nút góc khung không vỡ dòng */
.dm-dt-vo::before{display:none}
.dm-cot-dau .nho a,.dm-cot-dau .nho button,.dm-nho{white-space:nowrap}
.dm-cot-dau{flex-wrap:wrap}

/* 06/10 Lighthouse a11y: nâng tương phản chữ phụ trong phần demo (không đụng .kicker/.btn/.sec-sub của landing) */
.dm-luuy,.dm-goi-the .cho,.dm-goi-the .gia small,.dm-anh figcaption,.dm-cho,.dm-tt-thanh button small{color:#6e6059}
.dm-goi-the .hai h4,.dm-tt-the .tu-goi{color:#b8431d}
.dm-radio{color:#4a3f39}
.dm-goi-the .flag{background:#c93a16}

/* Vì sao chuyển sang (06/10) */
.dm-vs{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;align-items:start}
.dm-vs-bang{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.dm-vs-dau,.dm-vs-hang{display:grid;grid-template-columns:1fr 1fr}
.dm-vs-dau span{padding:12px 16px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--alt);border-bottom:1px solid var(--line)}
.dm-vs-dau span:last-child{color:var(--blue)}
.dm-vs-hang span{padding:13px 16px;font-size:14px;border-bottom:1px solid var(--line);line-height:1.5}
.dm-vs-hang:last-child span{border-bottom:0}
.dm-vs-hang .truoc{color:#6e6059;border-right:1px solid var(--line)}
.dm-vs-hang .truoc::before{content:"✕ ";color:#c0392b;font-weight:800}
.dm-vs-hang .sau{color:var(--ink);font-weight:600}
.dm-vs-hang .sau::before{content:"✓ ";color:var(--blue);font-weight:800}
.dm-vs-ben{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.dm-vs-so{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dm-vs-so div{background:var(--alt);border-radius:12px;padding:12px}
.dm-vs-so b{display:block;font-size:22px;color:var(--blue);letter-spacing:-.02em}
.dm-vs-so span{font-size:12px;color:#6e6059;line-height:1.4;display:block;margin-top:4px}
.dm-vs-ben h3{font-size:17px;margin-top:4px}
.dm-vs-ben ol{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.dm-vs-ben ol li{display:flex;gap:10px;font-size:14px;align-items:flex-start}
.dm-vs-ben ol li i{font-style:normal;flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--blue-l);color:var(--blue);display:grid;place-items:center;font-weight:800;font-size:12px}
.dm-vs-camket{font-size:13px;color:#4a3f39;background:var(--alt);border-radius:12px;padding:10px 12px;margin:0}
.dm-vs-ben .btn{align-self:flex-start}
@media(max-width:980px){.dm-vs{grid-template-columns:1fr}.dm-vs-so{grid-template-columns:1fr}.dm-vs-dau{display:none}.dm-vs-hang{grid-template-columns:1fr}.dm-vs-hang .truoc{border-right:0;border-bottom:0;padding-bottom:4px}}