/* Trang Hướng dẫn sử dụng (/huong-dan). Dùng chung thanh đầu, chân trang, nút từ trang-chu.css; mọi lớp riêng bắt đầu bằng hd-. */
.tg-dau nav a.dang-o { background: var(--xanh-nhat); color: var(--xanh-dam); }

/* Bìa: chữ bên trái, ảnh bảng cân + app điện thoại bên phải */
.hd-bia { position: relative; overflow: hidden; color: #fff; padding: 56px 0 120px; background: radial-gradient(900px 420px at 85% -20%, #3b8bff 0%, transparent 60%), linear-gradient(160deg, #013a9e, #0266fc 55%, #014ed1); }
.hd-bia::before, .hd-bia::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.hd-bia::before { width: 380px; height: 380px; background: var(--cam); opacity: .38; top: -170px; right: 6%; }
.hd-bia::after { width: 340px; height: 340px; background: var(--xanh-sang); opacity: .3; bottom: -190px; left: -80px; }
.hd-bia-luoi { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.hd-bia .tg-nhan { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; }
.hd-bia h1 { font-size: clamp(40px, 5.6vw, 64px); line-height: 1.02; letter-spacing: -.045em; font-weight: 800; margin: 18px 0 14px; }
.hd-bia h1 em { font-style: normal; color: #ffd36b; white-space: nowrap; }
.hd-bia-mo { font-size: 18px; opacity: .92; max-width: 30em; }
.hd-bia-tich { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hd-bia-tich li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 99px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); font-size: 14.5px; }
.hd-bia-tich svg { color: #ffd36b; }
.hd-bia .tg-hang-nut { margin: 26px 0 0; }
.hd-bia-hinh { position: relative; padding: 0 0 30px 0; }
.hd-bia-hinh .pc { display: block; width: 100%; height: auto; border-radius: 14px; border: 6px solid rgba(255,255,255,.18); box-shadow: 0 30px 60px -20px rgba(0,10,40,.6); transform: perspective(1400px) rotateY(-8deg) rotateX(3deg); }
.hd-bia-hinh .dt { position: absolute; right: -10px; bottom: -6px; width: 25%; height: auto; border-radius: 22px; border: 5px solid #0e1626; box-shadow: 0 24px 40px -14px rgba(0,10,40,.7); }

/* Lộ trình 3 phần, nổi đè lên mép dưới bìa */
.hd-lo-trinh { position: relative; z-index: 2; margin-top: -84px; }
.hd-lt-luoi { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 16px; align-items: start; }
.hd-lt { background: #fff; border-radius: 20px; padding: 8px 8px 10px; box-shadow: 0 22px 44px -24px rgba(14,22,38,.5); border-top: 5px solid; }
.hd-lt.xanh { border-color: var(--xanh); } .hd-lt.cam { border-color: var(--cam); } .hd-lt.do { border-color: var(--do); }
.hd-lt .dau { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding: 10px 10px 8px; }
.hd-lt .dau span { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.hd-lt.xanh .dau span { background: var(--xanh-nhat); color: var(--xanh-dam); }
.hd-lt.cam .dau span { background: var(--cam-nhat); color: var(--cam-dam); }
.hd-lt.do .dau span { background: var(--do-nhat); color: var(--do-dam); }
.hd-lt .dau b { font-size: 17px; color: var(--chu); }
.hd-lt .dau small { flex-basis: 100%; color: var(--chu-3); font-size: 13px; }
.hd-lt a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; color: var(--chu); font-weight: 600; font-size: 15px; transition: background .1s; }
.hd-lt a svg { margin-left: auto; color: var(--vien-dam); flex: none; }
.hd-lt a:hover { background: #f3f6fb; color: var(--chu); }
.hd-lt a:hover svg { color: var(--chu-3); }
.hd-lt i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #fff; font: 800 13.5px var(--chu-so); font-style: normal; }
.hd-lt.xanh i { background: var(--xanh); } .hd-lt.cam i { background: var(--cam); } .hd-lt.do i { background: var(--do); }
.hd-lo-trinh + .hd-chang { margin-top: 44px; }

/* Dải chia 3 phần */
.hd-chang { padding: 16px 0; color: #fff; font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.hd-chang span { display: inline-block; margin-right: 12px; padding: 3px 10px; border-radius: 8px; background: rgba(255,255,255,.22); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.hd-chang.xanh { background: linear-gradient(90deg, var(--xanh-dam), var(--xanh)); }
.hd-chang.cam { background: linear-gradient(90deg, var(--cam-dam), var(--cam)); }
.hd-chang.do { background: linear-gradient(90deg, var(--do-dam), var(--do)); }

/* Mỗi bước: chữ một bên, ảnh một bên, đổi bên xen kẽ */
.hd-buoc { padding: 64px 0; scroll-margin-top: 68px; }
.hd-buoc.nen { background: #f5f8fd; }
.hd-luoi { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px; align-items: center; }
.hd-luoi.dao { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hd-luoi.dao > .hd-chu { order: 2; }
.hd-phu { margin-top: 44px; padding-top: 40px; border-top: 1px dashed var(--vien-dam); }
.hd-chu h2 { margin-bottom: 18px; font-size: clamp(26px, 3vw, 34px); }
.hd-chu h3 { font-size: 21px; margin-bottom: 12px; }
.hd-so { display: inline-block; font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 99px; margin-bottom: 12px !important; }
.hd-so.xanh { background: var(--xanh-nhat); color: var(--xanh-dam); }
.hd-so.cam { background: var(--cam-nhat); color: var(--cam-dam); }
.hd-so.do { background: var(--do-nhat); color: var(--do-dam); }

.hd-ds { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: d; display: grid; gap: 10px; }
.hd-ds li { position: relative; padding-left: 38px; font-size: 16.5px; color: var(--chu-2); }
.hd-ds li::before { counter-increment: d; content: counter(d); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--chu); color: #fff; font: 800 13px var(--chu-so); }
.hd-ds.cham li::before { content: ""; width: 9px; height: 9px; top: 9px; left: 8px; border-radius: 50%; background: var(--cam); }
.chu-vao { color: var(--xanh); } .chu-ra { color: var(--do); }
.tg h2 .xanh { color: var(--xanh); }

.hd-chu-y { margin: 4px 0 22px; padding: 16px 18px 16px 20px; border-radius: 16px; background: var(--vang-nhat); color: var(--vang-chu); border-left: 5px solid #f2b705; font-size: 15.5px; }
.hd-chu-y > b:first-child { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.hd-meo { font-size: 15px; color: var(--chu-3); background: #fff; border: 1px solid var(--vien); border-radius: 12px; padding: 12px 14px; }
.hd-buoc:not(.nen) .hd-meo { background: #f7f9fd; }
.hd-excel { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1.5px dashed #8fd9a8; background: #f0fbf4; font-size: 14.5px; color: var(--chu-3); }
.hd-excel > span { flex: none; display: grid; place-items: center; width: 44px; height: 32px; border-radius: 8px; background: #16a34a; color: #fff; font: 800 13px var(--chu-so); }
.hd-excel b { display: block; color: var(--chu); font-size: 15px; }

/* Chủ / nhân viên: so sánh trái phải */
.hd-quyen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.hd-quyen > div { border-radius: 14px; padding: 14px; display: grid; gap: 6px; align-content: start; font-size: 14.5px; }
.hd-quyen b { font-size: 16px; }
.hd-quyen span { padding-left: 22px; position: relative; }
.hd-quyen span::before { content: "✓"; position: absolute; left: 0; font-weight: 800; color: #16a34a; }
.hd-quyen span.khong::before { content: "✕"; color: var(--do); }
.hd-quyen .chu { background: var(--xanh-nhat); border: 1px solid var(--xanh-vien); }
.hd-quyen .nv { background: var(--cam-nhat); border: 1px solid var(--cam-vien); }

/* Ảnh chụp phần mềm: khung như cửa sổ trình duyệt, bấm mở ảnh to */
.hd-anh { margin: 0; }
.hd-anh a { display: block; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--vien); box-shadow: 0 24px 50px -26px rgba(14,22,38,.45); transition: transform .12s, box-shadow .12s; }
.hd-anh a::before { content: ""; display: block; height: 22px; background-color: #eef1f5; background-image: radial-gradient(circle at 14px 11px, #ff5f57 4px, transparent 4.5px), radial-gradient(circle at 28px 11px, #febc2e 4px, transparent 4.5px), radial-gradient(circle at 42px 11px, #28c840 4px, transparent 4.5px); border-bottom: 1px solid var(--vien); }
.hd-anh a:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -26px rgba(14,22,38,.55); }
.hd-anh img { display: block; width: 100%; height: auto; }
.hd-anh.nho { max-width: 440px; justify-self: center; }
.hd-anh.giay { max-width: 400px; }
.hd-anh.giay a::before { display: none; }
.hd-anh-doi { display: grid; gap: 18px; justify-items: center; }

/* Bước 7: hai cách nhập đặt cạnh nhau */
.hd-giua { text-align: center; max-width: 760px; margin: 0 auto 30px; }
.hd-giua h2 { margin: 0 auto 10px; }
.hd-giua p { color: var(--chu-3); font-size: 17px; }
.hd-hai-cach { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; align-items: start; }
.hd-hai-cach article { border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.hd-hai-cach .may { background: linear-gradient(180deg, #eef5ff, #fff 60%); border: 1.5px solid var(--xanh-vien); }
.hd-hai-cach .dt { background: linear-gradient(180deg, #fff3e8, #fff 60%); border: 1.5px solid var(--cam-vien); }
.hd-hai-cach header { display: flex; gap: 12px; align-items: center; }
.hd-hai-cach header .so { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; font: 800 20px var(--chu-so); }
.hd-hai-cach .may .so { background: var(--xanh); } .hd-hai-cach .dt .so { background: var(--cam); }
.hd-hai-cach h3 { margin: 0; font-size: 21px; }
.hd-hai-cach header small { color: var(--chu-3); font-size: 14px; }
.hd-hai-cach .hd-ds { margin: 0; }
.hd-hai-cach .khung { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--vien); box-shadow: 0 18px 36px -22px rgba(14,22,38,.45); }
.hd-hai-cach .khung img { display: block; width: 100%; height: auto; }
.hd-3-cach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hd-3-cach span { background: #fff; border: 1px solid var(--xanh-vien); border-radius: 12px; padding: 10px; font-size: 13px; color: var(--chu-3); text-align: center; }
.hd-3-cach b { display: block; color: var(--xanh-dam); font-size: 15px; }
.hd-dt-anh { display: flex; justify-content: center; gap: 14px; }
.hd-dt-anh img { width: 44%; max-width: 190px; height: auto; border-radius: 22px; border: 5px solid #0e1626; box-shadow: 0 18px 36px -18px rgba(14,22,38,.6); }
.hd-dt-anh img:last-child { transform: translateY(18px); }
.hd-tai { display: flex; gap: 10px; flex-wrap: wrap; }
.hd-tai a { flex: 1 1 150px; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px; background: #0e1626; color: #fff; font-weight: 800; font-size: 17px; line-height: 1.1; }
.hd-tai a:hover { background: #24324a; color: #fff; }
.hd-tai svg { width: 26px; height: 26px; flex: none; }
.hd-tai small { display: block; font-size: 11px; font-weight: 500; opacity: .8; }
.hd-cho-duyet { font-size: 13.5px; color: var(--cam-dam); background: var(--cam-nhat); border-radius: 10px; padding: 8px 12px; }
.hd-dong-bo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px !important; padding: 14px 18px; border-radius: 14px; background: #ecfdf3; color: #14532d; font-size: 16px; text-align: center; }
.hd-dong-bo svg { flex: none; color: #16a34a; }

@media (max-width: 980px) {
    .hd-bia-luoi { grid-template-columns: 1fr; gap: 30px; }
    .hd-bia-hinh { max-width: 560px; }
    .hd-lt-luoi { grid-template-columns: 1fr; }
    .hd-luoi, .hd-luoi.dao { grid-template-columns: 1fr; gap: 26px; }
    .hd-luoi.dao > .hd-chu { order: 0; }
    .hd-hai-cach { grid-template-columns: 1fr; }
    .hd-buoc { padding: 48px 0; }
}
@media (max-width: 640px) {
    .hd-bia { padding: 36px 0 100px; }
    .hd-bia-hinh .dt { right: 0; width: 28%; }
        .hd-quyen { grid-template-columns: 1fr; }
    .hd-3-cach { grid-template-columns: 1fr; }
    .hd-hai-cach article { padding: 16px; }
    .hd-chang { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .hd-anh a, .hd-lt a { transition: none; } }